@abi-software/map-side-bar 2.18.0 → 2.19.1-demo.0

package/eslint.config.js

@@ -1,23 +1,58 @@
-import js from "@eslint/js";
-import vue from "eslint-plugin-vue";
-import globals from "globals";
+import js from '@eslint/js';
+import { includeIgnoreFile } from 'eslint/config';
+import prettier from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+import cypress from 'eslint-plugin-cypress';
+import vue from 'eslint-plugin-vue';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url));
 
 export default [
+  includeIgnoreFile(gitignorePath, { gitignoreResolution: true }),
   {
-    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+    ignores: ['dist/**', 'docs/.vitepress/**', 'docs/components/**'],
   },
   js.configs.recommended,
-  ...vue.configs["flat/essential"],
+  ...vue.configs['flat/essential'],
+  prettierConfig,
+  {
+    ...cypress.configs.recommended,
+    files: ['cypress/**/*.js'],
+  },
   {
-    files: ["**/*.{js,vue}"],
+    files: ['**/*.{js,vue}'],
+    plugins: {
+      prettier,
+    },
     languageOptions: {
-      ecmaVersion: "latest",
-      sourceType: "module",
+      ecmaVersion: 'latest',
+      sourceType: 'module',
       globals: {
         ...globals.node,
         ...globals.browser,
       },
     },
-    rules: {},
+    rules: {
+      'prettier/prettier': [
+        'error',
+        {
+          singleQuote: true,
+          trailingComma: 'all',
+        },
+      ],
+      'arrow-body-style': 'off',
+      'prefer-arrow-callback': 'off',
+      'no-unused-vars': [
+        'error',
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+      'vue/multi-word-component-names': 'off',
+    },
   },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.18.0",
+  "version": "2.19.1-demo.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -21,6 +21,8 @@
     "build-bundle": "vite build",
     "preview": "vite preview",
     "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "test": "cypress run --component",
     "cypress:open": "cypress open",
     "release:beta": "npm version prerelease --preid=beta; npm publish --tag beta",
@@ -48,7 +50,7 @@
   },
   "dependencies": {
     "@abi-software/gallery": "1.6.0",
-    "@abi-software/map-utilities": "1.11.0",
+    "@abi-software/map-utilities": "1.12.0",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",
     "algoliasearch": "^4.27.0",
@@ -62,7 +64,6 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^6.0.8",
-    "unplugin-vue-components": "^32.1.0",
     "@vue/compiler-sfc": "^3.5.41",
     "@vuese/markdown-render": "^2.11.3",
     "auto-changelog": "^2.6.0",
@@ -73,13 +74,19 @@
     "cypress-multi-reporters": "^2.0.5",
     "cypress-wait-until": "^3.0.2",
     "eslint": "^10.9.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-cypress": "^7.0.0",
     "eslint-plugin-vue": "^10.10.0",
     "globals": "^17.11.0",
     "mochawesome": "^8.0.1",
+    "prettier": "3.9.6",
     "raw-loader": "^4.0.2",
     "sass": "^1.103.1",
     "transform-loader": "^0.2.4",
     "typescript": "^7.0.2",
+    "unplugin-auto-import": "^21.1.0",
+    "unplugin-vue-components": "^32.1.0",
     "vite": "^8.2.1",
     "vitepress": "^1.6.4",
     "vue-custom-element": "^3.3.0",

package/reporter-config.json

@@ -7,4 +7,4 @@
     "html": true,
     "json": true
   }
-}
+}

package/src/App.vue

@@ -15,6 +15,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"
@@ -26,6 +27,7 @@
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
+      :showCellCards="showCellCards"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
@@ -36,27 +38,24 @@
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
 // optionally import default styles
-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 SideBar from './components/SideBar.vue';
+import EventBus from './components/EventBus.js';
+import exampleConnectivityInput from './exampleConnectivityInput.js';
+import { capitalise } from './utils/common.js';
 
 const flatmapQuery = (flatmapApi, sql) => {
   const data = { sql: sql };
   return fetch(`${flatmapApi}knowledge/query/`, {
-    method: "POST",
+    method: 'POST',
     headers: {
-      "Content-Type": "application/json",
+      'Content-Type': 'application/json',
     },
     body: JSON.stringify(data),
   })
     .then((response) => response.json())
     .catch((error) => {
-      console.error("Error:", error);
+      console.error('Error:', error);
     });
 };
 
@@ -113,31 +112,36 @@ export default {
     return {
       $annotator: undefined,
       userApiKey: undefined,
-    }
+    };
   },
   data: function () {
     return {
-      annotationEntry: [{
-        featureId: "epicardium",
-        resourceId: "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json",
-        "resource": "https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json"
-      }],
+      annotationEntry: [
+        {
+          featureId: 'epicardium',
+          resourceId:
+            'https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json',
+          resource:
+            'https://mapcore-bucket1.s3-us-west-2.amazonaws.com/others/29_Jan_2020/heartICN_metadata.json',
+        },
+      ],
       sideBarVisibility: true,
       envVars: {
-        API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
-        ALGOLIA_KEY: import.meta.env.VITE_APP_ALGOLIA_KEY,
-        ALGOLIA_ID: import.meta.env.VITE_APP_ALGOLIA_ID,
-        ALGOLIA_INDEX: import.meta.env.VITE_APP_ALGOLIA_INDEX,
-        PENNSIEVE_API_LOCATION: import.meta.env.VITE_APP_PENNSIEVE_API_LOCATION,
-        BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
-        ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
+        API_LOCATION: import.meta.env.VITE_API_LOCATION,
+        ALGOLIA_KEY: import.meta.env.VITE_ALGOLIA_KEY,
+        ALGOLIA_ID: import.meta.env.VITE_ALGOLIA_ID,
+        ALGOLIA_INDEX: import.meta.env.VITE_ALGOLIA_INDEX,
+        PENNSIEVE_API_LOCATION: import.meta.env.VITE_PENNSIEVE_API_LOCATION,
+        BL_SERVER_URL: import.meta.env.VITE_BL_SERVER_URL,
+        ROOT_URL: import.meta.env.VITE_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
+        CELL_CARDS_API: import.meta.env.VITE_APP_CELL_CARDS_API,
       },
       connectivityEntry: [],
       createData: {
         toBeConfirmed: false,
         points: [],
-        shape: "",
+        shape: '',
         x: 0,
         y: 0,
       },
@@ -148,7 +152,8 @@ export default {
       query: '',
       filter: [],
       target: [],
-    }
+      showCellCards: false,
+    };
   },
   methods: {
     loadConnectivityKnowledge: async function () {
@@ -156,8 +161,8 @@ export default {
         where source="${this.sckanVersion}"
         order by source desc`;
       const response = await flatmapQuery(this.envVars.FLATMAPAPI_LOCATION, sql);
-      const mappedData = response.values.map(x => x[0]);
-      const knowledge = mappedData.map(x => JSON.parse(x));
+      const mappedData = response.values.map((x) => x[0]);
+      const knowledge = mappedData.map((x) => JSON.parse(x));
       this.flatmapKnowledge = knowledge.filter((item) => {
         if (item.connectivity?.length) return true;
         return false;
@@ -166,66 +171,65 @@ export default {
     },
     connectivityQueryFilter: async function (payload) {
       let results = this.flatmapKnowledge;
-      if (payload.type === "query-update") {
+      if (payload.type === 'query-update') {
         if (this.query !== payload.value) this.target = [];
         this.query = payload.value;
-      } else if (payload.type === "filter-update") {
+      } else if (payload.type === 'filter-update') {
         this.filter = payload.value;
         this.target = [];
-      } else if (payload.type === "query-filter-update") {
+      } else if (payload.type === 'query-filter-update') {
         this.query = payload.query;
         this.filter = payload.filter;
         this.target = payload.data;
       }
       if (this.query) {
-        let flag = "", order = [], paths = [];
+        let flag = '',
+          order = [],
+          paths = [];
         const labels = ['neuron type aacar 11'];
         flag = 'label';
         order = labels;
         if (labels.length === 1) {
-          paths =['ilxtr:neuron-type-aacar-11', 'ilxtr:neuron-type-bolew-unbranched-11'];
+          paths = ['ilxtr:neuron-type-aacar-11', 'ilxtr:neuron-type-bolew-unbranched-11'];
           flag = 'id';
-          order = [this.query, ...paths.filter(item => item !== this.query)];
+          order = [this.query, ...paths.filter((item) => item !== this.query)];
         }
-        results = results.filter(item => paths.includes(item.id) || labels.includes(item.label));
+        results = results.filter((item) => paths.includes(item.id) || labels.includes(item.label));
         results.sort((a, b) => order.indexOf(a[flag]) - order.indexOf(b[flag]));
       }
       this.connectivityKnowledge = results;
     },
     hoverChanged: function (data) {
-      console.log('hoverChanged', data)
+      console.log('hoverChanged', data);
     },
     searchChanged: function (data) {
       if (!this.flatmapKnowledge.length) {
         this.loadConnectivityKnowledge();
       }
       if (data.id === 2) {
-        this.connectivityQueryFilter(data)
+        this.connectivityQueryFilter(data);
       }
     },
     // For connectivity input actions
     action: function (action) {
-      console.log('action fired: ', action)
+      console.log('action fired: ', action);
       let facets = [];
       if (action.labels) {
         facets.push(
-          ...action.labels.map(val => ({
+          ...action.labels.map((val) => ({
             facet: capitalise(val),
-            term: "Anatomical structure",
-            facetPropPath: "anatomy.organ.category.name",
-          }))
+            term: 'Anatomical structure',
+            facetPropPath: 'anatomy.organ.category.name',
+          })),
         );
       }
       if (this.$refs.sideBar && facets?.length) {
-        console.log('openSearch', facets)
-        this.$refs.sideBar.openSearch(facets, "");
+        console.log('openSearch', facets);
+        this.$refs.sideBar.openSearch(facets, '');
       }
     },
     openSearch: function () {
-      this.$refs.sideBar.openSearch(
-        [],
-        'http://purl.obolibrary.org/obo/UBERON_0001103'
-      )
+      this.$refs.sideBar.openSearch([], 'http://purl.obolibrary.org/obo/UBERON_0001103');
     },
     singleFacets: function () {
       this.$refs.sideBar.addFilter({
@@ -234,7 +238,7 @@ export default {
         term: 'Anatomical structure',
         facetPropPath: 'anatomy.organ.category.name',
         AND: true,
-      })
+      });
     },
     addStomach: function () {
       this.$refs.sideBar.addFilter({
@@ -242,7 +246,7 @@ export default {
         term: 'Anatomical structure',
         facetPropPath: 'anatomy.organ.category.name',
         AND: true,
-      })
+      });
     },
     addDRG: function () {
       this.$refs.sideBar.addFilter({
@@ -250,7 +254,7 @@ export default {
         term: 'Anatomical structure',
         facetPropPath: 'anatomy.organ.category.name',
         AND: true,
-      })
+      });
     },
     addSubsubPath: function () {
       this.$refs.sideBar.addFilter({
@@ -258,7 +262,7 @@ export default {
         term: 'Anatomical structure',
         facetPropPath: 'anatomy.organ.category.name',
         AND: true,
-      })
+      });
     },
     addInferiorVagus: function () {
       this.$refs.sideBar.addFilter({
@@ -266,7 +270,7 @@ export default {
         term: 'Anatomical structure',
         facetPropPath: 'anatomy.organ.category.name',
         AND: true,
-      })
+      });
     },
     addInvalidTerm: function () {
       this.$refs.sideBar.addFilter({
@@ -274,7 +278,7 @@ export default {
         term: 'Anatomical structure',
         facetPropPath: 'anatomy.organ.name',
         AND: true,
-      })
+      });
     },
     multiFacets: function () {
       this.$refs.sideBar.openSearch(
@@ -287,9 +291,9 @@ export default {
           {
             facet: 'Heart',
             term: 'Anatomical structure',
-            facetSubPropPath: "anatomy.organ.name",
+            facetSubPropPath: 'anatomy.organ.name',
             facetPropPath: 'anatomy.organ.category.name',
-            label :'Heart',
+            label: 'Heart',
             AND: true,
           },
           {
@@ -298,8 +302,8 @@ export default {
             facetPropPath: 'anatomy.organ.name',
           },
         ],
-        ''
-      )
+        '',
+      );
     },
     keywordSearch: function () {
       this.$refs.sideBar.addFilter({
@@ -309,7 +313,7 @@ export default {
         facetPropPath: 'item.keywords.keyword',
         term: 'Keywords',
         AND: true,
-      })
+      });
     },
     markerFromFlatmap: function () {
       this.$refs.sideBar.openSearch([
@@ -318,62 +322,67 @@ export default {
           term: 'Keywords',
           facetPropPath: 'item.keywords.keyword',
         },
-      ])
+      ]);
     },
     neuronSearch: function () {
-      this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10')
+      this.$refs.sideBar.openNeuronSearch('ilxtr:neuron-type-keast-10');
     },
     getFacets: async function () {
-      let facets = await this.$refs.sideBar.getAlgoliaFacets()
-      console.log('Algolia facets:', facets)
+      let facets = await this.$refs.sideBar.getAlgoliaFacets();
+      console.log('Algolia facets:', facets);
     },
-    toggleCreateData : function() {
+    toggleCreateData: function () {
       if (!this.createDataSet) {
         this.createData = {
           drawingBox: false,
           toBeConfirmed: true,
           points: [[1.0, 1.0, 1.0]],
-          shape: "Lines",
+          shape: 'Lines',
           x: 0,
           y: 0,
           editingIndex: -1,
           faceIndex: -1,
           toBeDeleted: false,
-        }
-        this.createDataSet = true
+        };
+        this.createDataSet = true;
       } else {
         this.createData = {
           toBeConfirmed: false,
           points: [],
-          shape: "",
+          shape: '',
           x: 0,
           y: 0,
-        }
-        this.createDataSet = false
+        };
+        this.createDataSet = false;
       }
     },
-    onConnectivityHovered: function(data) {
-      console.log("onConnectivityHovered" , data)
+    onConnectivityHovered: function (data) {
+      console.log('onConnectivityHovered', data);
     },
     openConnectivitySearch: function (entry) {
-      const query = entry ? entry.query : 'ilxtr:neuron-type-aacar-5'
-      const filter = entry ? entry.filter : []
-      this.$refs.sideBar.openConnectivitySearch(filter, query)
+      const query = entry ? entry.query : 'ilxtr:neuron-type-aacar-5';
+      const filter = entry ? entry.filter : [];
+      this.$refs.sideBar.openConnectivitySearch(filter, query);
     },
     onConnectivityCollapseChange: function () {
-      this.connectivityEntry = [...exampleConnectivityInput]
-    }
+      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')
+    console.log('mounted app');
     EventBus.on('contextUpdate', (payLoad) => {
-      console.log('contextUpdate', payLoad)
+      console.log('contextUpdate', payLoad);
     });
     EventBus.on('datalink-clicked', (payLoad) => {
-      console.log('datalink-clicked', payLoad)
+      console.log('datalink-clicked', payLoad);
     });
   },
-}
+};
 </script>
 
 <style lang="scss">