Skip to content

Commit

Permalink
Merge pull request #20 from ipb-halle/feature/neighborhood-explorer-i…
Browse files Browse the repository at this point in the history 
…mprovements

Feature/neighborhood explorer improvements
  • Loading branch information
@cav-ipb
cav-ipb authored Jun 17, 2024
2 parents 63f68d0 + feaf81d commit 77a9b9d
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 28 deletions.
14 changes: 7 additions & 7 deletions ontology-manager-client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

45 changes: 32 additions & 13 deletions .../features/modules/visualization/neighborhood-explorer/neighborhood-explorer.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
const [queryResults, setQueryResults] = useState<any[]>([]);
const [searching, setSearching] = useState<boolean>(false);
const [types, setTypes] = useState<any[]>([]);
const [tabPanelActiveIndex, setTabPanelActiveIndex] = useState<number>(0);

let savedVisualization: ISavedGraphVisualization = {
id: "",
Expand Down Expand Up @@ -80,31 +81,39 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
// setElements([...newElements]);
setQueryHistory(await graphVisualizationHistoryService.getAllAsOptions(messageService!));

const nodes = neighborhoodExplorerStore.getIds();
if (nodes.length > 0){
const graph = {nodes: nodes.map(x => {return {data: x}}), edges: []};
myComponentRef.current!.setElements(JSON.stringify(graph));
} else {
const viz = await graphVisualizationHistoryService.get("0", messageService!);
myComponentRef.current!.setElements(viz.visualization);
}
// const nodes = neighborhoodExplorerStore.getIds();
// if (nodes.length > 0){
// const graph = {nodes: nodes.map(x => {return {data: x}}), edges: []};
// myComponentRef.current!.setElements(JSON.stringify(graph));
// } else {
// const viz = await graphVisualizationHistoryService.get("0", messageService!);
// myComponentRef.current!.setElements(viz.visualization);
// }

// console.log(neighborhoodExplorerStore.elements);
// if (neighborhoodExplorerStore.elements?.nodes){
// console.log("here");
// console.log(neighborhoodExplorerStore.elements.nodes);
// myComponentRef.current!.setElements(JSON.stringify(neighborhoodExplorerStore.elements))
// }

const entityTypes = await entityTypeService.getAll(messageService!);
setTypes(entityTypes.map(x => {return {name: x.name, id: x.id, color: x.color}}));
};




useEffect(() => {
init();

return () => {
};
}, []);

const onNodeClickHandler = useCallback(
async (id:any) => {
setElement(await graphService.getNode(id, messageService!));
setSelectionType('node');
setTabPanelActiveIndex(1);
}, []
)

Expand All @@ -114,6 +123,8 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
setLinks(edges);
setSelectedLink(edge);
setSelectionType('edge');
setTabPanelActiveIndex(1);

}, []
)

Expand Down Expand Up @@ -474,6 +485,12 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
tooltipOptions={{position: 'bottom', showDelay: 1000}}

/>
<Button
icon="pi pi-lock"
tooltip='Lock/Unlock all nodes'
onClick={(e) => {myComponentRef.current!.toggleAllLock();}}
tooltipOptions={{position: 'bottom', showDelay: 1000}}
/>
<Button
icon="pi pi-save"
onClick={ async (e) => {
Expand Down Expand Up @@ -520,8 +537,9 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
<div style={{height: "100%"}}>

<MemoChart
key="cytoscapeChart"
ref={myComponentRef}
elements={elements}
elements={[]}
contextMenu={true}
onNodeClickHandler={onNodeClickHandler}
onEdgeClickHandler={onEdgeClickHandler}
Expand All @@ -531,7 +549,8 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
edgeLineColor="black"
edgeLabelColor="black"
graphService={graphService}
messageService={messageService!}
messageService={messageService!}
store={neighborhoodExplorerStore}
>
</MemoChart>
</div>
Expand All @@ -548,7 +567,7 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
>


<TabView>
<TabView activeIndex={tabPanelActiveIndex} onTabChange={(e) => setTabPanelActiveIndex(e.index)}>
<TabPanel header="Legend">
<DataView value={types} listTemplate={typeListTemplate}>

Expand Down
94 changes: 88 additions & 6 deletions ...src/features/shared/cytoscape-interactive-chart/cytoscape-interactive-chart.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Cytoscape from 'cytoscape';
import { MessageService } from "../messages";
import { GraphService } from "../../../services";
import { darkenHexColor } from "../../../utils";
import { INeighborhoodExplorerStore } from "../../../stores/neighborhood-explorer-store";
import { faL } from "@fortawesome/free-solid-svg-icons";

Cytoscape.use(cxtmenu);

Expand All @@ -27,6 +29,7 @@ interface CytoscapeInteractiveChartProps{
edgeLabelColor: any;
graphService: GraphService;
messageService: MessageService;
store: INeighborhoodExplorerStore;
};

const HIGHLIGHT = "__highlight";
Expand All @@ -36,6 +39,8 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC
messageService : MessageService | undefined;
graphService : GraphService;
cytoscapeCore: any;
store: INeighborhoodExplorerStore;
elements: any;

selectedNodes : any[] = [];
currentSelectedNode: number = 0;
Expand All @@ -45,18 +50,56 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC
lockedNodes: Map<string, boolean> = new Map();
lastTapTime = 0;

rendered: boolean = false;
allLock = false;


// Component life cycle

constructor(props: CytoscapeInteractiveChartProps) {
super(props);

this.graphService = props.graphService;
this.messageService = props.messageService;
this.store = props.store;
console.log("running constructor");

this.elements = [];


if (props.store.nodes){
this.elements = [...props.store.nodes];
}
if (props.store.edges){
this.elements = [...this.elements, ...props.store.edges];
}
// Initialize state if needed

}

componentDidMount(): void {
this.configureCytoscape(this.cytoscapeCore);
}

componentWillUnmount() {
console.log("saving");
this.store.elements = this.cytoscapeCore.json().elements;


const nodes = this.cytoscapeCore.elements().jsons()
.filter((x:any) => x.group==="nodes" && x.data.id !== HIGHLIGHT);

const edges = this.cytoscapeCore.elements().jsons()
.filter((x:any) => x.group==="edges");

this.store.nodes = nodes;
this.store.edges = edges;
console.log(this.store.elements);

}



findNode (query: string) {
this.cytoscapeCore.nodes().forEach((node:any) => {
var label = node.data('label').toLowerCase();
Expand Down Expand Up @@ -143,10 +186,7 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC
this.cytoscapeCore.layout(this.layout).run();
}

componentDidMount(): void {
this.configureCytoscape(this.cytoscapeCore);
}



reset(): void {
this.selectedNodes = [];
Expand All @@ -169,6 +209,11 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC
return nodes;
}

getEles() {
const nodes = this.cytoscapeCore.json().elements;
return nodes;
}

getElements() {
const elements = this.cytoscapeCore.json().elements;
return JSON.stringify(elements);
Expand All @@ -193,11 +238,48 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC
this.cytoscapeCore.center(node);
}


// Lock/Unlock functionality

toggleAllLock() {
this.allLock = !this.allLock;
this.lockedNodes = new Map();
if (this.allLock) {
this.cytoscapeCore.elements().nodes().forEach((node:any) => {
node.addClass('locked');
this.lockedNodes.set(node.id(), true);
});
} else {
this.cytoscapeCore.elements().nodes().forEach((node:any) => {
node.removeClass('locked');
})
}
}


configureCytoscape (cytoscapeCore: any) {
const contextMenu = this.props.contextMenu;
const store = this.props.store;

const x = () => {
this.rendered = true;
}



if (cytoscapeCore){


cytoscapeCore.ready(function() {
console.log('Cytoscape canvas has been rendered');
// Your code to run after the graph has been rendered
// if (store.elements?.nodes){
// cytoscapeCore.add(store.elements);
// };

x();
});

cytoscapeCore.on('layoutstop',() => {

if (this.expandedNode !== null){
Expand Down Expand Up @@ -534,11 +616,11 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC

return <CytoscapeComponent
cy={(cy) => { this.cytoscapeCore = cy }}
elements={this.props.elements}
elements={this.elements}
styleEnabled={true}
maxZoom={1}
stylesheet={[this.styles, this.edgeStyle, this.highlightedStyle, this.test, this.buttonStyle, this.selectedStyle, this.lockeStyles]}
layout={this.layout}
// layout={this.layout}
// "#343843"
style={{ width: '100%', height: '100%', backgroundColor: this.props.backgroundColor }}/>
}
Expand Down
6 changes: 5 additions & 1 deletion ontology-manager-client/src/pages/search/compound-search/compound-search-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -438,8 +438,12 @@ export const CompoundSearchPageComponent: React.FC = () => {
tooltip="Show selected records in neighborhood explorer"
tooltipOptions={{showDelay: 800, position: 'bottom'}}
onClick={() => {
neighborhoodExplorerStore.setIds(selectedCompounds.map(x => { return {id: x.id, color: "#343ea0", label: x.name }}));
console.log(selectedCompounds);
neighborhoodExplorerStore.setIds(selectedCompounds.map(x => { return {id: x.id, color: "#343ea0", label: x.molformula }}));
neighborhoodExplorerStore.nodes = neighborhoodExplorerStore.nodes.concat(selectedCompounds.map(x => { return {data: {id: x.id, color: "#343ea0", label: x.molecularFormula }}}));
navigate('/neighborhood-explorer');


}}
></Button>

Expand Down
3 changes: 2 additions & 1 deletion ontology-manager-client/src/pages/search/general-search/general-search-page.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,8 @@ export const GeneralSearchPageComponent: React.FC = () => {
icon="fa fa-compass"
style={{marginLeft: 5}}
onClick={() => {
neighborhoodExplorerStore.setIds(selectedElements.map(x => { return {id: x.id, color: x.color, label: x.name }}));
neighborhoodExplorerStore.nodes = neighborhoodExplorerStore.nodes.concat(selectedElements.map(x => { return {data: {id: x.id, color: x.color, label: x.name }}}));

navigate('/neighborhood-explorer');
}}
tooltip="Show selection in neighborhood explorer"
Expand Down
4 changes: 4 additions & 0 deletions ontology-manager-client/src/stores/neighborhood-explorer-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { injectable } from "inversify";
@injectable()
export class INeighborhoodExplorerStore {

nodes: any[] = [];
edges: any[] = [];
elements: any;

getIds(): any[] {
throw Error();
}
Expand Down

0 comments on commit 77a9b9d

Please sign in to comment.