Cell card explorer

.env

@@ -6,4 +6,5 @@ VITE_APP_ALGOLIA_INDEX=k-core_dev_published_time_desc
 VITE_APP_BL_SERVER_URL=
 VITE_APP_NL_LINK_PREFIX=
 VITE_APP_ROOT_URL=
-VITE_FLATMAPAPI_LOCATION=https://mapcore-demo.org/curation/flatmap/
+VITE_FLATMAPAPI_LOCATION=https://mapcore-demo.org/curation/flatmap/
+VITE_APP_CELL_CARDS_API=http://localhost:8787/cellCardsData.json

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')

src/components.d.ts

@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    CellCard: typeof import('./components/CellCard.vue')['default']
+    CellCardExplorer: typeof import('./components/CellCardExplorer.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
     ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
@@ -43,6 +45,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
+    IconOpenExternal: typeof import('./components/icons/IconOpenExternal.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']