Upgrade node to 18.9.0

Also update typescript, vue-cli and its plugins
Fix version of geojs to 1.10.11 to avoid a regression in 1.11.1
There is a warning from geojs about hammerjs

package.json

@@ -58,32 +58,31 @@
     "vuex-module-decorators": "^0.11.0"
   },
   "devDependencies": {
-    "@types/node": "^18.6.2",
+    "@types/node": "^18.19.0",
     "@types/papaparse": "^5.3.8",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vue/cli": "^4.1.1",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-plugin-pwa": "^4.1.1",
-    "@vue/cli-plugin-router": "^4.1.1",
-    "@vue/cli-plugin-typescript": "^4.1.1",
+    "@vue/cli": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-pwa": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
-    "@vue/cli-plugin-vuex": "^4.1.1",
-    "@vue/cli-service": "^4.1.1",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.1",
+    "@vue/eslint-config-typescript": "^11.0.3",
     "eslint": "7.12.1",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^6.0.1",
-    "geojs": "^1.10.11",
-    "node-sass": "^7.0.1",
+    "eslint-plugin-vue": "^9.19.2",
+    "geojs": "~1.10.11",
     "prettier": "^1.19.1",
     "pug": "^3.0.1",
     "pug-plain-loader": "^1.0.0",
     "sass": "~1.23.7",
     "sass-loader": "^8.0.0",
     "ts-jest": "^27.1.5",
-    "typescript": "~4.7.4",
+    "typescript": "~4.9.5",
     "vue-cli-plugin-vuetify": "^2.0.2",
     "vue-template-compiler": "^2.7.1",
     "vuetify-loader": "^1.4.2",

src/components/AnnotationBrowser/AnnotationActions.vue

@@ -101,7 +101,14 @@ export default class AnnotationActions extends Vue {
   }
 
   get redoEntry() {
-    return this.history.findLast(entry => entry.isUndone);
+    // Use findLast(entry => entry.isUndone) as in undoEntry() when typescript agrees
+    const history = this.history;
+    for (let i = history.length; i-- > 0; ) {
+      if (history[i].isUndone) {
+        return history[i];
+      }
+    }
+    return undefined;
   }
 
   get filteredAnnotations() {

src/components/AnnotationBrowser/AnnotationCSVDialog.vue

@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Emit, Prop, Watch } from "vue-property-decorator";
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import store from "@/store";
 import annotationStore from "@/store/annotation";
 import propertyStore from "@/store/properties";

src/components/AnnotationBrowser/AnnotationToggles.vue

@@ -78,8 +78,7 @@ import store from "@/store";
 
 import {
   AnnotationSelectionTypes,
-  AnnotationSelectionTypesNames,
-  AnnotationSelectionTypesTooltips
+  AnnotationSelectionTypesNames
 } from "../../store/model";
 
 @Component({

src/components/AnnotationViewer.vue

@@ -1172,7 +1172,6 @@ export default class AnnotationViewer extends Vue {
     if (!this.roiFilter) {
       return;
     }
-    const id = this.roiFilter.id;
     this.filterStore.validateNewROIFilter(geojsAnnotation.coordinates());
     this.annotationLayer.removeAnnotation(geojsAnnotation);
   }

src/components/CircleToDotMenu.vue

@@ -19,7 +19,6 @@ import store from "@/store";
 import annotationsStore from "@/store/annotation";
 import propertiesStore from "@/store/properties";
 import { IToolConfiguration } from "@/store/model";
-import { VCard, VCardSubtitle, VRow, VSlider } from "vuetify/lib";
 import { Action } from "vuex-module-decorators";
 // Popup for new tool configuration
 @Component({

src/components/DisplayLayer.vue

@@ -138,7 +138,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Emit, Watch } from "vue-property-decorator";
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import { IDisplayLayer, IContrast, IDisplaySlice } from "../store/model";
 import DisplaySlice from "./DisplaySlice.vue";
 import ContrastHistogram from "./ContrastHistogram.vue";

src/components/DisplayLayers.vue

@@ -165,7 +165,7 @@ export default class DisplayLayers extends Vue {
     this.isDragging = false;
     // Groups have changed position
     const newConfigurationLayers = [];
-    for (const [_, combinedLayers] of groups) {
+    for (const [, combinedLayers] of groups) {
       if (combinedLayers) {
         for (const { configurationLayer } of combinedLayers) {
           newConfigurationLayers.push(configurationLayer);

src/components/DisplaySlice.vue

@@ -54,7 +54,7 @@
 </style>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { IDisplaySlice, TDisplaySliceType } from "../store/model";
 import store from "@/store";
 

src/components/PropertyWorkerMenu.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, Prop, VModel } from "vue-property-decorator";
+import { Vue, Component, Prop, VModel } from "vue-property-decorator";
 import store from "@/store";
 import annotationsStore from "@/store/annotation";
 import { IWorkerInterfaceValues } from "@/store/model";

src/components/ScaleSettings.vue

@@ -63,7 +63,6 @@ import {
   IScales,
   TUnitLength,
   TUnitTime,
-  exampleConfigurationBase,
   unitLengthOptions,
   unitTimeOptions
 } from "@/store/model";

src/components/Snapshots.vue

@@ -364,7 +364,7 @@ export default class Snapshots extends Vue {
   snapshotVisible!: boolean;
 
   @Watch("snapshotVisible")
-  watchSnapshotVisible(_value: boolean) {
+  watchSnapshotVisible() {
     this.showSnapshot(this.snapshotVisible);
     if (this.snapshotVisible) {
       this.markCurrentArea();
@@ -453,16 +453,24 @@ export default class Snapshots extends Vue {
     return (this.bboxRight || 0) - (this.bboxLeft || 0);
   }
 
-  set bboxWidth(value: string) {
-    this.bboxRight = (this.bboxLeft || 0) + intFromString(value);
+  set bboxWidth(value: string | number) {
+    if (typeof value == "string") {
+      this.bboxRight = (this.bboxLeft || 0) + intFromString(value);
+    } else {
+      this.bboxRight = value;
+    }
   }
 
   get bboxHeight(): number {
     return (this.bboxBottom || 0) - (this.bboxTop || 0);
   }
 
-  set bboxHeight(value: string) {
-    this.bboxBottom = (this.bboxTop || 0) + intFromString(value);
+  set bboxHeight(value: string | number) {
+    if (typeof value == "string") {
+      this.bboxBottom = (this.bboxTop || 0) + intFromString(value);
+    } else {
+      this.bboxBottom = value;
+    }
   }
 
   get unroll(): boolean {

src/components/ViewerToolbar.vue

@@ -164,7 +164,7 @@ export default class ViewerToolbar extends Vue {
   }
 
   @Watch("unrollXY")
-  watchUnrollXY(_value: boolean) {
+  watchUnrollXY() {
     this.store.refreshDataset();
   }
 
@@ -179,7 +179,7 @@ export default class ViewerToolbar extends Vue {
   }
 
   @Watch("unrollZ")
-  watchUnrollZ(_value: boolean) {
+  watchUnrollZ() {
     this.store.refreshDataset();
   }
 
@@ -194,7 +194,7 @@ export default class ViewerToolbar extends Vue {
   }
 
   @Watch("unrollT")
-  watchUnrollT(_value: boolean) {
+  watchUnrollT() {
     this.store.refreshDataset();
   }
 

src/main.ts

@@ -19,7 +19,7 @@ import "./style.scss";
 import VueRouter from "vue-router";
 
 // Mousetrap is configured for further imports (no need to import record plugin again)
-import _Mousetrap from "mousetrap";
+import "mousetrap";
 import "mousetrap/plugins/record/mousetrap-record.min.js";
 import vMousetrap from "@/utils/v-mousetrap";
 import vDescription from "@/utils/v-description";

src/store/properties.ts

@@ -190,7 +190,7 @@ export class Properties extends VuexModule {
       return fullName;
     };
   }
-  
+
   get getSubIdsNameFromPath() {
     return (propertyPath: string[]) => {
       const propertyId = propertyPath[0];
@@ -203,7 +203,7 @@ export class Properties extends VuexModule {
       }
       const propertyName = property.name;
       const subIds = propertyPath.slice(1);
-  
+
       // Check if subIds array is empty
       if (subIds.length === 0) {
         // Return only the propertyName if there are no subIds
@@ -214,7 +214,6 @@ export class Properties extends VuexModule {
       }
     };
   }
-
 
   get uncomputedAnnotationsPerProperty() {
     const uncomputed: { [propertyId: string]: IAnnotation[] } = {};

src/tools/creation/ToolCreation.vue

@@ -70,11 +70,7 @@
 import { Vue, Component, Watch, Prop } from "vue-property-decorator";
 import store from "@/store";
 import propertiesStore from "@/store/properties";
-import {
-  AnnotationNames,
-  AnnotationShape,
-  IToolConfiguration
-} from "@/store/model";
+import { IToolConfiguration } from "@/store/model";
 
 import ToolConfiguration from "@/tools/creation/ToolConfiguration.vue";
 import ToolTypeSelection from "@/tools/creation/ToolTypeSelection.vue";

src/utils/annotation.ts

@@ -1,6 +1,5 @@
 import {
   IAnnotation,
-  IDisplayLayer,
   IImage,
   IGeoJSPoint,
   AnnotationShape,

src/views/configuration/ImportConfiguration.vue

@@ -32,7 +32,6 @@ export default class ImportConfiguration extends Vue {
     }
 
     // Create a view for each configuration
-    const now = Date.now();
     await Promise.all(
       configurations.map(configuration =>
         this.store.createDatasetView({

src/views/dataset/DatasetInfo.vue

@@ -219,7 +219,7 @@
   </v-container>
 </template>
 <script lang="ts">
-import { Vue, Component, Watch, Prop } from "vue-property-decorator";
+import { Vue, Component, Watch } from "vue-property-decorator";
 import store from "@/store";
 import girderResources from "@/store/girderResources";
 import { IDatasetView } from "@/store/model";

src/views/dataset/MultiSourceConfiguration.vue

@@ -316,7 +316,7 @@ export default class MultiSourceConfiguration extends Vue {
 
   get assignmentItems() {
     const assignedDimensions = Object.entries(this.assignments).reduce(
-      (assignedDimensions, [_, assignment]) =>
+      (assignedDimensions, [, assignment]) =>
         assignment
           ? [...assignedDimensions, assignment.value.id]
           : assignedDimensions,

src/views/dataset/NewDataset.vue

@@ -118,7 +118,7 @@
   </v-container>
 </template>
 <script lang="ts">
-import { Vue, Component, VModel, Prop } from "vue-property-decorator";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import store from "@/store";
 import girderResources from "@/store/girderResources";
 import { IGirderSelectAble } from "@/girder";

vue.config.js

@@ -178,6 +178,6 @@ module.exports = {
   devServer: {
     host: "0.0.0.0",
     hot: true,
-    disableHostCheck: true
+    allowedHosts: "all"
   }
 };