frontend fixes for subgraphs and edge views

EBISPOT · Aug 19, 2024 · aa79943 · aa79943
1 parent 3038ad1
commit aa79943
Show file tree

Hide file tree

Showing 25 changed files with 197 additions and 215 deletions.
diff --git a/grebi_api/src/main/java/uk/ac/ebi/grebi/GrebiApi.java b/grebi_api/src/main/java/uk/ac/ebi/grebi/GrebiApi.java
@@ -76,8 +76,17 @@ public static void main(String[] args) throws ParseException, org.apache.commons
                     ctx.result(gson.toJson(res));
                 })
                 .get("/api/v1/subgraphs/{subgraph}/nodes/{nodeId}/incoming_edges", ctx -> {
+                    var page_num = ctx.queryParam("page");
+                    if(page_num == null) {
+                        page_num = "0";
+                    }
+                    var size = ctx.queryParam("size");
+                    if(size == null) {
+                        size = "10";
+                    }
+                   var page = PageRequest.of(Integer.parseInt(page_num), Integer.parseInt(size));
                    ctx.contentType("application/json");
-                   ctx.result(gson.toJson(neo.getIncomingEdges(ctx.pathParam("subgraph"), ctx.pathParam("nodeId"))));
+                   ctx.result(gson.toJson( neo.getIncomingEdges( ctx.pathParam("subgraph"), ctx.pathParam("nodeId"), page )));
                 })
 //                .get("/api/v1/edge_types", ctx -> {
 //                    ctx.contentType("application/json");

diff --git a/grebi_api/src/main/java/uk/ac/ebi/grebi/db/GrebiSolrQuery.java b/grebi_api/src/main/java/uk/ac/ebi/grebi/db/GrebiSolrQuery.java
@@ -54,6 +54,7 @@ public SolrQuery constructQuery() {
         SolrQuery query = new SolrQuery();
         query.set("defType", "edismax");
         //query.setFields("grebi:nodeId");
+        query.set("q.op", "AND");
 
         if(searchText != null) {
 

diff --git a/grebi_api/src/main/java/uk/ac/ebi/grebi/repo/GrebiNeoRepo.java b/grebi_api/src/main/java/uk/ac/ebi/grebi/repo/GrebiNeoRepo.java
@@ -5,6 +5,7 @@
 import org.neo4j.driver.EagerResult;
 import org.neo4j.driver.QueryConfig;
 import org.neo4j.driver.Value;
+import org.springframework.data.domain.Pageable;
 import uk.ac.ebi.grebi.GrebiApi;
 import uk.ac.ebi.grebi.db.Neo4jClient;
 import uk.ac.ebi.grebi.db.ResolverClient;
@@ -46,16 +47,23 @@ public EdgeAndNode(Map<String,JsonElement> edge, Map<String,JsonElement> node) {
         }
     }
 
-    public List<EdgeAndNode> getIncomingEdges(String subgraph, String nodeId) {
+    public List<EdgeAndNode> getIncomingEdges(String subgraph, String nodeId, Pageable pageable) {
         EagerResult res = neo4jClient.getDriver().executableQuery(INCOMING_EDGES_QUERY)
-            .withParameters(Map.of("nodeId", nodeId))
+            .withParameters(Map.of(
+                    "nodeId", subgraph + ":" + nodeId,
+                    "offset", pageable.getOffset(),
+                    "limit", pageable.getPageSize()
+            ))
             .withConfig(QueryConfig.builder().withDatabase("neo4j").build()).execute();
 
         var resolved = resolver.resolveToMap(
                 subgraph,
                 res.records().stream().flatMap(record -> {
                     var props = record.asMap();
-                    return List.of((String) props.get("otherId"), (String) props.get("edgeId")).stream();
+                    return List.of(
+                            removeSubgraphPrefix((String) props.get("otherId"), subgraph),
+                            removeSubgraphPrefix((String) props.get("edgeId"), subgraph)
+                    ).stream();
                 }).collect(Collectors.toSet()));
 
         return res.records().stream().map(record -> {
@@ -66,6 +74,13 @@ public List<EdgeAndNode> getIncomingEdges(String subgraph, String nodeId) {
         }).collect(Collectors.toList());
     }
 
+    private String removeSubgraphPrefix(String id, String subgraph) {
+        if(!id.startsWith(subgraph + ":")) {
+            throw new RuntimeException();
+        }
+        return id.substring(subgraph.length() + 1);
+    }
+
     static Map<String, Object> mapValue(Value value) {
         Map<String, Object> res = new TreeMap<>(value.asMap());
         res.put("grebi:type", StreamSupport.stream(value.asNode().labels().spliterator(), false).collect(Collectors.toList()));

diff --git a/grebi_api/src/main/resources/cypher/incoming_edges.cypher b/grebi_api/src/main/resources/cypher/incoming_edges.cypher
@@ -1,3 +1,7 @@
 MATCH (other:GraphNode)-[edge]->(n:GraphNode { `grebi:nodeId`: $nodeId })
-RETURN other.`grebi:nodeId` as otherId, edge.`grebi:edgeId` as edgeId
+RETURN other.`grebi:nodeId` as otherId, edge.edge_id as edgeId
+SKIP $offset
+LIMIT $limit
+
+
 
diff --git a/grebi_api/src/main/resources/cypher/outgoing_edges.cypher b/grebi_api/src/main/resources/cypher/outgoing_edges.cypher
@@ -1,3 +1,5 @@
 MATCH (n:GraphNode { `grebi:nodeId`: $nodeId })-[edge]->(other:GraphNode)
-RETURN edge.`grebi:edgeId` as edgeId, other.`grebi:nodeId` as otherId
+RETURN edge.edge_id as edgeId, other.`grebi:nodeId` as otherId
+SKIP $offset
+LIMIT $limit
 
diff --git a/grebi_api/src/main/resources/cypher/search.cypher b/grebi_api/src/main/resources/cypher/search.cypher
diff --git a/grebi_ui/dist/logo.svg b/grebi_ui/dist/logo.svg
diff --git a/grebi_ui/package.json b/grebi_ui/package.json
@@ -36,7 +36,8 @@
     "styled-components": "^5.2.1",
     "typescript": "^4.1.2",
     "url-join": "^5.0.0",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "country-code-to-flag-emoji": "^1.2.1"
   },
   "scripts": {
     "build": "dotenv -e .env.$REACT_APP_ENV -e .env -- node build.mjs",

diff --git a/grebi_ui/src/components/ClassExpression.tsx b/grebi_ui/src/components/ClassExpression.tsx
@@ -33,7 +33,7 @@ export default function ClassExpression({
     if(equivClass) {
       return <Fragment>
         { expr['label'] && <span>{expr['label']} </span> }
-        <ClassExpression node={node} expr={equivClass}  />
+        <ClassExpression subgraph={subgraph} node={node} expr={equivClass}  />
         </Fragment>
     }
   }
@@ -65,6 +65,7 @@ export default function ClassExpression({
       }
       nodes.push(
         <ClassExpression
+        subgraph={subgraph}
           key={randomString()}
 	  node={node}
           expr={subExpr}
@@ -103,6 +104,7 @@ export default function ClassExpression({
       }
       nodes.push(
         <ClassExpression
+        subgraph={subgraph}
           key={randomString()}
 	  node={node}
           expr={subExpr}
@@ -128,6 +130,7 @@ export default function ClassExpression({
       <span>
         <span className="pr-1 text-neutral-default italic">not</span>
         <ClassExpression
+        subgraph={subgraph}
 	  node={node}
 	  expr={complementOf}
 	   />
@@ -153,6 +156,7 @@ export default function ClassExpression({
       }
       nodes.push(
         <ClassExpression
+        subgraph={subgraph}
           key={randomString()}
 	  node={node}
           expr={subExpr}
@@ -178,7 +182,7 @@ export default function ClassExpression({
 		<span className="px-1 text-embl-purple-default italic">inverse</span>
 		<span>
 		{"("}
-		<ClassExpression node={node} expr={inverseOf}  />
+		<ClassExpression subgraph={subgraph} node={node} expr={inverseOf}  />
 		{")"}
 		</span>
 		</span>
@@ -195,7 +199,7 @@ export default function ClassExpression({
 	const withRestrictions = asArray(expr["owl:withRestrictions"]);
 
 	let res:JSX.Element[] = [
-		<ClassExpression node={node} expr={onDatatype}  />
+		<ClassExpression subgraph={subgraph} node={node} expr={onDatatype}  />
 	]
 
 	if(withRestrictions.length > 0) {
@@ -261,9 +265,9 @@ export default function ClassExpression({
   if (someValuesFrom) {
     return (
       <span>
-        <ClassExpression  node={node}  expr={onProperty} />
+        <ClassExpression subgraph={subgraph}  node={node}  expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">some</span>
-        <ClassExpression  node={node}  expr={someValuesFrom} />
+        <ClassExpression subgraph={subgraph}  node={node}  expr={someValuesFrom} />
       </span>
     );
   }
@@ -274,9 +278,9 @@ export default function ClassExpression({
   if (allValuesFrom) {
     return (
       <span>
-        <ClassExpression  node={node}  expr={onProperty} />
+        <ClassExpression subgraph={subgraph}  node={node}  expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">only</span>
-        <ClassExpression  node={node}  expr={allValuesFrom} />
+        <ClassExpression subgraph={subgraph}  node={node}  expr={allValuesFrom} />
       </span>
     );
   }
@@ -285,9 +289,9 @@ export default function ClassExpression({
   if (hasValue) {
     return (
       <span>
-        <ClassExpression   node={node}  expr={onProperty} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">value</span>
-        <ClassExpression   node={node}  expr={hasValue} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={hasValue} />
       </span>
     );
   }
@@ -298,9 +302,9 @@ export default function ClassExpression({
   if (minCardinality) {
     return (
       <span>
-        <ClassExpression   node={node}  expr={onProperty} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">min</span>
-        <ClassExpression   node={node}  expr={minCardinality} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={minCardinality} />
       </span>
     );
   }
@@ -311,9 +315,9 @@ export default function ClassExpression({
   if (maxCardinality) {
     return (
       <span>
-        <ClassExpression   node={node}  expr={onProperty} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">max</span>
-        <ClassExpression   node={node}  expr={maxCardinality} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={maxCardinality} />
       </span>
     );
   }
@@ -323,9 +327,9 @@ export default function ClassExpression({
   if (exactCardinality) {
     return (
       <span>
-        <ClassExpression   node={node}  expr={onProperty} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">exactly</span>
-        <ClassExpression   node={node}  expr={exactCardinality} />
+        <ClassExpression subgraph={subgraph}   node={node}  expr={exactCardinality} />
       </span>
     );
   }
@@ -334,7 +338,7 @@ export default function ClassExpression({
   if (hasSelf) {
     return (
       <span>
-        <ClassExpression node={node}     expr={onProperty} />
+        <ClassExpression subgraph={subgraph} node={node}     expr={onProperty} />
         <span className="px-1 text-embl-purple-default italic">Self</span>
       </span>
     );
@@ -353,16 +357,16 @@ export default function ClassExpression({
     if (minQualifiedCardinality) {
       return (
         <span>
-          <ClassExpression   node={node}  expr={onProperty} />
+          <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
           <span className="px-1 text-embl-purple-default italic">min</span>
-          <ClassExpression
+          <ClassExpression subgraph={subgraph}
     node={node} 
 
             expr={minQualifiedCardinality}
 
           />
           &nbsp;
-          <ClassExpression
+          <ClassExpression subgraph={subgraph}
     node={node} 
 
             expr={onClass}
@@ -378,16 +382,16 @@ export default function ClassExpression({
     if (maxQualifiedCardinality) {
       return (
         <span>
-          <ClassExpression   node={node}  expr={onProperty} />
+          <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
           <span className="px-1 text-embl-purple-default italic">max</span>
-          <ClassExpression
+          <ClassExpression subgraph={subgraph}
     node={node} 
 
             expr={maxQualifiedCardinality}
 
           />
           &nbsp;
-          <ClassExpression
+          <ClassExpression subgraph={subgraph}
     node={node} 
 
             expr={onClass}
@@ -403,16 +407,16 @@ export default function ClassExpression({
     if (exactQualifiedCardinality) {
       return (
         <span>
-          <ClassExpression   node={node}  expr={onProperty} />
+          <ClassExpression subgraph={subgraph}   node={node}  expr={onProperty} />
           <span className="px-1 text-embl-purple-default italic">exactly</span>
-          <ClassExpression
+          <ClassExpression subgraph={subgraph}
 
     node={node} 
             expr={exactQualifiedCardinality}
 
           />
           &nbsp;
-          <ClassExpression
+          <ClassExpression subgraph={subgraph}
     node={node} 
 
             expr={onClass}

diff --git a/grebi_ui/src/components/Header.tsx b/grebi_ui/src/components/Header.tsx
@@ -52,7 +52,7 @@ export default function Header({ section }: { section?: string }) {
                 role="menuitem"
                 className={`rounded-l-md px-4 py-3  ${
                   section === "home"
-                    ? "bg-opacity-75 bg-neutral-500"
+                    ? "bg-opacity-30 bg-neutral-500"
                     : "hover:bg-opacity-50 hover:bg-neutral-500"
                 }`}
               >
@@ -67,44 +67,13 @@ export default function Header({ section }: { section?: string }) {
                 role="menuitem"
                 className={`px-4 py-3 ${
                   section === "ontologies"
-                    ? " bg-opacity-75 bg-neutral-500"
+                    ? " bg-opacity-30 bg-neutral-500"
                     : "hover:bg-opacity-50 hover:bg-neutral-500 "
                 }`}
               >
                 <Stack alignItems="center" direction="row" gap={1}>
-                  <MediationIcon />
-                  Datasources
-                </Stack>
-              </li>
-            </Link>
-            <Link to="/collections">
-              <li
-                role="menuitem"
-                className={`px-4 py-3 ${
-                  section === "ontologies"
-                    ? " bg-opacity-75 bg-neutral-500"
-                    : "hover:bg-opacity-50 hover:bg-neutral-500 "
-                }`}
-              >
-                <Stack alignItems="center" direction="row" gap={1}>
-                  {/* <JoinRightIcon /> good for collections */}
-                  <ViewList/>
-                  Collections
-                </Stack>
-              </li>
-            </Link>
-            <Link to={`/analyses`}>
-              <li
-                role="menuitem"
-                className={`px-4 py-3  ${
-                  section === "help"
-                    ? " bg-opacity-75 bg-neutral-500"
-                    : "hover:bg-opacity-50 hover:bg-neutral-500"
-                }`}
-              >
-                <Stack alignItems="center" direction="row" gap={1}>
-                  <Science />
-                  Analyses
+                  <JoinRightIcon />
+                  Subgraphs
                 </Stack>
               </li>
             </Link>
@@ -113,7 +82,7 @@ export default function Header({ section }: { section?: string }) {
                 role="menuitem"
                 className={`rounded-r-md px-4 py-3 ${
                   section === "downloads"
-                    ? " bg-opacity-75 bg-neutral-500"
+                    ? " bg-opacity-30 bg-neutral-500"
                     : "hover:bg-opacity-50 hover:bg-neutral-500"
                 }`}
               >