@abi-software/map-utilities 1.7.8-beta.2 → 1.7.8-demo.0

package/src/components/Tooltip/CreateTooltipContent.vue

@@ -1,11 +1,11 @@
 <template>
   <el-container class="create-container">
     <el-header height="30px" class="header">
-      <div>{{ dialogTitle }}</div>
+      <div>Create {{ createData.shape }}</div>
     </el-header>
     <el-main class="slides-block">
-      <span class="create-text" v-if="createData.editingIndex === -1 && targetRegion">
-        {{ `Primitives will be created in the ${targetRegion} region` }}
+      <span class="create-text">
+        Primitives will be created in the __annotation region
       </span>
       <el-row class="row" v-show="showPoint">
         <el-col :offset="0" :span="8">
@@ -22,21 +22,11 @@
           Region:
         </el-col>
         <el-col :offset="0" :span="16">
-          <el-autocomplete
-            class="autocomplete-box"
-            :fit-input-width="true"
+          <el-input
             v-model="region"
-            :placeholder="targetRegion"
-            :fetch-suggestions="fetchRegionSuggestions"
-            :teleported="true"
-            popper-class="autocomplete-popper"
-          >
-            <template #default="{ item }">
-              <div class="suggested-value">
-                {{ item.value }}
-              </div>
-            </template>
-          </el-autocomplete>
+            placeholder="__annotation"
+            size="small"
+          />
         </el-col>
       </el-row>
       <el-row class="row">
@@ -44,36 +34,19 @@
           Group:
         </el-col>
         <el-col :offset="0" :span="16">
-          <el-autocomplete
-            class="autocomplete-box"
-            :disabled="createData.editingIndex > -1"
-            :fit-input-width="true"
+          <el-input
             v-model="group"
             :placeholder="createData.shape"
-            :fetch-suggestions="fetchGroupSuggestions"
-            :teleported="true"
-            popper-class="autocomplete-popper"
-          >
-            <template #default="{ item }">
-              <div class="suggested-value">
-                {{ item.value }}
-              </div>
-            </template>
-          </el-autocomplete>
+            size="small"
+          />
         </el-col>
       </el-row>
-      <el-row v-if="!canBeConfirmed" class="row">
-        <div class="warning-message">
-          Group must be enterd before this action can be confirmed.
-        </div>
-      </el-row>
       <el-row>
         <el-col :offset="0" :span="12">
           <el-button
             type="primary"
             plain
             @click="confirm"
-            :disabled="!canBeConfirmed"
           >
             {{ confirmText }}
           </el-button>
@@ -94,8 +67,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+
 import {
-  ElAutocomplete as Autocomplete,
   ElButton as Button,
   ElCol as Col,
   ElContainer as Container,
@@ -111,7 +84,6 @@ import {
 export default {
   name: "CreateTooltipContent",
   components: {
-    Autocomplete,
     Button,
     Col,
     Container,
@@ -122,73 +94,26 @@ export default {
   props: {
     createData: {
       type: Object,
-      default:{
-        drawingBox: false,
-        renaming: false,
-        toBeConfirmed: false,
-        points: [],
-        tempGroupName: undefined,
-        shape: "",
-        x: 0,
-        y: 0,
-        editingIndex: -1,
-        faceIndex: -1,
-        toBeDeleted: false,
-        regionPrefix: "__annotation"
-      },
     },
   },
   watch: {
     "createData.shape": {
       handler: function (newValue, oldValue) {
-        this.group = (this.createData.tempGroupName) ? this.createData.tempGroupName : "";
+        this.group = newValue;
         if (oldValue !== undefined) {
           this.$emit("cancel-create");
         }
       },
       immediate: true,
     },
-    "createData.tempGroupName": {
-      handler: function (newValue) {
-        this.group = newValue ? newValue : "";
-      },
-      immediate: true,
-    },
   },
   computed: {
-    canBeConfirmed: function() {
-      if (this.createData.editingIndex > -1) {
-        return true;
-      } else if (this.group) {
-        if (!this.renaming) {
-          return true;
-        } else if (this.group !== this.createData.tempGroupName) {
-          return true;
-        }
-      }
-      return false;
-    },
     confirmText: function () {
       if (this.createData.editingIndex > -1) {
         return "Edit";
-      } else if (this.createData.renaming) {
-        return "Rename";
       }
       return "Confirm";
     },
-    dialogTitle: function() {
-      if (this.createData.editingIndex > -1) {
-        return `Edit ${this.createData.shape}`;
-      } else {
-        return `Create ${this.createData.shape}`;
-      }
-    },
-    targetRegion: function() {
-      if ('regionPrefix' in this.createData) {
-        return this.createData.regionPrefix;
-      }
-      return "";
-    },
   },
   data: function () {
     return {
@@ -200,13 +125,12 @@ export default {
   methods: {
     confirm: function () {
       this.$emit(
-        "confirm-create",
-        {
-          region: this.targetRegion + this.region,
+        "confirm-create", 
+        { 
+          region: "__annotation/" + this.region, 
           group: this.group,
           shape: this.createData.shape,
           editingIndex: this.createData.editingIndex,
-          renaming: this.createData.renaming,
         }
       );
       this.group = this.createData.shape;
@@ -214,14 +138,6 @@ export default {
     cancel: function () {
       this.$emit("cancel-create");
     },
-    fetchRegionSuggestions: function(term, cb) {
-      cb([]);
-      this.$emit("create-region-suggestions", {term, cb});
-    },
-    fetchGroupSuggestions: function(term, cb) {
-      cb([]);
-      this.$emit("create-group-suggestions", {term, cb, region: this.region});
-    },
   },
 };
 </script>
@@ -236,20 +152,20 @@ export default {
   font-size: 14px;
 }
 
+.row {
+  margin: 4px;
+  text-align: left;
+}
+
 :deep(.create-text) {
   max-width: 220px;
-  height: 35px;
+  height:35px;
   font-size: 12px;
 }
 
-.row {
-  margin: 4px;
-  text-align: left;
-}
 
 .create-container {
-  width: 320px;
-
+  width: 100%;
   height: auto;
   border-radius: 4px;
   border: solid 1px #d8dce6;
@@ -259,44 +175,27 @@ export default {
   pointer-events: auto;
 }
 
-:deep(.autocomplete-box) {
-  position: relative;
+.value {
   font-size: 12px;
-  display: inline-flex;
-  width: var(--el-input-width);
-  line-height: var(--el-input-height);
-  box-sizing: border-box;
-  vertical-align: middle;
-  .el-input__inner {
-    height: 24px;
-  }
 }
 
-.autocomplete-popper {
-  li {
-    line-height: normal;
-    padding: 7px;
-
-    .suggested-value {
-      font-family: "Asap", sans-serif;
-      text-align: left;
-      white-space: initial;
-    }
-
-    .el-input__inner {
-      font-size: 12px;
+.input-box {
+  width: 42px;
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color: rgb(48, 49, 51);
+  margin-left: 8px;
+  height: 24px;
+
+  &.number-input {
+    width: 42px;
+    :deep(.el-input__wrapper) {
+      padding-left: 0px;
+      padding-right: 0px;
     }
   }
 }
 
-.warning-message {
-  font-size: 10px;
-  color: #FF8400;
-}
-
-.value {
-  font-size: 12px;
-}
-
-
 </style>

package/src/components/index.js

@@ -2,6 +2,7 @@ import AnnotationPopup from "./Tooltip/AnnotationPopup.vue";
 import CreateTooltipContent from "./Tooltip/CreateTooltipContent.vue";
 import ConnectivityGraph from "./ConnectivityGraph/ConnectivityGraph.vue";
 import ConnectivityList from "./ConnectivityList/ConnectivityList.vue";
+import ConnectivityListNew from "./ConnectivityList/ConnectivityListNew.vue";
 import CopyToClipboard from "./CopyToClipboard/CopyToClipboard.vue";
 import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
 import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
@@ -16,6 +17,7 @@ import {
   queryPathsByDestination,
   queryPathsByRoute,
   queryForwardBackwardConnections,
+  querySingleConnectivityList,
 } from "./CompetencyQueries/CompetencyQueries.js";
 import {
   filterOrigins,
@@ -37,6 +39,7 @@ export {
   CreateTooltipContent,
   ConnectivityGraph,
   ConnectivityList,
+  ConnectivityListNew,
   CopyToClipboard,
   DrawToolbar,
   HelpModeDialog,
@@ -50,6 +53,7 @@ export {
   queryPathsByDestination,
   queryPathsByRoute,
   queryForwardBackwardConnections,
+  querySingleConnectivityList,
   filterOrigins,
   filterDestinations,
   filterViaLocations,

package/src/components/utilities.js

@@ -54,9 +54,17 @@ const delay = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms));
 };
 
+const removeDuplicates = function (arrayOfAnything) {
+  if (!arrayOfAnything) return []
+  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
+    JSON.parse(e)
+  )
+}
+
 export {
   capitalise,
   titleCase,
   xmlToJSON,
   delay,
+  removeDuplicates,
 };

package/src/components.d.ts

@@ -11,10 +11,10 @@ declare module 'vue' {
     ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
     ConnectivityGraph: typeof import('./components/ConnectivityGraph/ConnectivityGraph.vue')['default']
     ConnectivityList: typeof import('./components/ConnectivityList/ConnectivityList.vue')['default']
+    ConnectivityListNew: typeof import('./components/ConnectivityList/ConnectivityListNew.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']
-    ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']