graph view controls

EBISPOT · Dec 8, 2024 · 0fe3dd1 · 0fe3dd1
1 parent 9673c1d
commit 0fe3dd1
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 21 deletions.
diff --git a/webapp/grebi_ui/src/components/node_graph_view/CyWrapper.tsx b/webapp/grebi_ui/src/components/node_graph_view/CyWrapper.tsx
@@ -12,11 +12,17 @@ export default class CyWrapper {
 
     locked:boolean = false
 
+    onClickElement:((element:any)=>void) = () => {}
+
     constructor(container:HTMLDivElement, elements:any[], style:any, layout:any) {
 
         layout.animate = false
         this.cy = cytoscape({ container, elements, style, layout });
 
+        this.cy.on('click', 'any', (event:any) => {
+            this.onClickElement(event.target)
+        });
+
         for(let elem of elements) {
             this.elementSnapshots.set(elem.data.id, JSON.stringify(elem))
         }

diff --git a/webapp/grebi_ui/src/components/node_graph_view/GraphViewControls.tsx b/webapp/grebi_ui/src/components/node_graph_view/GraphViewControls.tsx
@@ -0,0 +1,25 @@
+import { Box, Button, Divider } from "@mui/material";
+import DatasourceSelector from "../DatasourceSelector";
+import { FilterAlt, FilterList } from "@mui/icons-material";
+
+export default function GraphViewControls({
+    datasources,
+    dsEnabled, setDsEnabled,
+    onMouseoverDs, onMouseoutDs
+}:{
+    datasources:string[], 
+    dsEnabled:string[], setDsEnabled:(ds:string[])=>void,
+    onMouseoverDs?:undefined|((ds:string)=>void), onMouseoutDs?:undefined|((ds:string)=>void)
+}) {
+    return <div>
+        <Box sx={{p:1}}>
+        <DatasourceSelector datasources={datasources} dsEnabled={dsEnabled} setDsEnabled={setDsEnabled} onMouseoverDs={onMouseoverDs} onMouseoutDs={onMouseoutDs} />
+        </Box>
+        <Box sx={{p:1}}>
+        <button className="bg-gray-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+            <FilterAlt />
+            Filter Edges
+        </button>
+        </Box>
+    </div>
+}
diff --git a/webapp/grebi_ui/src/components/node_graph_view/GraphViewCtx.tsx b/webapp/grebi_ui/src/components/node_graph_view/GraphViewCtx.tsx
@@ -4,9 +4,9 @@ import ReactDOM, { render } from "react-dom"
 import { get, getPaginated } from "../../app/api";
 import GraphEdge from "../../model/GraphEdge";
 import GraphNodeRef from "../../model/GraphNodeRef";
-import DatasourceSelector from "../DatasourceSelector";
 import LoadingOverlay from "../LoadingOverlay";
 import CyWrapper from "./CyWrapper";
+import GraphViewControls from "./GraphViewControls";
 
 let formatter = Intl.NumberFormat('en', { notation: 'compact' });
 
@@ -127,7 +127,8 @@ export default class GraphViewCtx {
                         count,
                         size: (MIN_COUNT_NODE_SIZE + (count / max_count) * (MAX_COUNT_NODE_SIZE-MIN_COUNT_NODE_SIZE)),
                         datasources,
-                        dsToCount
+                        dsToCount,
+                        action: {type:'expandEdge', nodeId:nodeId, direction:'outgoing', edgeType}
                     }
                 } as any)
                 elements.push({
@@ -138,10 +139,15 @@ export default class GraphViewCtx {
                         source: nodeId,
                         target: countNodeId, 
                         label: edgeType,
-                        datasources
+                        datasources,
+                        action: {type:'expandEdge', nodeId:nodeId, direction:'outgoing', edgeType}
                     }
                 } as any)
-                constraints.push({ left: nodeId, right: countNodeId })
+                if(count <= MAX_CLICKABLE_COUNT) {
+                    constraints.push({ left: nodeId, right: countNodeId })
+                } else {
+                    constraints.push({ top: nodeId, bottom: countNodeId })
+                }
             }
             for(let [edgeType,{datasources,count,dsToCount}] of incoming_edgeCountByType!.entries()) {
                 if(count === 0)
@@ -155,7 +161,8 @@ export default class GraphViewCtx {
                         count,
                         size: (MIN_COUNT_NODE_SIZE + (count / max_count) * (MAX_COUNT_NODE_SIZE-MIN_COUNT_NODE_SIZE)),
                         datasources,
-                        dsToCount
+                        dsToCount,
+                        action: {type:'expandEdge', nodeId:nodeId, direction:'incoming', edgeType}
                     },
                 } as any)
                 elements.push({
@@ -166,10 +173,15 @@ export default class GraphViewCtx {
                         source: countNodeId,
                         target: nodeId, 
                         label: edgeType,
-                        datasources
+                        datasources,
+                        action: {type:'expandEdge', nodeId:nodeId, direction:'incoming', edgeType}
                     }
                 } as any)
-                constraints.push({ right: nodeId, left: countNodeId })
+                if(count <= MAX_CLICKABLE_COUNT) {
+                    constraints.push({ right: nodeId, left: countNodeId })
+                } else {
+                    constraints.push({ bottom: nodeId, top: countNodeId })
+                }
             }
         }
 
@@ -227,8 +239,8 @@ color:'gray',
                         'curve-style': 'bezier',
                          "text-rotation": "autorotate",
                         //  'font-weight': 'bold',
-                        //  'text-background-opacity': 1,
-                        //  'text-background-color': 'white',
+                         'text-background-opacity': 1,
+                         'text-background-color': 'white',
                         //  'text-border-width': 1,
                         //  'text-border-color': 'black',
                         //  'text-background-padding': '8px',
@@ -272,13 +284,15 @@ color:'gray',
                     style:{
                     'line-color': '#7323b7',
                     'target-arrow-color': '#7323b7',
+                    'color': '#7323b7'
                     }
                 },
                 {
                     selector: 'edge.ds_onto_highlight',
                     style:{
                     'line-color': '#00827c',
-                    'target-arrow-color': '#00827c'
+                    'target-arrow-color': '#00827c',
+                    'color': '#00827c',
                     }
                 }
             ];
@@ -322,12 +336,15 @@ color:'gray',
             this.cy.destroy()
 
         this.cy = new CyWrapper(this.graphDiv, elements, style, layout)
+        this.cy.onClickElement = (id:string) => {
+            console.log(id)
+        }
 
         //this.dsSelectorDiv.innerHTML = ''
 
         let renderDsSelector = () => {
             ReactDOM.render(
-                <DatasourceSelector
+                <GraphViewControls
                     datasources={Array.from(this.allDatasources)}
                     dsEnabled={Array.from(this.allDatasources).filter(el => !this.dsExclude.has(el))}
                     setDsEnabled={async (dss:string[]) => {

diff --git a/webapp/grebi_ui/src/model/GraphNodeRef.ts b/webapp/grebi_ui/src/model/GraphNodeRef.ts
@@ -92,6 +92,9 @@ export default class GraphNodeRef {
         if(types.indexOf('biolink:ChemicalEntity') !== -1) {
             return {long:'Chemical',short:'Chemical'}
         }
+        if(types.indexOf('biolink:Disease') !== -1) {
+            return {long:'Disease',short:'Disease'}
+        }
         if(types.indexOf('gwas:SNP') !== -1) {
             return {long:'SNP',short:'SNP'}
         }
@@ -102,16 +105,6 @@ export default class GraphNodeRef {
             return {long:'Person',short:'Person'}
         }
         if(types.indexOf('ols:Class') !== -1) {
-            let ancestors:any[] = PropVal.arrFrom(this.props['ols:directAncestor']).map(a => a.value)
-            if(ancestors.indexOf("chebi:36080") !== -1) {
-                return {long:'Protein',short:'Protein'}
-            }
-            if(ancestors.indexOf("chebi:24431") !== -1) {
-                return {long:'Chemical',short:'Chemical'}
-            }
-            if(ancestors.indexOf("mondo:0000001") !== -1 || ancestors.indexOf("efo:0000408") !== -1) {
-                return {long:'Disease',short:'Disease'}
-            }
             return {long:'Ontology Class',short:'Class'}
         }
         if(types.indexOf('ols:Property') !== -1) {