Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/neighborhood explorer improvements #20

Merged
merged 4 commits into from
Jun 17, 2024
Merged

Feature/neighborhood explorer improvements #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
417d3bf
Add cache for neighborhood explorer
cav-ipb Jun 15, 2024
6653fac
Select details panel when clicking on element
cav-ipb Jun 15, 2024
ce1b7d3
Add lock/unlock all button
cav-ipb Jun 15, 2024
feaf81d
Fix vulnerability in braces package (existing package)
cav-ipb Jun 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions ontology-manager-client/package-lock.json
View file
Open in desktop

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading