Updated dependencies and fix vue.config.js

Author: pascalseeland

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/viplab-standalone-frontend-vue'
+    schedule:
+      interval: 'weekly'

viplab-standalone-frontend-vue/.dockerignore

@@ -1 +1,2 @@
 node_modules
+dist

viplab-standalone-frontend-vue/Dockerfile-dev

@@ -1,5 +1,4 @@
-# base image: latest 16er version, with 18, build breaks
-FROM node:16.14.2-alpine
+FROM node:18.13.0-alpine
 
 # set working directory
 WORKDIR /app

viplab-standalone-frontend-vue/package-lock.json

@@ -11,36 +11,38 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@rleys/vue-plotly-basic": "^1.1.14",
     "@vue/composition-api": "^1.1.3",
     "ace-builds": "^1.4.13",
     "ajv": "^6.12.6",
     "ansi_up": "^5.1.0",
     "base64url": "^3.0.1",
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.21.2",
+    "buffer": "^6.0.3",
     "crypto-js": "^4.0.0",
     "epic-spinners": "^1.1.0",
-    "eslint": "^7.14.0",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "file-loader": "^6.2.0",
     "handlebars": "^4.7.7",
     "itk": "^14.1.0",
     "jquery": "^3.5.1",
     "js-base64": "^3.6.0",
-    "jsonwebtoken": "^8.5.1",
+    "jsonwebtoken": "^9.0.0",
     "jwk-to-pem": "^2.0.4",
-    "plotly.js": "^1.47.4",
+    "mustache": "^4.2.0",
+    "plotly.js": "^1.58.5",
     "popper.js": "^1.16.1",
     "prismjs": "^1.22.0",
-    "shader-loader": "^1.3.1",
     "url": "^0.11.0",
     "v-tooltip": "^2.1.3",
     "vee-validate": "^3.4.13",
-    "vtk.js": "^18.1.11",
-    "vue": "^2.5.17",
+    "vtk.js": "^26.0.0",
+    "vue": "~2.6.0",
     "vue-blockui": "^1.1.7",
     "vue-demi": "^0.11.3",
     "vue-easy-dnd": "^1.19.0",
-    "vue-plotly": "^1.1.0",
     "vue-prism-editor": "^1.2.2",
     "vue-router": "^3.5.2",
     "vue-simple-alert": "^1.1.1",
@@ -51,20 +53,22 @@
     "vue-wait": "^1.4.8",
     "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.1.0",
-    "worker-loader": "^2.0.0"
+    "worker-loader": "^3.0.8"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.4",
-    "@vue/cli-plugin-eslint": "^3.0.4",
-    "@vue/cli-service": "^4.5.9",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "babel-eslint": "^10.1.0",
     "copy-webpack-plugin": "^6.4.1",
-    "html-webpack-plugin": "^4.5.2",
-    "node-sass": "^6.0.1",
-    "sass-loader": "^10.0.0",
-    "style-loader": "^3.3.0",
-    "vue-template-compiler": "^2.5.17",
-    "webpack": "^4.4.0",
-    "wslink": "^0.1.15"
+    "fs": "^0.0.1-security",
+    "html-webpack-plugin": "^5.5.0",
+    "node-sass": "^8.0.0",
+    "path-browserify": "^1.0.1",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "vue-template-compiler": "~2.6.0",
+    "webpack": "5.75.0"
   },
   "eslintConfig": {
     "root": true,

viplab-standalone-frontend-vue/package.json

@@ -12,7 +12,7 @@
           {{ json.metadata.description }}
         </div>
         <div class="item-name">
-          Go To Teacher-View: 
+          Go To Teacher-View:
           <router-link to="/teacher">Go to Teacher-View</router-link>
         </div>
         <div class="item-name">
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+global.Buffer = global.Buffer || require('buffer').Buffer;
 import base64url from "base64url";
 //const Base64 = require('js-base64');
 
@@ -84,7 +85,7 @@ export default {
       let appDiv = document.body;
       let data = appDiv.getAttribute("data-template");
       let decodedjson = JSON.parse(base64url.decode(data));
-      
+
       console.log(decodedjson)
 
       console.log(Object.keys(this.$store.state.jsonTemplate).length === 0)
@@ -100,12 +101,12 @@ export default {
         this.json = {};
         this.token = "";
       }
-      
+
       // store json in Vuex store
       // this.$store.commit("updateJsonTemplate", decodedjson);
-      
+
       //this.token = appDiv.getAttribute("data-token");
-      
+
 
       // if there are parameters in parts, set var accordingly for rendering of button
       for(var file in this.json.files) {
@@ -173,6 +174,6 @@ body {
     font-weight: bold;
     font-size: 14pt;
   }
-  
+
 }
-</style>
+</style>

viplab-standalone-frontend-vue/public/index.html

@@ -37,8 +37,8 @@
 
 <script>
 
-import { Plotly } from "vue-plotly";
-import plotlyjs from "plotly.js";
+import { Plotly } from '@rleys/vue-plotly-basic'
+import plotlyjs from "plotly.js"
 
 import base64url from "base64url";
 
@@ -88,14 +88,14 @@ export default {
     } else {
       this.loadBase64Data(this.csvs[this.fileIndex]);
     }
-    
+
   },
   methods: {
     //"http://localhost:8080/" + inputFile
     loadData: function(context) {
-        //plotlyjs.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv", function(data){ 
-        //plotlyjs.d3.csv("http://localhost:8080/plotly-test.csv", function(data){ 
-        plotlyjs.d3.csv(context.csvs[context.fileIndex], function(data){   
+        //plotlyjs.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/2014_apple_stock.csv", function(data){
+        //plotlyjs.d3.csv("http://localhost:8080/plotly-test.csv", function(data){
+        plotlyjs.d3.csv(context.csvs[context.fileIndex], function(data){
           context.processData(data);
         });
     },
@@ -189,13 +189,13 @@ export default {
             title: {
               text: this.labelProp.label || xkey
             },
-            tickformat: xformat 
+            tickformat: xformat
           },
           yaxis: {
             title: {
               text: ytext
             },
-            tickformat: yformat 
+            tickformat: yformat
           }
         }
 
@@ -268,4 +268,4 @@ div.btn-group {
 div.btn-group > .btn {
   margin: 0 0 1px 1px;
 }
-</style>
+</style>

viplab-standalone-frontend-vue/src/App.vue

@@ -14,7 +14,7 @@
 <script>
 import * as Parser from "../parse.js";
 
-import { Plotly } from 'vue-plotly';
+import { Plotly } from '@rleys/vue-plotly-basic';
 
 export default {
   name: 'GridPlot',
@@ -53,27 +53,27 @@ export default {
     this.datasetList = parseTest.parseValues(testJson);
     this.minColor = parseTest.getMinColor();
     this.maxColor = parseTest.getMaxColor();
-    
+
     for (var i = 0; i < this.datasetList[0].getWidth(); i++) {
       this.xArray.push(this.datasetList[0].getXMin() * 1 + (i * ((this.datasetList[0].getXMax() - this.datasetList[0].getXMin())/this.datasetList[0].getWidth())));
     }
-    
+
     for (i = 0; i < this.datasetList[0].getHeight(); i++) {
       this.yArray.push(this.datasetList[0].getYMin() * 1 + (i * ((this.datasetList[0].getYMax() - this.datasetList[0].getYMin())/this.datasetList[0].getHeight())));
     }
 
     this.create2dGitterplot();
 
     this.layout = {
-      
+
       title: this.datasetList[0].getLabel(),
       scene: {
         camera: {
           eye: { x: -1.25, y: -1.25, z: 1.25 }
         },
         xaxis: {
           range: [this.datasetList[0].getXMin(), this.datasetList[0].getXMax()],
-          
+
         },
         yaxis: {
         range: [this.datasetList[0].getYMin(), this.datasetList[0].getYMax()],
@@ -84,7 +84,7 @@ export default {
       }
     }
   },
-  methods: { 
+  methods: {
     onChange(event) {
       //console.log(event.target.value);
       if (event.target.value === "2DGitterplot") {
@@ -115,22 +115,22 @@ export default {
 
       for (var j = 0; j < this.datasetList[0].getData()[0].length; j++) {
         Array.prototype.push.apply(xScatterArray, this.xArray);
-        
+
       }
 
       for (j = 0; j < this.datasetList[0].getData().length; j++) {
         Array.prototype.push.apply(yScatterArray, this.yArray);
       }
-  
+
       var zScatterArray = new Array();
       for(var i = 0; i < this.datasetList[0].getData().length; i++) {
         zScatterArray = zScatterArray.concat(this.datasetList[0].getData()[i]);
       }
       yScatterArray.sort(function(a, b){return a - b});
-      
+
       this.data = [{
         x: xScatterArray,
-        y: yScatterArray, 
+        y: yScatterArray,
         z: zScatterArray,
         mode: 'markers',
         marker: {
@@ -170,7 +170,7 @@ export default {
           showscale: false
         }];
     },
-  } 
+  }
 }
 </script>
 
@@ -179,4 +179,4 @@ export default {
   .gridplot-component {
     border-radius: calc(0.25rem - 1px);
   }
-</style>
+</style>

viplab-standalone-frontend-vue/src/components/csv-plots/CsvPlot.vue

@@ -34,7 +34,7 @@
 <script>
 import * as LinePlotParser from "./LinePlotParser.js";
 
-import { Plotly } from "vue-plotly";
+import { Plotly } from "@rleys/vue-plotly-basic";
 
 export default {
   name: "Plot2d",
@@ -204,4 +204,4 @@ div.btn-group > .btn {
   margin: 0 0 1px 1px;
 }
 
-</style>
+</style>

viplab-standalone-frontend-vue/src/components/viplab-plots/gridplot/GridPlot.vue

@@ -53,7 +53,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  routes 
+  routes
 })
 
 import Vuex from 'vuex'
@@ -69,10 +69,10 @@ const store = new Vuex.Store({
     dataTemplate: "",
     ws: "",
     generatedComputationTemplate: {
-      "identifier" : "", 
-      "version" : "3.0.0", 
-      "metadata": { "displayName" : "", "description": "" }, 
-      "environment": "Container", 
+      "identifier" : "",
+      "version" : "3.0.0",
+      "metadata": { "displayName" : "", "description": "" },
+      "environment": "Container",
       "configuration": {
         "running.timelimitInSeconds": 0,
         "running.commandLineArguments": "",
@@ -83,7 +83,7 @@ const store = new Vuex.Store({
         "resources.volume": "",
         "resources.memory": "64mb",
         "resources.numCPUs": 1
-      }, 
+      },
       "files": []
     },
     modifiedByTeacher: false,
@@ -127,4 +127,4 @@ fetch(process.env.BASE_URL + "static/config.json?/t=currentTimestamp")
       store: store,
       render: h => h(App)
     }).$mount('#app')
-  })
+  })