Prefer structured clone

.eslintrc.js

@@ -1,3 +1,7 @@
+const a11yOff = Object
+  .keys(require('eslint-plugin-vuejs-accessibility').rules)
+  .reduce((acc, rule) => { acc[`vuejs-accessibility/${rule}`] = 'off'; return acc; }, {});
+
 module.exports = {
   root: true,
 
@@ -23,6 +27,7 @@ module.exports = {
     'max-len': ['off'],
     'import/prefer-default-export': ['off'],
     'no-underscore-dangle': ['error', { allow: ['_id', '_from', '_to', '_key'] }],
+    ...a11yOff,
   },
 
   parserOptions: {

package.json

@@ -35,21 +35,22 @@
     "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-plugin-typescript": "^3.11.0",
     "@vue/cli-plugin-unit-jest": "^4.1.1",
     "@vue/cli-service": "^4.1.0",
-    "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/eslint-config-airbnb": "^6.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/test-utils": "^1.0.0-beta.30",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
-    "eslint": "^7.10.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-vue": "^7.0.0-beta.4",
+    "eslint": "^8.19.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-vue": "^9.2.0",
+    "eslint-plugin-vuejs-accessibility": "^1.2.0",
     "jest": "^24.9.0",
     "lint-staged": "^10.5.0",
     "react": "^17.0.1",

src/App.vue

@@ -5,17 +5,17 @@ import {
   ref, computed, Ref,
 } from '@vue/composition-api';
 
-import Alert from '@/components/Alert.vue';
-import Controls from '@/components/Controls.vue';
+import AlertBanner from '@/components/AlertBanner.vue';
+import ControlPanel from '@/components/ControlPanel.vue';
 import MultiLink from '@/components/MultiLink.vue';
 import ProvVis from '@/components/ProvVis.vue';
 
 export default {
   name: 'App',
 
   components: {
-    Alert,
-    Controls,
+    AlertBanner,
+    ControlPanel,
     MultiLink,
     ProvVis,
   },
@@ -64,13 +64,13 @@ export default {
 <template>
   <v-app>
     <v-main>
-      <controls />
+      <control-panel />
 
       <multi-link
         v-if="network !== null && selectedNodes !== null"
       />
 
-      <alert v-if="loadError.message !== ''" />
+      <alert-banner v-if="loadError.message !== ''" />
     </v-main>
 
     <prov-vis v-if="showProvenanceVis" />

src/components/Alert.vue → src/components/AlertBanner.vue

@@ -6,7 +6,7 @@ import {
 import api from '@/api';
 
 export default defineComponent({
-  name: 'Alert',
+  name: 'AlertBanner',
 
   setup() {
     const loadError = computed(() => store.state.loadError);

src/components/Controls.vue → src/components/ControlPanel.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import Legend from '@/components/Legend.vue';
+import LegendPanel from '@/components/LegendPanel.vue';
 import AboutDialog from '@/components/AboutDialog.vue';
 import LoginMenu from '@/components/LoginMenu.vue';
 
@@ -11,7 +11,7 @@ import {
 
 export default defineComponent({
   components: {
-    Legend,
+    LegendPanel,
     AboutDialog,
     LoginMenu,
   },
@@ -443,7 +443,7 @@ export default defineComponent({
           </v-list-item>
         </div>
 
-        <Legend v-if="columnTypes !== null" />
+        <legend-panel v-if="columnTypes !== null" />
       </v-list>
     </v-navigation-drawer>
   </div>

src/components/MultiLink.vue

@@ -543,7 +543,7 @@ export default defineComponent({
       if (network.value !== null) {
         return network.value.edges.map((edge: Edge) => {
           const newEdge: SimulationEdge = {
-            ...JSON.parse(JSON.stringify(edge)),
+            ...structuredClone(edge),
             source: edge._from,
             target: edge._to,
           };

src/store/index.ts

@@ -589,6 +589,7 @@ export {
 // The following lines enable types in the injected store '$store'.
 export type ApplicationStore = typeof store;
 declare module 'vuex' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Store<S> {
     direct: ApplicationStore;
   }

src/types.ts

@@ -19,17 +19,17 @@ export interface SimulationEdge extends Edge {
   target: string;
 }
 
-export interface Network {
-  nodes: Node[];
-  edges: Edge[];
-}
-
 export interface Node extends TableRow {
   x?: number;
   y?: number;
   [propName: string]: any; // eslint-disable-line  @typescript-eslint/no-explicit-any
 }
 
+export interface Network {
+  nodes: Node[];
+  edges: Edge[];
+}
+
 export interface Cell {
   x: number;
   y: number;
@@ -71,6 +71,20 @@ export interface AttributeRanges {
   [key: string]: AttributeRange;
 }
 
+export type ProvenanceEventTypes =
+  'Select Node(s)' |
+  'De-select Node' |
+  'Clear Selection' |
+  'Set Display Charts' |
+  'Set Marker Size' |
+  'Set Font Size' |
+  'Set Label Variable' |
+  'Set Node Color Variable' |
+  'Set Node Size Variable' |
+  'Set Select Neighbors'|
+  'Set Directional Edges' |
+  'Set Edge Length';
+
 export interface State {
   workspaceName: string | null;
   networkName: string | null;
@@ -110,19 +124,5 @@ export interface State {
   layoutVars: { x: string | null; y: string | null };
 }
 
-export type ProvenanceEventTypes =
-  'Select Node(s)' |
-  'De-select Node' |
-  'Clear Selection' |
-  'Set Display Charts' |
-  'Set Marker Size' |
-  'Set Font Size' |
-  'Set Label Variable' |
-  'Set Node Color Variable' |
-  'Set Node Size Variable' |
-  'Set Select Neighbors'|
-  'Set Directional Edges' |
-  'Set Edge Length';
-
 export const internalFieldNames = ['_from', '_to', '_id', '_rev', 'fx', 'fy'] as const;
 export type InternalField = (typeof internalFieldNames)[number];

tsconfig.json

@@ -11,6 +11,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
+      "node",
       "webpack-env",
       "vuetify"
     ],