@abi-software/map-utilities 1.1.3-beta.7 → 1.1.3-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.1.3-beta.7",
+  "version": "1.1.3-beta.9",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -39,6 +39,9 @@ const drawnTypes = [
   { value: "None", label: "None" },
 ];
 const showConnectivityGraph = ref(false);
+// const connectivityGraphEntry = "ilxtr:neuron-type-aacar-13";
+const connectivityGraphEntry = "ilxtr:sparc-nlp/kidney/134";
+const mapServer = "https://mapcore-demo.org/curation/flatmap/";
 
 onMounted(() => {
   console.log("🚀 ~ onMounted ~ appRef:", appRef.value);
@@ -513,8 +516,8 @@ function changeHover(value) {
     />
     <ConnectivityGraph
       v-if="showConnectivityGraph"
-      entry="ilxtr:neuron-type-aacar-13"
-      map-server="https://mapcore-demo.org/curation/flatmap/"
+      :entry="connectivityGraphEntry"
+      :map-server="mapServer"
     />
   </div>
 </template>

package/src/components/ConnectivityGraph/ConnectivityGraph.vue

@@ -353,8 +353,12 @@ export default {
       this.zoomLockLabel = this.zoomEnabled ? ZOOM_UNLOCK_LABEL : ZOOM_LOCK_LABEL;
       this.connectivityGraph.enableZoom(!this.zoomEnabled);
     },
-    updateErrorMessage: function (message) {
-      this.errorMessage = message;
+    showErrorMessage: function (errorMessage) {
+      this.errorMessage = errorMessage;
+      // Show error for 3 seconds
+      setTimeout(() => {
+        this.errorMessage = '';
+      }, 3000);
     },
   },
 };
@@ -381,25 +385,29 @@ export default {
 }
 
 .node-key {
-  border: 1px solid $app-primary-color;
-  padding: 4px;
+  padding: 0.5rem;
+  font-size: 12px;
+  border: 1px solid var(--el-border-color);
   background-color: rgba(#f7faff, 0.85);
 
   div div {
     width: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }
 
 .key-head {
   text-align: center;
   font-weight: bold;
-  border-bottom: 1px solid gray;
+  border-bottom: 1px solid var(--el-border-color);
   padding-bottom: 4px;
-  margin-bottom: 4px;
+  margin-bottom: 0.5rem;
 }
 
 .key-box {
-  float: right;
+  display: block;
   width: 12px;
   height: 12px;
 }
@@ -414,10 +422,13 @@ export default {
 }
 
 .control-button {
+  width: 24px;
+  height: 24px;
   margin: 0 !important;
-  padding: 0.25rem !important;
-  font-size: 14px !important;
+  padding: 0 !important;
+  font-size: 16px !important;
   border-color: $app-primary-color !important;
+  border-radius: 50%;
   background: $app-primary-color !important;
   transition: all 0.25s ease;
 
@@ -430,10 +441,6 @@ export default {
   &:active {
     box-shadow: none !important;
   }
-
-  &:hover {
-    background: $lightPurple !important;
-  }
 }
 
 :deep(.cy-graph-tooltip) {

package/src/components/ConnectivityGraph/graph.js

@@ -200,6 +200,15 @@ const GRAPH_STYLE = [
     }
 ]
 
+function capitalizeLabels(input) {
+    return input.split('\n').map(label => {
+        if (label && label[0] >= 'a' && label[0] <= 'z') {
+            return label.charAt(0).toUpperCase() + label.slice(1)
+        }
+        return label
+    }).join('\n')
+}
+
 //==============================================================================
 
 class CytoscapeGraph extends EventTarget
@@ -226,7 +235,6 @@ class CytoscapeGraph extends EventTarget
         }).on('mouseover', 'node', this.overNode.bind(this))
           .on('mouseout', 'node', this.exitNode.bind(this))
           .on('position', 'node', this.moveNode.bind(this))
-          .on('tap', 'node', this.tapNode.bind(this))
           .on('tap', this.tapNode.bind(this))
 
         this.tooltip = document.createElement('div')
@@ -255,10 +263,14 @@ class CytoscapeGraph extends EventTarget
     //==============
     {
         const node = event.target
-        this.tooltip.innerText = node.data().label
+        const label = capitalizeLabels(node.data().label)
+
+        this.tooltip.innerText = label
         this.tooltip.style.left = `${event.renderedPosition.x}px`
         this.tooltip.style.top = `${event.renderedPosition.y}px`
+        this.tooltip.style.maxWidth = '240px'
         this.tooltip.hidden = false
+
         this.checkRightBoundary(event.renderedPosition.x)
     }