graph view fixes and datasource highlighting

webapp/grebi_ui/src/components/DatasourceSelector.tsx

@@ -3,10 +3,12 @@ import React from "react";
 
 export default function DatasourceSelector({
     datasources,
-    dsEnabled, setDsEnabled
+    dsEnabled, setDsEnabled,
+    onMouseoverDs, onMouseoutDs
 }:{
     datasources:string[], 
-    dsEnabled:string[], setDsEnabled:(ds:string[])=>void
+    dsEnabled:string[], setDsEnabled:(ds:string[])=>void,
+    onMouseoverDs?:undefined|((ds:string)=>void), onMouseoutDs?:undefined|((ds:string)=>void)
 }) {
 
       datasources.sort((a, b) => a.localeCompare(b) + (a.startsWith("OLS.") ? 10000 : 0) + (b.startsWith("OLS.") ? -10000 : 0))
@@ -22,13 +24,13 @@ export default function DatasourceSelector({
   return <div className="pt-2">
                 {datasources.map((ds, i) => {
                   if (ds.startsWith("OLS.")) {
-                    return <span className="mr-1">
+                    return <span className="mr-1" onMouseOver={() => onMouseoverDs && onMouseoverDs(ds)} onMouseOut={() => onMouseoutDs && onMouseoutDs(ds)}>
                     { datasources.length > 1 && <Checkbox size="small" style={{padding:0, color:'rgb(0 130 124)'}} checked={dsEnabled.indexOf(ds) !== -1} onChangeCapture={() => toggleDsEnabled(ds)} />}
                       <span
                       className="link-ontology px-2 py-0.5 rounded-md text-xs text-white uppercase"
                       title={ds.split('.')[1]}>{ds.split('.')[1]}</span></span>
                   } else {
-                    return <span className="mr-1">
+                    return <span className="mr-1" onMouseOver={() => onMouseoverDs && onMouseoverDs(ds)} onMouseOut={() => onMouseoutDs && onMouseoutDs(ds)}>
                     { datasources.length > 1 && <Checkbox size="small" style={{padding:0, color:'rgb(115 35 183)'}} checked={dsEnabled.indexOf(ds) !== -1} onChangeCapture={() => toggleDsEnabled(ds)} />}
                       <span
                       className="link-datasource px-2 py-0.5 rounded-md text-xs text-white uppercase"

webapp/grebi_ui/src/components/node_graph_view/CyWrapper.tsx

@@ -0,0 +1,111 @@
+
+import cytoscape from "cytoscape"
+import fcose from "cytoscape-fcose"
+
+cytoscape.use(fcose)
+
+export default class CyWrapper {
+
+    cy:any
+
+    elementSnapshots:Map<string, string> = new Map()
+
+    locked:boolean = false
+
+    constructor(container:HTMLDivElement, elements:any[], style:any, layout:any) {
+
+        layout.animate = false
+        this.cy = cytoscape({ container, elements, style, layout });
+
+        for(let elem of elements) {
+            this.elementSnapshots.set(elem.data.id, JSON.stringify(elem))
+        }
+    }
+
+    exclusiveBatch(op:()=>void) {
+
+        if(this.locked) {
+            throw new Error('graph is already updating')
+        }
+        this.locked = true
+
+        this.cy.startBatch()
+        op()
+        this.cy.endBatch()
+
+        this.locked = false
+
+    }
+
+    updateElements(elems:any[]) {
+
+        this.exclusiveBatch(() => {
+
+
+            let curElemIdSet = new Set()
+            for(let elem of elems) {
+                curElemIdSet.add(elem.data.id)
+            }
+
+            // remove elems that are gone now
+            //
+            for(let elemId of this.elementSnapshots.keys()) {
+                if(!curElemIdSet.has(elemId)) {
+                    let elem = this.cy.getElementById(elemId)
+                    elem.remove()
+                    this.elementSnapshots.delete(elemId)
+                }
+            }
+
+            let adds:any[] = []
+
+            for(let elem of elems) {
+                curElemIdSet.add(elem.data.id)
+
+                let oldSnapshot = this.elementSnapshots.get(elem.data.id)
+                let curSnapshot = JSON.stringify(elem)
+                this.elementSnapshots.set(elem.data.id, curSnapshot)
+
+                if(oldSnapshot) {
+                    if(oldSnapshot === curSnapshot) {
+                        // element has not changed, nothing to do
+                        continue
+                    }
+                    // element was in the graph but has changed
+                    let exist = this.cy.getElementById(elem.data.id)
+                    exist.data(elem.data)
+                } else {
+                    // element is new
+                    adds.push(elem)
+                }
+            }
+
+            this.cy.add(adds)
+        })
+
+    }
+
+    async applyLayout(layout:any):Promise<void> {
+
+        return new Promise((resolve, reject) => {
+
+            layout.animationDuration = 500
+            layout.stop = () => {
+                resolve()
+            }
+
+            this.cy.layout(layout).run();
+        });
+    }
+
+    destroy() {
+        this.cy.destroy()
+    }
+
+    getElements():any[] {
+        return this.cy.elements()
+    }
+
+
+}
+