ebi webapp updates

webapp/grebi_ui/src/components/datatable/DataTable.tsx

@@ -188,7 +188,7 @@ export default function DataTable({
                         className="text-md align-top py-2 px-4"
                         key={randomString()}
                       >
-                        <div style={{ ...( maxRowHeight ? {maxHeight: maxRowHeight, overflowY:"scroll"} : {}) }}>
+                        <div style={{ ...( maxRowHeight ? {maxHeight: maxRowHeight, overflowY:"auto"} : {}) }}>
                         {column.selector(row, column.id)
                           ? column.selector(row, column.id)
                           : "(no data)"}

webapp/grebi_ui/src/components/matq/MaterialisedQueryTable.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, Fragment } from "react";
 import GraphMetadata from "../../model/GraphMetadata"
 import MaterialisedQuery from "../../model/MaterialisedQuery";
 import LocalDataTable from "../datatable/LocalDataTable"
 import { get } from "../../app/api";
 import { Box, Button, CircularProgress, Link, Stack } from "@mui/material";
-import { Download } from "@mui/icons-material";
+import { Download, Info } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 
 
@@ -19,7 +19,11 @@ const cols= [
         id:"id",
         name:"Query ID",
         selector:(row:any,key:string)=> {
-            return <Link className="link-default" target="_blank" href={`https://github.com/EBISPOT/GrEBI/blob/dev/materialised_queries/${row[key]}.yaml`}> <code>{row[key]}</code></Link>
+            return <Fragment>
+                <code>{row[key]}</code> <Link className="link-default" target="_blank" href={`https://github.com/EBISPOT/GrEBI/blob/dev/materialised_queries/${row[key]}.yaml`}>
+<span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><Info style={{ fontSize: '1em' }} /></span>
+                </Link>
+                </Fragment>
         },
         sortable:true
     },
@@ -80,7 +84,6 @@ export default function MaterialisedQueryTable({
     return <LocalDataTable
                     data={matQs} 
                     addColumnsFromData={false}
-                    maxRowHeight={"1.5em"}
                     defaultSelector={(row,key)=>row[key]}
                     columns={cols}
                     onSelectRow={(row) => {

webapp/grebi_ui/src/components/node_edge_list/EdgesInList.tsx → webapp/grebi_ui/src/components/node_edge_list/EdgesList.tsx

@@ -10,6 +10,7 @@ import DatasourceSelector from "../DatasourceSelector";
 import { DatasourceTags } from "../DatasourceTag";
 import DataTable from "../datatable/DataTable";
 import LoadingOverlay from "../LoadingOverlay";
+import { dir } from "console";
 
 export interface EdgesState {
     total:number,
@@ -19,13 +20,14 @@ export interface EdgesState {
     propertyColumns:string[]
 };
 
-export default function EdgesInList(params:{
+export default function EdgesList(params:{
     subgraph:string,
     node:GraphNode,
+    direction:'incoming'|'outgoing',
     onEdgesLoaded?:((edges:EdgesState) => void)|undefined,
     extraSearchParams?: string[][]|undefined
 }) {
-    let { subgraph, node, onEdgesLoaded, extraSearchParams } = params
+    let { direction, subgraph, node, onEdgesLoaded, extraSearchParams } = params
 
   let [edgesState, setEdgesState] = useState<null|EdgesState>(null)
 
@@ -42,7 +44,8 @@ export default function EdgesInList(params:{
         async function getEdges() {
             console.log('refreshing ', node.getNodeId(), JSON.stringify(dsEnabled), JSON.stringify(edgesState?.datasources))
             setLoading(true)
-            let res = (await getPaginated<any>(`api/v1/subgraphs/${subgraph}/nodes/${node.getEncodedNodeId()}/incoming_edges?${
+            let endpoint = direction === 'incoming' ? 'incoming_edges' : 'outgoing_edges'
+            let res = (await getPaginated<any>(`api/v1/subgraphs/${subgraph}/nodes/${node.getEncodedNodeId()}/${endpoint}?${
                 new URLSearchParams([
                     ['page', page],
                     ['size', rowsPerPage],
@@ -72,7 +75,7 @@ export default function EdgesInList(params:{
         }
         getEdges()
 
-    }, [ node.getNodeId(), JSON.stringify(dsEnabled), page, rowsPerPage, filter, sortColumn, sortDir ]);
+    }, [ direction, node.getNodeId(), JSON.stringify(dsEnabled), page, rowsPerPage, filter, sortColumn, sortDir ]);
 
     if(edgesState == null) {
         return <LoadingOverlay message="Loading edges..." />
@@ -92,14 +95,25 @@ export default function EdgesInList(params:{
                     },
                     sortable: true,
                 },
-                {
+                ...
+                (direction === 'incoming' ? [
+                    {
                     id: 'grebi:from',
                     name: 'From Node',
                     selector: (row:GraphEdge) => {
                         return  <NodeRefLink subgraph={subgraph} nodeRef={row.getFrom()} />
                     },
                     sortable: true,
-                },
+                } ,
+                {
+                    id: 'grebi:type',
+                    name: 'Edge Type',
+                    selector: (row:GraphEdge) => {
+                        return row.getType()
+                    },
+                    sortable: true,
+                }
+            ] : [
                 {
                     id: 'grebi:type',
                     name: 'Edge Type',
@@ -108,6 +122,15 @@ export default function EdgesInList(params:{
                     },
                     sortable: true,
                 },
+                 {
+                    id: 'grebi:to',
+                    name: 'To Node',
+                    selector: (row:GraphEdge) => {
+                        return  <NodeRefLink subgraph={subgraph} nodeRef={row.getTo()} />
+                    },
+                    sortable: true,
+                }
+            ]),
                 ...(edgesState?.propertyColumns || []).map((prop:string) => {
                     return {
                         name: prop,

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

@@ -358,7 +358,6 @@ color:'gray',
                         //     this.clearHighlightedDatasource()
                         // }
                         this.dsExclude = newExclude
-                        this.loadSingulars()
                         this.startLoading(false)
                         renderDsSelector()
                         await this.incrementalUpdate()
@@ -405,11 +404,6 @@ color:'gray',
         })
     }
 
-    loadSingulars() {
-
-
-    }
-
     async incrementalUpdate() {
 
         let {elements,style,layout} = this.renderToCytoscapeJson()
@@ -440,11 +434,44 @@ color:'gray',
         return Promise.all(toLoadShallow.map(node => this.loadShallow(node)))
     }
 
+    async loadIncoming(node:GraphNodeRef) {
+
+        let res = await get<any>(`api/v1/subgraphs/${this.subgraph}/nodes/${node.getEncodedNodeId()}/incoming_edge_counts`)
+
+        return this.resolveSingulars(res)
+    }
+
+    async loadOutgoing(node:GraphNodeRef) {
+
+        let res = await get<any>(`api/v1/subgraphs/${this.subgraph}/nodes/${node.getEncodedNodeId()}/outgoing_edge_counts`)
+
+
+        return this.resolveSingulars(res)
+    }
+
+    async resolveSingulars(res:any) {
+
+        // {p: datasource: count }}
+
+        let singulars = new Set<string>()
+        let singularToDs = new Map<string,string>()
+        for(let edgeType of Object.keys(res)) {
+            let dsToCount = res[edgeType]
+            let dss = Object.keys(dsToCount)
+            if(dss.length === 1) {
+                singulars.add(edgeType)
+                singularToDs.set(edgeType, dss[0])
+            }
+        }
+
+    }
+
+
     async loadShallow(node:GraphNodeRef) {
 
         let [incomingEdgeCounts,outgoingEdgeCounts] = (await Promise.all([
-            get<any>(`api/v1/subgraphs/${this.subgraph}/nodes/${node.getEncodedNodeId()}/incoming_edge_counts`),
-            get<any>(`api/v1/subgraphs/${this.subgraph}/nodes/${node.getEncodedNodeId()}/outgoing_edge_counts`)
+            this.loadIncoming(node),
+            this.loadOutgoing(node)
         ]))
 
         this.incoming_nodeIdToEdgeCountByTypeAndDs.set(node.getNodeId(), incomingEdgeCounts);

webapp/grebi_ui/src/frontends/ebi/pages/EbiNodePage.tsx

@@ -13,13 +13,14 @@ import { FormatListBulleted, CallReceived, CallMade, Share } from "@mui/icons-ma
 import { Typography, Grid, Tabs, Tab, Box } from "@mui/material";
 import { copyToClipboard } from "../../../app/util";
 import LoadingOverlay from "../../../components/LoadingOverlay";
-import EdgesInList from "../../../components/node_edge_list/EdgesInList";
+import EdgesInList from "../../../components/node_edge_list/EdgesList";
 import GraphView from "../../../components/node_graph_view/GraphView";
 import PropTable from "../../../components/node_prop_table/PropTable";
 import SearchBox from "../../../components/SearchBox";
 import GraphNode from "../../../model/GraphNode";
 import { get, getPaginated } from "../../../app/api";
 import encodeNodeId from "../../../encodeNodeId";
+import EdgesList from "../../../components/node_edge_list/EdgesList";
 
 
 export default function EbiNodePage() {
@@ -91,9 +92,10 @@ export default function EbiNodePage() {
           <PropTable lang={lang} subgraph={subgraph} node={node} />
         </TabPanel>
         <TabPanel value={tab} index={"edges_in"}>
-          <EdgesInList subgraph={subgraph} node={node} />
+          <EdgesList direction="incoming" subgraph={subgraph} node={node} />
         </TabPanel>
         <TabPanel value={tab} index={"edges_out"}>
+          <EdgesList direction="outgoing" subgraph={subgraph} node={node} />
         </TabPanel>
         <TabPanel value={tab} index={"graph"}>
          <GraphView subgraph={subgraph} node={node} />

webapp/grebi_ui/src/frontends/exposomekg/pages/EkgNodePage.tsx

@@ -13,7 +13,7 @@ import { FormatListBulleted, CallReceived, CallMade, Share, Masks, Summarize, Un
 import { Typography, Grid, Tabs, Tab, Box } from "@mui/material";
 import { copyToClipboard } from "../../../app/util";
 import LoadingOverlay from "../../../components/LoadingOverlay";
-import EdgesInList from "../../../components/node_edge_list/EdgesInList";
+import EdgesList from "../../../components/node_edge_list/EdgesList";
 import GraphView from "../../../components/node_graph_view/GraphView";
 import PropTable from "../../../components/node_prop_table/PropTable";
 import SearchBox from "../../../components/SearchBox";
@@ -83,9 +83,10 @@ export default function EkgNodePage() {
           <PropTable lang={lang} subgraph={process.env.REACT_APP_EXPOSOMEKG_SUBGRAPH!} node={node} />
         </TabPanel>
         <TabPanel value={tab} index={"edges_in"}>
-          <EdgesInList subgraph={process.env.REACT_APP_EXPOSOMEKG_SUBGRAPH!} node={node} />
+          <EdgesList direction="incoming" subgraph={process.env.REACT_APP_EXPOSOMEKG_SUBGRAPH!} node={node} />
         </TabPanel>
         <TabPanel value={tab} index={"edges_out"}>
+          <EdgesList direction="outgoing" subgraph={process.env.REACT_APP_EXPOSOMEKG_SUBGRAPH!} node={node} />
         </TabPanel>
         <TabPanel value={tab} index={"graph"}>
          <GraphView subgraph={process.env.REACT_APP_EXPOSOMEKG_SUBGRAPH!} node={node} />

webapp/up_saturos.fish

@@ -1,6 +1,6 @@
 export GREBI_NEO_DATA_PATH=/data/grebi_from_codon/(ls /data/grebi_from_codon/ | grep neo | grep -v tgz)/data
 export GREBI_SOLR_PATH=/data/grebi_from_codon/(ls /data/grebi_from_codon/ | grep solr | grep -v tgz)
-export GREBI_SQLITE_SEARCH_PATH=/data/grebi_from_codon/
-export GREBI_METADATA_JSON_SEARCH_PATH=/data/grebi_from_codon/
+export GREBI_SQLITE_SEARCH_PATH=/data/grebi_from_codon/sqlite
+export GREBI_METADATA_JSON_SEARCH_PATH=/data/grebi_from_codon/metadata