@abi-software/map-utilities 1.4.3-beta.2 → 1.4.3-beta.3

package/src/components/utilities.js

@@ -1,21 +1,9 @@
-import { Cite, plugins } from '@citation-js/core';
-import '@citation-js/plugin-doi';
-import '@citation-js/plugin-csl';
-import '@citation-js/plugin-bibtex';
-import '@citation-js/plugin-pubmed';
-
 const capitalise = term => {
   if (term)
     return term.charAt(0).toUpperCase() + term.slice(1);
   return term;
 };
 
-const titleCase = (str) => {
-  return str.replace(/\w\S*/g, (t) => {
-    return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase();
-  });
-};
-
 const convertNodeToObject = (node) => {
   const obj = {};
 
@@ -60,43 +48,8 @@ const delay = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms));
 };
 
-/**
- * @param {id} id - DOI or PMID
- * @param {options:type} type - type of the ID, e.g., 'pmid'
- * @param {options:format} format - 'apa' (default), 'chicago', 'ieee', 'bibtex', etc.
- * @returns {citation} formatted citation text
- */
-const getCitationById = async (id, { type, format }) => {
-  // because 'chicago' and 'ieee' are not in citation.js default styles
-  if ((format !== 'bibtex') && (format !== 'apa')) {
-    const xml = `https://raw.githubusercontent.com/citation-style-language/styles/refs/heads/master/${format}.csl`;
-    const response = await fetch(xml);
-    const template = await response.text();
-    let config = plugins.config.get('@csl');
-    config.templates.add(format, template);
-  }
-
-  const option = {};
-
-  if (type === 'pmid') {
-    option['forceType'] = '@pubmed/id';
-  }
-
-  const cite = await Cite.async(id, option);
-  const citation = (format === 'bibtex') ?
-    cite.format(format) :
-    cite.format('bibliography', {
-      format: 'html',
-      template: format || 'apa', // default as 'apa' style
-      lang: 'en-US'
-    })
-  return citation;
-};
-
 export {
   capitalise,
-  titleCase,
   xmlToJSON,
   delay,
-  getCitationById,
 };

package/src/components.d.ts

@@ -10,12 +10,13 @@ declare module 'vue' {
     AnnotationPopup: typeof import('./components/Tooltip/AnnotationPopup.vue')['default']
     ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
     ConnectivityGraph: typeof import('./components/ConnectivityGraph/ConnectivityGraph.vue')['default']
-    ConnectivityList: typeof import('./components/ConnectivityList/ConnectivityList.vue')['default']
     CopyToClipboard: typeof import('./components/CopyToClipboard/CopyToClipboard.vue')['default']
     CreateTooltipContent: typeof import('./components/Tooltip/CreateTooltipContent.vue')['default']
     DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
@@ -23,6 +24,7 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
     ElIconClose: typeof import('@element-plus/icons-vue')['Close']
+    ElIconCopyDocument: typeof import('@element-plus/icons-vue')['CopyDocument']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
     ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
@@ -38,6 +40,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
     HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
     ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']

package/src/components/ConnectivityList/ConnectivityList.vue

@@ -1,394 +0,0 @@
-<template>
-  <div class="connectivity-list">
-    {{ entry.paths }}
-    <div v-if="origins && origins.length > 0" class="block">
-      <div class="attribute-title-container">
-        <span class="attribute-title">Origin</span>
-        <el-popover
-          width="250"
-          trigger="hover"
-          :teleported="false"
-          popper-class="popover-origin-help"
-        >
-          <template #reference>
-            <el-icon class="info"><el-icon-warning /></el-icon>
-          </template>
-          <span style="word-break: keep-all">
-            <i>Origin</i> {{ originDescription }}
-          </span>
-        </el-popover>
-      </div>
-      <div
-        v-for="(origin, i) in origins"
-        class="attribute-content"
-        :origin-item-label="origin"
-        :key="origin"
-        @mouseenter="toggleConnectivityTooltip(origin, {show: true})"
-        @mouseleave="toggleConnectivityTooltip(origin, {show: false})"
-      >
-        {{ capitalise(origin) }}
-      </div>
-      <el-button
-        v-show="
-          originsWithDatasets && originsWithDatasets.length > 0 &&
-          shouldShowExploreButton(originsWithDatasets)
-        "
-        class="button"
-        id="open-dendrites-button"
-        @click="openDendrites"
-      >
-        Explore origin data
-      </el-button>
-    </div>
-    <div
-      v-if="components && components.length > 0"
-      class="block"
-    >
-      <div class="attribute-title-container">
-        <span class="attribute-title">Components</span>
-      </div>
-      <div
-        v-for="(component, i) in components"
-        class="attribute-content"
-        :component-item-label="component"
-        :key="component"
-        @mouseenter="toggleConnectivityTooltip(component, {show: true})"
-        @mouseleave="toggleConnectivityTooltip(component, {show: false})"
-      >
-        {{ capitalise(component) }}
-      </div>
-    </div>
-    <div
-      v-if="destinations && destinations.length > 0"
-      class="block"
-    >
-      <div class="attribute-title-container">
-        <span class="attribute-title">Destination</span>
-        <el-popover
-          width="250"
-          trigger="hover"
-          :teleported="false"
-          popper-class="popover-origin-help"
-        >
-          <template #reference>
-            <el-icon class="info"><el-icon-warning /></el-icon>
-          </template>
-          <span style="word-break: keep-all">
-            <i>Destination</i> is where the axons terminate
-          </span>
-        </el-popover>
-      </div>
-      <div
-        v-for="(destination, i) in destinations"
-        class="attribute-content"
-        :destination-item-label="destination"
-        :key="destination"
-        @mouseenter="toggleConnectivityTooltip(destination, {show: true})"
-        @mouseleave="toggleConnectivityTooltip(destination, {show: false})"
-      >
-        {{ capitalise(destination) }}
-      </div>
-      <el-button
-        v-show="
-          destinationsWithDatasets &&
-          destinationsWithDatasets.length > 0 &&
-          shouldShowExploreButton(destinationsWithDatasets)
-        "
-        class="button"
-        @click="openAxons"
-      >
-        Explore destination data
-      </el-button>
-    </div>
-    <div
-      v-show="
-        componentsWithDatasets &&
-        componentsWithDatasets.length > 0 &&
-        shouldShowExploreButton(componentsWithDatasets)
-      "
-      class="block"
-    >
-      <el-button
-        class="button"
-        @click="openAll"
-      >
-        Search for data on components
-      </el-button>
-    </div>
-
-    <div class="connectivity-error-container">
-      <div class="connectivity-error" v-if="connectivityError">
-        <strong v-if="connectivityError.errorConnectivities">
-          {{ connectivityError.errorConnectivities }}
-        </strong>
-        {{ connectivityError.errorMessage }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  Warning as ElIconWarning,
-} from '@element-plus/icons-vue'
-import {
-  ElButton as Button,
-  ElContainer as Container,
-  ElIcon as Icon,
-} from 'element-plus'
-import { capitalise } from '../utilities'
-
-export default {
-  name: 'ConnectivityList',
-  components: {
-    Button,
-    Container,
-    Icon,
-    ElIconWarning,
-  },
-  props: {
-    entry: {
-      type: Object,
-      default: () => ({
-        destinations: [],
-        origins: [],
-        components: [],
-        destinationsWithDatasets: [],
-        originsWithDatasets: [],
-        componentsWithDatasets: [],
-        resource: undefined,
-        featuresAlert: undefined,
-      }),
-    },
-    origins: {
-      type: Array,
-      default: () => []
-    },
-    components: {
-      type: Array,
-      default: () => []
-    },
-    destinations: {
-      type: Array,
-      default: () => []
-    },
-    originsWithDatasets: {
-      type: Array,
-      default: () => []
-    },
-    componentsWithDatasets: {
-      type: Array,
-      default: () => []
-    },
-    destinationsWithDatasets: {
-      type: Array,
-      default: () => []
-    },
-    availableAnatomyFacets: {
-      type: Array,
-      default: () => [],
-    },
-    connectivityError: {
-      type: Object,
-      default: () => null,
-    }
-  },
-  data: function () {
-    return {
-      originDescriptions: {
-        motor: 'is the location of the initial cell body of the circuit',
-        sensory: 'is the location of the initial cell body in the PNS circuit',
-      },
-      facetList: [],
-      sckanVersion: '',
-    }
-  },
-  watch: {
-    availableAnatomyFacets: {
-      handler: function (val) {
-        this.convertFacetsToList(val)
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  computed: {
-    originDescription: function () {
-      if (
-        this.entry &&
-        this.entry.title &&
-        this.entry.title.toLowerCase().includes('motor')
-      ) {
-        return this.originDescriptions.motor
-      } else {
-        return this.originDescriptions.sensory
-      }
-    },
-  },
-  methods: {
-    capitalise: function (text) {
-      return capitalise(text)
-    },
-    toggleConnectivityTooltip: function (name, option) {
-      this.$emit('toggle-connectivity-tooltip', {
-        name,
-        option
-      });
-    },
-    // shouldShowExploreButton: Checks if the feature is in the list of available anatomy facets
-    shouldShowExploreButton: function (features) {
-      for (let i = 0; i < features.length; i++) {
-        if (this.facetList.includes(features[i].name.toLowerCase())) {
-          return true
-        }
-      }
-      return false
-    },
-    // convertFacetsToList: Converts the available anatomy facets to a list for easy searching
-    convertFacetsToList: function (facets) {
-      facets.forEach((facet) => {
-        if(facet.children) {
-          this.convertFacetsToList(facet.children)
-        } else {
-          this.facetList.push(facet.label.toLowerCase())
-        }
-      })
-    },
-    openAll: function () {
-      this.$emit('connectivity-action-click', {
-        type: 'Facets',
-        labels: this.componentsWithDatasets.map((a) => a.name.toLowerCase()),
-      })
-    },
-    openAxons: function () {
-      this.$emit('connectivity-action-click', {
-        type: 'Facets',
-        labels: this.destinationsWithDatasets.map((a) => a.name.toLowerCase()),
-      })
-    },
-    openDendrites: function () {
-      this.$emit('connectivity-action-click', {
-        type: 'Facets',
-        labels: this.originsWithDatasets.map((a) => a.name.toLowerCase()),
-      })
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.connectivity-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  position: relative;
-}
-
-.button {
-  margin-left: 0px !important;
-  margin-top: 0px !important;
-  font-size: 14px !important;
-  background-color: $app-primary-color;
-  color: #fff;
-
-  &:hover {
-    color: #fff !important;
-    background-color: #ac76c5 !important;
-    border: 1px solid #ac76c5 !important;
-  }
-
-  & + .button {
-    margin-top: 10px !important;
-  }
-}
-
-.icon {
-  right: 0px;
-  position: absolute;
-  top: 10px;
-}
-
-.icon:hover {
-  cursor: pointer;
-}
-
-:deep(.popover-origin-help.el-popover) {
-  text-transform: none !important; // need to overide the tooltip text transform
-  border: 1px solid $app-primary-color;
-  font-weight: 400;
-  font-family: Asap, sans-serif, Helvetica;
-
-  .el-popper__arrow {
-    &:before {
-      border-color: $app-primary-color;
-      background-color: #ffffff;
-    }
-  }
-}
-
-.info {
-  color: #8300bf;
-  transform: rotate(180deg);
-  margin-left: 8px;
-}
-
-.attribute-title-container {
-  margin-bottom: 0.5em;
-}
-
-.attribute-title {
-  font-size: 16px;
-  font-weight: 600;
-  /* font-weight: bold; */
-  text-transform: uppercase;
-}
-
-.attribute-content {
-  font-size: 14px;
-  font-weight: 500;
-  transition: color 0.25s ease;
-  position: relative;
-  cursor: default;
-
-  &:hover {
-    color: $app-primary-color;
-  }
-
-  + .attribute-content {
-    &::before {
-      content: "";
-      width: 90%;
-      height: 1px;
-      background-color: var(--el-border-color);
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  &:last-of-type {
-    margin-bottom: 0.5em;
-  }
-}
-
-.connectivity-error-container {
-  position: sticky;
-  bottom: 0.5rem;
-  width: 100%;
-  min-height: 31px; // placeholder
-  margin-top: -10px !important;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.connectivity-error {
-  width: fit-content;
-  font-size: 12px;
-  padding: 0.25rem 0.5rem;
-  background-color: var(--el-color-error-light-9);
-  border-radius: var(--el-border-radius-small);
-  border: 1px solid var(--el-color-error);
-}
-</style>