@abi-software/map-utilities 0.0.0-beta.0

package/src/App.vue

@@ -0,0 +1,506 @@
+<script setup>
+import { ref, provide, onMounted, watch } from "vue";
+
+import flatmapTreeData from "../static/FlatmapTreeData.json";
+import scaffoldTreeData from "../static/ScaffoldTreeData.json";
+
+/**
+ * DrawToolbar
+ */
+const flatmapToolbarOptions = [
+  "Edit",
+  "Delete",
+  "Point",
+  "LineString",
+  "Polygon",
+  "Connection",
+];
+const scaffoldToolbarOptions = ["Edit", "Point", "LineString"];
+const activeDrawTool = ref(undefined);
+const activeDrawMode = ref(undefined);
+const hoverVisibilities = [
+  { value: false, refs: "toolbarPopover", ref: "editPopover" },
+  { value: false, refs: "toolbarPopover", ref: "deletePopover" },
+  { value: false, refs: "toolbarPopover", ref: "pointPopover" },
+  { value: false, refs: "toolbarPopover", ref: "lineStringPopover" },
+  { value: false, refs: "toolbarPopover", ref: "polygonPopover" },
+  { value: false, refs: "toolbarPopover", ref: "connectionPopover" },
+];
+const isFlatmap = ref(true);
+const appRef = ref(null);
+const newlyDrawnEntry = ref({});
+const connectionEntry = ref({});
+const drawnType = ref("All tools");
+const drawnTypes = [
+  { value: "All tools", label: "All tools" },
+  { value: "Point", label: "Point" },
+  { value: "LineString", label: "LineString" },
+  { value: "Polygon", label: "Polygon" },
+  { value: "None", label: "None" },
+];
+
+onMounted(() => {
+  console.log("🚀 ~ onMounted ~ appRef:", appRef.value);
+});
+
+watch(drawnType, () => {
+  finaliseNewDrawn();
+});
+
+function toolbarEvent(type, name) {
+  console.log("🚀 ~ toolbarEvent ~ type, name:", type, name);
+  connectionEntry.value = {};
+  if (type === "mode") {
+    activeDrawMode.value = name;
+  } else if (type === "tool") {
+    activeDrawTool.value = name;
+  }
+}
+function startNewDrawn(type) {
+  activeDrawTool.value = type;
+  newlyDrawnEntry.value = {};
+  connectionEntry.value = {};
+}
+function finishNewDrawn() {
+  newlyDrawnEntry.value = {
+    id: 1,
+    value: "newly drawn entry",
+  };
+}
+function addConnection() {
+  connectionEntry.value = {
+    " 1026": {
+      id: 1026,
+      label: "body proper",
+      models: "UBERON:0013702",
+    },
+    " 4958": {
+      id: 4958,
+      label: "liver",
+      models: "UBERON:0002107",
+    },
+  };
+}
+function removeConnection() {
+  connectionEntry.value = {};
+}
+function featureTooltip(value) {
+  console.log("🚀 ~ featureTooltip ~ value:", value);
+}
+function finaliseNewDrawn() {
+  activeDrawTool.value = undefined;
+  newlyDrawnEntry.value = {};
+  connectionEntry.value = {};
+}
+/**
+ * HelpModeDialog
+ */
+const helpMode = ref(false);
+const helpModeActiveItem = ref(0);
+const helpModeLastItem = ref(false);
+const useHelpModeDialog = ref(false);
+
+function showHelpModeDialog() {
+  helpMode.value = true;
+  useHelpModeDialog.value = true;
+}
+function onHelpModeShowNext() {
+  helpModeActiveItem.value += 1;
+  console.log(
+    "🚀 ~ onHelpModeShowNext ~ helpModeActiveItem:",
+    helpModeActiveItem.value
+  );
+}
+function onFinishHelpMode() {
+  helpMode.value = false;
+  // reset help mode to default values
+  helpModeActiveItem.value = 0;
+  helpModeLastItem.value = false;
+}
+/**
+ * Tooltip
+ */
+const tooltipDisplay = ref(false);
+const tooltipEntry = ref({});
+const featuresAlert = ref(undefined);
+const annotationDisplay = ref(false);
+const annotationEntry = ref({});
+
+provide(/* key */ "getFeaturesAlert", /* value */ () => featuresAlert.value);
+provide(/* key */ "$annotator", /* value */ undefined);
+provide(/* key */ "userApiKey", /* value */ undefined);
+
+function addTooltipEntry() {
+  tooltipDisplay.value = true;
+  tooltipEntry.value = {
+    destinations: [null],
+    origins: [null],
+    components: ["pudendal nerve"],
+    destinationsWithDatasets: [
+      { id: "UBERON:0004917", name: "urethral sphincter" },
+    ],
+    originsWithDatasets: [
+      { id: "UBERON:0022278", name: "nucleus of pudendal nerve" },
+    ],
+    componentsWithDatasets: [{ id: "UBERON:0011390", name: "pudendal nerve" }],
+    title:
+      "Nucleus of the pudendal nerve to urethral sphincter via pudendal nerve",
+    featureId: ["ilxtr:sparc-nlp/mmset1/1"],
+    hyperlinks: [
+      {
+        url: "https://pubmed.ncbi.nlm.nih.gov/?term=%2F%2Fdoi.org%2F10.1155%252F2012%252F816274",
+        id: "pubmed",
+      },
+    ],
+    provenanceTaxonomy: ["NCBITaxon:9606"],
+    provenanceTaxonomyLabel: ["Homo sapiens"],
+  };
+}
+function removeTooltipEntry() {
+  tooltipDisplay.value = false;
+  tooltipEntry.value = {};
+}
+function addAnnotationEntry() {
+  tooltipDisplay.value = true;
+  annotationDisplay.value = true;
+  annotationEntry.value = {
+    id: "digestive_8-1",
+    featureId: 4958,
+    label: "liver",
+    models: "UBERON:0002107",
+    type: "feature",
+    mapUUID: "b650201e-f27a-54a1-84fc-6ec2e7cf4c15",
+    resourceId:
+      "https://mapcore-demo.org/devel/flatmap/v4/flatmap/b650201e-f27a-54a1-84fc-6ec2e7cf4c15",
+  };
+}
+function removeAnnotationEntry() {
+  tooltipDisplay.value = false;
+  annotationDisplay.value = false;
+  annotationEntry.value = {};
+}
+function commitAnnotationEvent(value) {
+  console.log("🚀 ~ commitAnnotationEvent ~ value:", value);
+}
+/**
+ * TreeControls
+ */
+const isReady = ref(true);
+const mapType = ref("flatmap");
+const flatmapTreeDataEntry = flatmapTreeData;
+const scaffoldTreeDataEntry = scaffoldTreeData[0].children;
+const treeDataEntry = ref(flatmapTreeDataEntry);
+
+function switchTreeEntry(value) {
+  isReady.value = false;
+  if (value === "flatmap") {
+    mapType.value = "flatmap";
+    treeDataEntry.value = flatmapTreeDataEntry;
+  } else if (value === "scaffold") {
+    mapType.value = "scaffold";
+    treeDataEntry.value = scaffoldTreeDataEntry;
+  }
+  isReady.value = true;
+}
+function setColourField(treeData, nodeData, activeColour) {
+  treeData
+    .filter((data) => {
+      // Filtering if single node is provided and it does not have children field
+      if (nodeData && !data.children) {
+        return data.id === nodeData.id;
+      } else {
+        return true;
+      }
+    })
+    .map((data) => {
+      if (data.children) {
+        // Using recursive to process nested data if children field exists
+        setColourField(data.children, nodeData, activeColour);
+      } else {
+        // Active colour used for current display
+        data["activeColour"] = activeColour;
+      }
+    });
+}
+function setColour(nodeData, value) {
+  if (nodeData && nodeData.isPrimitives) {
+    const activeColour = value ? value : nodeData.defaultColour;
+    setColourField(treeDataEntry.value, nodeData, activeColour)
+  }
+}
+function checkAll(value) {
+  console.log("🚀 ~ checkAll ~ value:", value);
+}
+function checkChanged(value) {
+  console.log("🚀 ~ checkChanged ~ value:", value);
+}
+function changeActive(value) {
+  console.log("🚀 ~ changeActive ~ value:", value);
+}
+function changeHover(value) {
+  console.log("🚀 ~ changeHover ~ value:", value);
+}
+</script>
+
+<template>
+  <div ref="appRef">
+    <div class="maplibregl-canvas"></div>
+    <el-row>
+      <el-col>
+        <h3>DrawToolbar</h3>
+      </el-col>
+      <el-col>
+        <el-switch
+          v-model="isFlatmap"
+          active-text="Flatmap"
+          inactive-text="Scaffold"
+        />
+      </el-col>
+    </el-row>
+    <el-row v-show="isFlatmap">
+      <el-col>
+        <el-select
+          v-model="drawnType"
+          placeholder="Select"
+          style="width: 120px"
+        >
+          <el-option
+            v-for="item in drawnTypes"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-col>
+      <el-col>
+        <el-button
+          v-show="
+            (!activeDrawTool || activeDrawTool === 'Point') &&
+            (drawnType === 'All tools' ||
+              drawnType === 'Point' ||
+              drawnType === 'None')
+          "
+          @click="startNewDrawn('Point')"
+          size="small"
+        >
+          Draw New Point
+        </el-button>
+        <el-button
+          v-show="
+            (!activeDrawTool || activeDrawTool === 'LineString') &&
+            (drawnType === 'All tools' ||
+              drawnType === 'LineString' ||
+              drawnType === 'None')
+          "
+          @click="startNewDrawn('LineString')"
+          size="small"
+        >
+          Draw New LineString
+        </el-button>
+        <el-button
+          v-show="
+            (!activeDrawTool || activeDrawTool === 'Polygon') &&
+            (drawnType === 'All tools' ||
+              drawnType === 'Polygon' ||
+              drawnType === 'None')
+          "
+          @click="startNewDrawn('Polygon')"
+          size="small"
+        >
+          Draw New Polygon
+        </el-button>
+        <el-button v-show="activeDrawTool" @click="finishNewDrawn" size="small">
+          Finish New Drawn
+        </el-button>
+        <el-button
+          v-show="Object.keys(newlyDrawnEntry).length > 0"
+          @click="finaliseNewDrawn"
+          size="small"
+        >
+          Finalise New Drawn
+        </el-button>
+      </el-col>
+      <el-col>
+        <el-button
+          v-show="
+            !Object.keys(connectionEntry).length > 0 &&
+            (!activeDrawTool || activeDrawTool === 'LineString') &&
+            (drawnType === 'All tools' ||
+              drawnType === 'LineString' ||
+              drawnType === 'None')
+          "
+          @click="addConnection"
+          size="small"
+        >
+          Add Connection
+        </el-button>
+        <el-button
+          v-show="Object.keys(connectionEntry).length > 0"
+          @click="removeConnection"
+          size="small"
+        >
+          Remove Connection
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
+        <h3>HelpModeDialog</h3>
+        <span v-show="helpMode && useHelpModeDialog"
+          >Current item: {{ helpModeActiveItem }}</span
+        >
+      </el-col>
+      <el-col>
+        <el-button @click="showHelpModeDialog" size="small">
+          Show HelpMode Dialog
+        </el-button>
+        <el-button
+          v-show="helpMode && useHelpModeDialog"
+          @click="onHelpModeShowNext"
+          size="small"
+        >
+          Show Next
+        </el-button>
+        <el-button
+          v-show="helpMode && useHelpModeDialog"
+          @click="onFinishHelpMode"
+          size="small"
+        >
+          Hide HelpMode Dialog
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
+        <h3>Tooltip</h3>
+      </el-col>
+      <el-col>
+        <el-button
+          v-show="!annotationDisplay"
+          @click="addTooltipEntry"
+          size="small"
+        >
+          Add Tooltip Entry
+        </el-button>
+        <el-button
+          v-show="Object.keys(tooltipEntry).length > 0"
+          @click="removeTooltipEntry"
+          size="small"
+        >
+          Remove Tooltip Entry
+        </el-button>
+        <el-button
+          v-show="!Object.keys(tooltipEntry).length > 0"
+          @click="addAnnotationEntry"
+          size="small"
+        >
+          Add Annotation Entry
+        </el-button>
+        <el-button
+          v-show="Object.keys(annotationEntry).length > 0"
+          @click="removeAnnotationEntry"
+          size="small"
+        >
+          Remove Annotation Entry
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
+        <h3>TreeControls - {{ mapType }}</h3>
+      </el-col>
+      <el-col>
+        <el-button @click="switchTreeEntry('flatmap')" size="small">
+          Add Flatmap Tree Entry
+        </el-button>
+        <el-button @click="switchTreeEntry('scaffold')" size="small">
+          Add Scaffold Tree Entry
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <DrawToolbar
+      v-show="isFlatmap"
+      :mapCanvas="{
+        containerHTML: appRef,
+        class: '.maplibregl-canvas',
+      }"
+      :toolbarOptions="flatmapToolbarOptions"
+      :drawnType="drawnType"
+      :activeDrawTool="activeDrawTool"
+      :activeDrawMode="activeDrawMode"
+      :newlyDrawnEntry="newlyDrawnEntry"
+      :connectionEntry="connectionEntry"
+      :hoverVisibilities="hoverVisibilities"
+      @clickToolbar="toolbarEvent"
+      @featureTooltip="featureTooltip"
+      @confirmDrawn="finaliseNewDrawn"
+      @cancelDrawn="finaliseNewDrawn"
+      ref="toolbarPopover"
+    />
+    <DrawToolbar
+      v-show="!isFlatmap"
+      :toolbarOptions="scaffoldToolbarOptions"
+      :activeDrawTool="activeDrawTool"
+      :activeDrawMode="activeDrawMode"
+      :hoverVisibilities="hoverVisibilities"
+      @clickToolbar="toolbarEvent"
+      ref="toolbarPopover"
+    />
+    <HelpModeDialog
+      v-show="helpMode && useHelpModeDialog"
+      class="help-mode-dialog"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+    <Tooltip
+      v-show="tooltipDisplay"
+      class="tooltip"
+      :tooltipEntry="tooltipEntry"
+      :annotationDisplay="annotationDisplay"
+      :annotationEntry="annotationEntry"
+      @annotation="commitAnnotationEvent"
+    />
+    <TreeControls
+      v-show="mapType === 'flatmap'"
+      mapType="flatmap"
+      title="Systems"
+      :treeData="treeDataEntry"
+      active=""
+      hover=""
+      @checkAll="checkAll"
+      @checkChanged="checkChanged"
+      @changeActive="changeActive"
+      @changeHover="changeHover"
+    />
+    <TreeControls
+      v-show="mapType === 'scaffold'"
+      mapType="scaffold"
+      title="Regions"
+      :isReady="isReady"
+      :treeData="treeDataEntry"
+      :active="[]"
+      :hover="[]"
+      :showColourPicker="true"
+      @setColour="setColour"
+      @checkChanged="checkChanged"
+    />
+  </div>
+</template>
+
+<style scoped>
+.options-container {
+  text-align: center;
+}
+.help-mode-dialog {
+  position: absolute;
+  top: 50%;
+}
+.tooltip {
+  width: 400px;
+  position: absolute;
+  top: calc(50% - 100px);
+  left: calc(50% - 200px);
+}
+</style>

package/src/assets/_variables.scss

@@ -0,0 +1,43 @@
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple !default;
+$app-secondary-color: $darkBlue !default;
+$text-color: $grey !default;
+$input-text: $grey !default;
+
+$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -0,0 +1,5 @@
+@import '_variables';
+
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+$--color-primary: $app-primary-color !default;

package/src/components/DrawToolbar/ConnectionDialog.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="dialog-container">
+    <el-row>
+      <el-col>
+        <el-row v-if="inDrawing">
+          <span class="dialog-title">Finalise drawing</span>
+          <el-button-group>
+            <el-button
+              type="primary"
+              plain
+              @click="$emit('confirmDrawn', true)"
+            >
+              Confirm
+            </el-button>
+            <el-button type="primary" plain @click="$emit('cancelDrawn', true)">
+              Cancel
+            </el-button>
+          </el-button-group>
+        </el-row>
+        <el-row v-else>
+          <span class="dialog-title">Visualise connection</span>
+          <el-button
+            type="primary"
+            plain
+            @click="$emit('dialogDisplay', false)"
+          >
+            Close
+          </el-button>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row v-if="connectionExist">
+      <el-col>
+        <b><span>Related Features</span></b>
+        <el-row v-for="(value, key) in connectionEntry" :key="key">
+          <el-card :shadow="shadowDisplay(key)" @click="handleTooltip(key)">
+            <span>{{ capitalise(value.label) }}</span>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const capitalise = function (str) {
+  if (str) return str.charAt(0).toUpperCase() + str.slice(1);
+  return "";
+};
+
+export default {
+  name: "ConnectionDialog",
+  props: {
+    connectionEntry: {
+      type: Object,
+      default: {},
+    },
+    inDrawing: {
+      type: Boolean,
+      default: false,
+    },
+    connectionExist: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: function () {
+    return {
+      tooltipId: undefined,
+    };
+  },
+  methods: {
+    shadowDisplay: function (value) {
+      return this.tooltipId === value ? "always" : "hover";
+    },
+    capitalise: function (label) {
+      return capitalise(label);
+    },
+    handleTooltip: function (value) {
+      this.tooltipId = this.tooltipId === value ? undefined : value;
+      this.$emit("featureTooltip", this.tooltipId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+  width: 200px;
+  height: fit-content;
+  text-align: justify;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  pointer-events: auto;
+  background: #fff;
+  border: 1px solid $app-primary-color;
+  display: flex;
+  flex-direction: column;
+  padding: 0.8em;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: rgb(131, 0, 191);
+}
+
+.el-button {
+  margin: 5px 0px;
+}
+
+:deep(.el-card) {
+  width: 100%;
+  --el-card-padding: 8px;
+  border: 0;
+  cursor: pointer;
+}
+</style>