@abi-software/flatmapvuer 1.17.0 → 1.17.1-demo.1

package/src/services/somaLocationMarkers.js

@@ -0,0 +1,125 @@
+const SOMA_MARKER_COLOUR = '#1b7f6b'
+const SOMA_MARKER_SECONDARY_COLOUR = '#f4f1de'
+const SOMA_MARKER_TEXT_COLOUR = '#12312b'
+const SOMA_MARKER_MAX_COUNT_LABEL = '99+'
+
+const normalizeSomaLocations = function (somaLocations) {
+  return (Array.isArray(somaLocations) ? somaLocations : [])
+    .map((item) => ({
+      label: String(item?.label || '').trim(),
+      curie: String(item?.curie || '').trim(),
+      count: Number(item?.count || 0),
+    }))
+    .filter((item) => item.curie && item.count > 0)
+}
+
+const formatCount = function (count) {
+  if (count > 99) return SOMA_MARKER_MAX_COUNT_LABEL
+  return String(count)
+}
+
+const createSomaLocationMarkerElement = function (somaLocation) {
+  const wrapper = document.createElement('div')
+  wrapper.className = 'flatmapvuer-soma-location-marker'
+  wrapper.title = somaLocation.label || somaLocation.curie
+  wrapper.style.width = '34px'
+  wrapper.style.height = '48px'
+  wrapper.style.display = 'flex'
+  wrapper.style.alignItems = 'center'
+  wrapper.style.justifyContent = 'center'
+  wrapper.style.transform = 'translate(-50%, -100%)'
+
+  const countLabel = formatCount(somaLocation.count)
+  wrapper.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 27 42" width="34" height="48" aria-hidden="true">
+    <ellipse style="fill: rgb(0, 0, 0); fill-opacity: 0.18;" cx="12" cy="36" rx="8" ry="4"/>
+    <path d="M12.25.25a12.254 12.254 0 0 0-12 12.494
+             c0 6.444 6.488 12.109 11.059 22.564.549 1.256 1.333 1.256 1.882 0
+             C17.762 24.853 24.25 19.186 24.25 12.744A12.254 12.254 0 0 0 12.25.25Z"
+          style="fill:${SOMA_MARKER_COLOUR};stroke:${SOMA_MARKER_SECONDARY_COLOUR};stroke-width:1.1"/>
+    <circle cx="12.5" cy="12.5" r="8" fill="${SOMA_MARKER_SECONDARY_COLOUR}"/>
+    <text x="12.5" y="16.1" text-anchor="middle" style="font-size:7.5px;font-weight:700;fill:${SOMA_MARKER_TEXT_COLOUR};font-family:Arial, sans-serif">${countLabel}</text>
+  </svg>`
+
+  return wrapper
+}
+
+const resolveMarkerPlacement = function (mapImp, curie) {
+  const featureIds = Array.isArray(mapImp?.modelFeatureIds?.(curie)) ? mapImp.modelFeatureIds(curie) : []
+  const placements = []
+  const seenFeatureUris = new Set()
+
+  for (const featureId of featureIds) {
+    const annotation = mapImp.annotation(featureId)
+    const featureUri = String(annotation?.uri || '').trim()
+    if (featureUri && !seenFeatureUris.has(featureUri)) {
+      seenFeatureUris.add(featureUri)
+      placements.push({
+        type: 'feature-uri',
+        value: featureUri,
+      })
+    }
+  }
+
+  // Fall back to model placement only when no feature URI can be resolved.
+  if (!placements.length && featureIds.length) {
+    placements.push({
+      type: 'model',
+      value: curie,
+    })
+  }
+
+  return placements
+}
+
+export const attachSomaLocationMarkerMethods = function (mapImp) {
+  if (!mapImp || mapImp.addSomaLocationMarkers) {
+    return mapImp
+  }
+
+  let markerIds = []
+
+  mapImp.clearSomaLocationMarkers = function () {
+    markerIds.forEach((markerId) => {
+      mapImp.removeMarker(markerId)
+    })
+    markerIds = []
+  }
+
+  mapImp.addSomaLocationMarkers = function (somaLocations) {
+    const normalizedSomaLocations = normalizeSomaLocations(somaLocations)
+    const placedSomaLocations = []
+
+    mapImp.clearSomaLocationMarkers()
+
+    normalizedSomaLocations.forEach((somaLocation) => {
+      const placements = resolveMarkerPlacement(mapImp, somaLocation.curie)
+      if (!placements.length) return
+
+      let somaLocationPlaced = false
+      placements.forEach((placement) => {
+        const markerElement = createSomaLocationMarkerElement(somaLocation)
+        let addedMarkerIds = []
+
+        if (placement.type === 'feature-uri') {
+          addedMarkerIds = mapImp.addMarkerByFeatureUri(placement.value, { element: markerElement })
+        } else if (placement.type === 'model') {
+          const markerId = mapImp.addMarker(placement.value, { element: markerElement })
+          addedMarkerIds = markerId > -1 ? [markerId] : []
+        }
+
+        if (!addedMarkerIds.length) return
+
+        markerIds.push(...addedMarkerIds)
+        somaLocationPlaced = true
+      })
+
+      if (somaLocationPlaced) {
+        placedSomaLocations.push(somaLocation)
+      }
+    })
+
+    return placedSomaLocations
+  }
+
+  return mapImp
+}

package/src/store/index.js

@@ -1,24 +1,24 @@
-import { defineStore } from 'pinia'
+import { defineStore } from 'pinia';
 
 /**
  * Activate the store when run the application individually.
- * If the store exist in parent application, 
+ * If the store exist in parent application,
  * instead of creating a new store it will access the parent main store.
  */
 export const useMainStore = defineStore('main', {
   state: () => ({
     userProfile: {
-      token: ''
+      token: '',
     },
   }),
   getters: {
     userToken(state) {
-      return state.userProfile.token
+      return state.userProfile.token;
     },
   },
   actions: {
     setUserToken(value) {
-      this.userProfile.token = value
+      this.userProfile.token = value;
     },
-  }
-})
+  },
+});

package/vite.config.js

@@ -1,11 +1,12 @@
-import path from "path";
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import path from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ command }) => {
   const config = {
     css: {
       preprocessorOptions: {
@@ -20,8 +21,11 @@ export default defineConfig(({ command, mode }) => {
         template: {
           compilerOptions: {
             isCustomElement: (tag) => ['bx:grid'].includes(tag),
-          }
-        }
+          },
+        },
+      }),
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
       }),
       Components({
         // allow auto load markdown components under `./src/components/`
@@ -35,52 +39,47 @@ export default defineConfig(({ command, mode }) => {
         ],
         dts: 'src/components.d.ts',
       }),
-
-      // https://github.com/antfu/unocss
-      // see unocss.config.ts for config
     ],
     resolve: {
       alias: {
         '@': path.resolve(import.meta.dirname, './src'),
-      }
+      },
     },
     build: {
       lib: {
-        entry: path.resolve(import.meta.dirname, "./src/components/index.js"),
-        name: "FlatmapVuer",
+        entry: path.resolve(import.meta.dirname, './src/components/index.js'),
+        name: 'FlatmapVuer',
         fileName: 'flatmapvuer',
       },
       rollupOptions: {
         external: [
-          "vue",
-          "@abi-software/sparc-annotation",
-          "@abi-software/svg-sprite",
-          "@abi-software/map-utilities",
-          "@element-plus/icons-vue",
-          "pinia",
-          "@abi-software/svg-sprite/dist/style.css",
-          "@abi-software/map-utilities/dist/style.css"
+          'vue',
+          '@abi-software/sparc-annotation',
+          '@abi-software/svg-sprite',
+          '@abi-software/map-utilities',
+          '@element-plus/icons-vue',
+          'pinia',
+          '@abi-software/svg-sprite/dist/style.css',
+          '@abi-software/map-utilities/dist/style.css',
         ],
         output: {
           globals: {
-            vue: "Vue",
-            "@abi-software/sparc-annotation": "@abi-software/sparc-annotation",
-            "@abi-software/svg-sprite": "@abi-software/svg-sprite",
-            "@abi-software/map-utilities": "@abi-software/map-utilities",
-            "@element-plus/icons-vue": "@element-plus/icons-vue",
-            "pinia": "pinia"
+            vue: 'Vue',
+            '@abi-software/sparc-annotation': '@abi-software/sparc-annotation',
+            '@abi-software/svg-sprite': '@abi-software/svg-sprite',
+            '@abi-software/map-utilities': '@abi-software/map-utilities',
+            '@element-plus/icons-vue': '@element-plus/icons-vue',
+            pinia: 'pinia',
           },
           // keep css output name stable for the "./dist/style.css" export/import paths
           assetFileNames: (assetInfo) =>
-            assetInfo.name?.endsWith(".css")
-              ? "style.css"
-              : "assets/[name][extname]",
+            assetInfo.name?.endsWith('.css') ? 'style.css' : 'assets/[name][extname]',
         },
       },
     },
     optimizeDeps: {
-      entries: ['./cypress/*']
-    }
+      entries: ['./cypress/*'],
+    },
   };
 
   if (command === 'serve') {
@@ -89,4 +88,4 @@ export default defineConfig(({ command, mode }) => {
     };
   }
   return config;
-})
+});

package/vite.static-build.js

@@ -1,12 +1,12 @@
-import { defineConfig } from 'vite'
-import rootConfig from './vite.config.js'
+import { defineConfig } from 'vite';
+import rootConfig from './vite.config.js';
 
 // defineWorkspace provides a nice type hinting DX
 export default defineConfig((configEnv) => {
   const config = rootConfig(configEnv);
   config.build = {
-    outDir: "test-html"
+    outDir: 'test-html',
   };
 
   return config;
-})
+});

package/vuese-generator.js

@@ -5,120 +5,111 @@
  * To watch components changes for Vitepress on Dev Mode
  */
 
-import fs from 'fs'
-import path from 'path'
-import chokidar from 'chokidar'
+import fs from 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
 // import { parser } from '@vuese/parser'
-import { parseSource } from 'vue-docgen-api'
-import { Render } from '@vuese/markdown-render'
+import { parseSource } from 'vue-docgen-api';
+import { Render } from '@vuese/markdown-render';
 
-const watchMode = process.argv.find((argv) => argv === 'watch')
+const watchMode = process.argv.find((argv) => argv === 'watch');
 
-const componentsDir = 'src/components'
-const components = ['FlatmapVuer.vue', 'MultiFlatmapVuer.vue']
-const outputDir = 'docs/components'
+const componentsDir = 'src/components';
+const components = ['FlatmapVuer.vue', 'MultiFlatmapVuer.vue'];
+const outputDir = 'docs/components';
 
 function generateMarkdown(file) {
-  const fileWithPath = `${componentsDir}/${file}`
-  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+  const fileWithPath = `${componentsDir}/${file}`;
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8');
 
   try {
     // const parserResult = parser(fileContent)
-    const parserResult = parseSource(fileContent, fileWithPath)
+    const parserResult = parseSource(fileContent, fileWithPath);
     parserResult.then((result) => {
-      const {
-        displayName: name,
-        description: desc,
-        props,
-        events,
-        methods
-      } = result
+      const { displayName: name, description: desc, props, events, methods } = result;
 
       // transform props to vuese styles
       const parseResult = {
         name: name,
         componentDesc: {
-          default: [desc]
+          default: [desc],
         },
         props: transformData(props),
         events: transformData(events),
         methods: transformData(methods),
-      }
-      const r = new Render(parseResult)
-      const renderResult = r.render()
-      const markdownResult = r.renderMarkdown()
-      const markdownContent = markdownResult.content
-      const componentName = path.basename(fileWithPath, '.vue')
+      };
+      const r = new Render(parseResult);
+      const markdownResult = r.renderMarkdown();
+      const markdownContent = markdownResult.content;
+      const componentName = path.basename(fileWithPath, '.vue');
 
       if (!fs.existsSync(outputDir)) {
-        fs.mkdirSync(outputDir)
+        fs.mkdirSync(outputDir);
       }
 
       fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
         if (err) {
-          console.error(`Error writing markdown file for ${componentName}`, err)
+          console.error(`Error writing markdown file for ${componentName}`, err);
         } else {
-          console.log(`Markdown file for ${componentName} is generated!`)
+          console.log(`Markdown file for ${componentName} is generated!`);
         }
-      })
-    })
-  } catch(e) {
-    console.error(e)
+      });
+    });
+  } catch (e) {
+    console.error(e);
   }
 }
 
 function transformData(data = []) {
   data.forEach((prop) => {
-    prop.name = prop.name
-
     if (prop.description) {
-      prop.describe = [prop.description.replaceAll('\n', ' ')]
+      prop.describe = [prop.description.replaceAll('\n', ' ')];
     }
 
     if (prop.type) {
-      prop.type = prop.type.name
+      prop.type = prop.type.name;
     }
 
     if (prop.defaultValue) {
-      prop.default = prop.defaultValue.value.replaceAll('\n', ' ')
+      prop.default = prop.defaultValue.value.replaceAll('\n', ' ');
     }
 
     // events
     if (prop.properties) {
-      prop.argumentsDesc = []
+      prop.argumentsDesc = [];
       prop.properties.forEach((param) => {
-        const argName = param.name || param.description
-        prop.argumentsDesc.push(argName)
-      })
+        const argName = param.name || param.description;
+        prop.argumentsDesc.push(argName);
+      });
     }
 
     // methods
     if (prop.params) {
-      prop.argumentsDesc = []
+      prop.argumentsDesc = [];
       prop.params.forEach((param) => {
-        const argName = param.description || param.name
-        prop.argumentsDesc.push(argName)
-      })
+        const argName = param.description || param.name;
+        prop.argumentsDesc.push(argName);
+      });
     }
-  })
-  return data
+  });
+  return data;
 }
 
 // To generate markdown files - one time
 components.forEach((component) => {
-  console.log(`Write markdown file for ${component} on first load.`)
-  generateMarkdown(component)
-})
+  console.log(`Write markdown file for ${component} on first load.`);
+  generateMarkdown(component);
+});
 
 // To watch component changes and generate markdown files
 if (watchMode) {
   const watcher = chokidar.watch(components, {
     cwd: componentsDir,
     ignoreInitial: true,
-  })
+  });
 
   watcher.on('change', (file) => {
-    console.log(`The component ${file} has changed!`)
-    generateMarkdown(file)
-  })
-}
+    console.log(`The component ${file} has changed!`);
+    generateMarkdown(file);
+  });
+}