From 19df459ee2b65ba4efaeb963b6b168184a3901c1 Mon Sep 17 00:00:00 2001
From: Vincent Emonet <vincent.emonet@gmail.com>
Date: Fri, 22 Nov 2024 10:34:21 +0100
Subject: [PATCH] improve layout

---
 packages/sparql-metamap/src/sparql-metamap.ts | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/sparql-metamap/src/sparql-metamap.ts b/packages/sparql-metamap/src/sparql-metamap.ts
index bc07551..3a8ef19 100644
--- a/packages/sparql-metamap/src/sparql-metamap.ts
+++ b/packages/sparql-metamap/src/sparql-metamap.ts
@@ -82,6 +82,13 @@ type Cluster = {
   positions: {x: number; y: number}[];
 };
 
+type EndpointInfo = {
+  label?: string;
+  description?: string;
+  graphs?: string[];
+  void?: SparqlResultBindings[];
+};
+
 const metadataNamespaces = [
   "http://www.w3.org/ns/shacl#",
   "http://www.w3.org/2002/07/owl#",
@@ -104,8 +111,7 @@ function isMetadataNode(node: string) {
  * @example <sparql-metamap endpoint="https://sparql.uniprot.org/sparql/"></sparql-metamap>
  */
 export class SparqlMetamap extends HTMLElement {
-  endpoints: {[key: string]: {label?: string; description?: string; graphs?: string[]; void?: SparqlResultBindings[]}} =
-    {};
+  endpoints: {[key: string]: EndpointInfo} = {};
   // meta: EndpointsMetadata;
   // void: {[key: string]: SparqlResultBindings[]} = {};
   prefixes: {[key: string]: string} = {};
@@ -557,8 +563,9 @@ export class SparqlMetamap extends HTMLElement {
       const res: Partial<NodeDisplayData> = {...data};
       // If there is a hovered node, all non-neighbor nodes are greyed
       if (this.hoveredNeighbors && !this.hoveredNeighbors.has(node) && this.hoveredNode !== node) {
-        res.label = "";
-        res.color = "#f6f6f6";
+        // res.label = "";
+        // res.color = "#f6f6f6";
+        res.hidden = true;
       }
       // Filter clusters
       if (this.hideClusters.size > 0 && this.hideClusters.has(data.cluster)) {
@@ -567,13 +574,15 @@ export class SparqlMetamap extends HTMLElement {
       // If a node is selected, it is highlighted
       if (this.selectedNode === node) {
         res.highlighted = true;
+        res.hidden = false;
       } else if (this.suggestions) {
         // If there is query, all non-matching nodes are greyed
         if (this.suggestions.has(node)) {
           res.forceLabel = true;
         } else {
-          res.label = "";
-          res.color = "#f6f6f6";
+          res.hidden = true;
+          // res.label = "";
+          // res.color = "#f6f6f6";
         }
       }
       return res;