@abi-software/map-side-bar 2.14.5 → 2.14.6-demo.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.14.5",
+  "version": "2.14.6-demo.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/App.vue

@@ -19,6 +19,7 @@
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
+      <el-button @click="showCellCardExplorer()">Show Cell Card Explorer</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -30,6 +31,7 @@
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
+      :showCellCards="showCellCards"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
@@ -45,9 +47,7 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
-
-
-const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+import { capitalise } from './utils/common.js'
 
 const flatmapQuery = (flatmapApi, sql) => {
   const data = { sql: sql };
@@ -136,6 +136,7 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
+        CELL_CARDS_API: import.meta.env.VITE_APP_CELL_CARDS_API,
       },
       connectivityEntry: [],
       createData: {
@@ -152,6 +153,7 @@ export default {
       query: '',
       filter: [],
       target: [],
+      showCellCards: false,
     }
   },
   methods: {
@@ -366,7 +368,12 @@ export default {
     },
     onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput]
-    }
+    },
+    showCellCardExplorer: function () {
+      this.showCellCards = true;
+      this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
+      this.$refs.sideBar.setDrawerOpen(true);
+    },
   },
   mounted: async function () {
     console.log('mounted app')

package/src/assets/connectivity-explorer.scss

@@ -0,0 +1,15 @@
+/*
+ * Common styles for connectivity explorer components
+ */
+
+.id-tag,
+.icon-tag {
+  color: #555;
+  padding: 2px 4px;
+  font-size: .75rem !important;
+}
+
+.id-tag {
+  background: #e0e0e0;
+  border-radius: 4px;
+}