Upgrade to vue 2.7

web/shapeworks/package.json

@@ -10,7 +10,6 @@
   "dependencies": {
     "@girder/oauth-client": "^0.7.8",
     "@koumoul/vjsf": "^2.11.3",
-    "@vue/composition-api": "^1.4.6",
     "ajv": "^8.11.0",
     "core-js": "^3.6.5",
     "django-s3-file-field": "^0.1.1",
@@ -20,7 +19,7 @@
     "lodash": "^4.17.21",
     "shader-loader": "^1.3.1",
     "vtk.js": "*",
-    "vue": "^2.6.11",
+    "vue": "^2.7.14",
     "vue-echarts": "^6.2.4",
     "vue-router": "^3.2.0",
     "vuetify": "^2.4.0"
@@ -37,7 +36,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.32.0",
+    "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
     "typescript": "~4.1.5",
     "vue-cli-plugin-vuetify": "~2.3.1",

web/shapeworks/src/App.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import NavBar from './components/NavBar';
 import { oauthClient } from './api/auth';
 import { loadingState, currentError } from './store';

web/shapeworks/src/components/Analysis/AnalysisTab.vue

@@ -5,7 +5,7 @@ import {
     selectedProject,
     analysisExpandedTab,
 } from '@/store'
-import { defineComponent, ref, computed, watch, provide } from '@vue/composition-api'
+import { defineComponent, ref, computed, watch, provide } from 'vue'
 import Charts from './Charts.vue'
 import Groups from './Groups.vue'
 import PCA from './PCA.vue'

web/shapeworks/src/components/Analysis/Charts.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent } from 'vue'
 import { use } from 'echarts/core';
 import { SVGRenderer } from 'echarts/renderers';
 import { LineChart } from 'echarts/charts';
@@ -46,19 +46,19 @@ export default defineComponent({
     },
     setup(props) {
       const data = {};
-  
+
       const methods = {
         generateChart: (index: number) => {
             return lineChartOptions(props.charts[index] as AnalysisChart);
         }
       };
-  
+
       const computed = {};
-  
+
       const init = () => {};
-  
+
       init();
-  
+
       return {
         data,
         methods,
@@ -67,7 +67,7 @@ export default defineComponent({
     },
 });
 </script>
-  
+
 <template>
     <div v-if="charts.length > 0">
       <v-chart class="chart" v-for="chart, index in charts" :key="chart.title" :option="methods.generateChart(index)" />
@@ -137,4 +137,3 @@ export default defineComponent({
       border: 1px solid #333333;
   }
 </style>
-

web/shapeworks/src/components/Analysis/Groups.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { analysis, analysisFileShown, cacheAllComparisons, currentAnalysisFileParticles, meanAnalysisFileParticles } from '@/store';
 import { AnalysisGroup } from '@/types';
-import { Ref, computed, defineComponent, inject, ref, watch } from '@vue/composition-api';
+import { Ref, computed, defineComponent, inject, ref, watch } from 'vue';
 
 import { AnalysisTabs } from './util';
-  
+
   export default defineComponent({
     props: {
       currentTab: String,
@@ -19,7 +19,7 @@ import { AnalysisTabs } from './util';
       const prevPairing = ref<{left: string, right: string}>({left:"", right:""}); // stores the previously selected pairing
 
       const currentlyCaching: Ref | undefined = inject('currentlyCaching');
-      const animate = ref<boolean>(false); 
+      const animate = ref<boolean>(false);
 
       let step = 0.1;
       let intervalId: number;
@@ -33,7 +33,7 @@ import { AnalysisTabs } from './util';
         updateCurrGroup() {
             currGroup.value = analysis.value?.groups.find((g) => {
                 if (g.name === groupSet.value) {
-                    if ((g.group1 === currPairing.value.left && g.group2 === currPairing.value.right) 
+                    if ((g.group1 === currPairing.value.left && g.group2 === currPairing.value.right)
                         || (g.group1 === currPairing.value.right && g.group2 === currPairing.value.left)) { // if the groups pairings match the selected pairings
                         if (!methods.pairingIsInverted(g))  { // in-order group pairings
                             if (g.ratio === groupRatio.value) {
@@ -67,8 +67,8 @@ import { AnalysisTabs } from './util';
                 if (currPairing.value.right === prevPairing.value.right) {
                     currPairing.value.right = prevPairing.value.left;
                 }
-            }   
-            
+            }
+
             prevPairing.value.left = currPairing.value.left;
             prevPairing.value.right = currPairing.value.right;
 
@@ -136,9 +136,9 @@ import { AnalysisTabs } from './util';
           animate.value = false;
         }
       };
-  
-      const allGroupSets = computed(() => { 
-          return analysis.value?.groups.map((g) => g.name); 
+
+      const allGroupSets = computed(() => {
+          return analysis.value?.groups.map((g) => g.name);
       })
 
       // get all possible unique group pairings
@@ -153,7 +153,7 @@ import { AnalysisTabs } from './util';
         })
 
         watch(groupSet, () => {
-            methods.setDefaultPairing(); 
+            methods.setDefaultPairing();
             methods.updateGroupFileShown();
             animate.value = false;
         })
@@ -167,7 +167,7 @@ import { AnalysisTabs } from './util';
         if (animate) {
             watch(animate, methods.triggerAnimate)
         }
-        
+
       return {
         methods,
         groupRatio,
@@ -183,7 +183,7 @@ import { AnalysisTabs } from './util';
     },
   });
 </script>
-  
+
 <template>
     <div>
       <v-select
@@ -194,8 +194,8 @@ import { AnalysisTabs } from './util';
           item-value="set"
       />
       <v-divider></v-divider>
-      <v-row 
-          align="center" 
+      <v-row
+          align="center"
           justify="center"
       >
           <v-col>
@@ -247,4 +247,3 @@ import { AnalysisTabs } from './util';
 <style>
 
 </style>
-

web/shapeworks/src/components/Analysis/PCA.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { computed, defineComponent, ref, Ref, watch, inject } from '@vue/composition-api';
+  import { computed, defineComponent, ref, Ref, watch, inject } from 'vue';
   import { AnalysisTabs } from './util';
   import { AnalysisParams } from '@/types';
   import { 
@@ -31,9 +31,9 @@
       let step = 0;
       let intervalId: number;
 
-      const currentlyCaching: Ref | undefined = inject('currentlyCaching'); 
+      const currentlyCaching: Ref | undefined = inject('currentlyCaching');
       const animate = ref<boolean>(false);
-    
+
       const modeOptions = computed(() => {
         return analysis.value?.modes.sort((a, b) => a.mode - b.mode)
       })
@@ -122,7 +122,7 @@
             }
         },
         async triggerAnimate() {
-            if (currMode.value === undefined || animate === undefined) return; 
+            if (currMode.value === undefined || animate === undefined) return;
 
             if (animate.value && currentlyCaching) {
               step = stdDevRange.value.step;
@@ -196,7 +196,7 @@
     },
   });
 </script>
-  
+
 <template>
     <div>
       <v-select
@@ -334,4 +334,3 @@
     justify-content: space-around;
   }
 </style>
-

web/shapeworks/src/components/DataList.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { groupBy, shortDateString, shortFileName } from '../helper';
 import { getDataObjectsForSubject } from '@/api/rest';
-import { defineComponent, onMounted, ref, watch } from '@vue/composition-api';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 import { Subject } from '@/types';
 import { getSubjectsForDataset } from '@/api/rest'
 import {

web/shapeworks/src/components/FilterSearch.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref } from '@vue/composition-api'
+import { defineComponent, ref } from 'vue'
 import router from '@/router';
 import { selectedDataset, selectedProject } from '@/store';
 

web/shapeworks/src/components/InfoTab.vue

@@ -1,7 +1,7 @@
 <script>
 import pointsReader from '../reader/points';
 import { COLORS } from './ShapeViewer/methods'
-import { defineComponent, onMounted, ref } from '@vue/composition-api';
+import { defineComponent, onMounted, ref } from 'vue';
 import { landmarkColorList, selectedDataset, selectedProject } from '@/store';
 
 

web/shapeworks/src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
+import { defineComponent, computed } from 'vue'
 import { logout, oauthClient } from '@/api/auth';
 import { allDatasets, loadingState, selectedDataset, selectedProject } from '@/store';
 import FilterSearch from './FilterSearch.vue';

web/shapeworks/src/components/ProjectForm.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from 'vue';
 import { createProject, editProject } from '../api/rest'
 import {
     selectedDataset,

web/shapeworks/src/components/RenderControls.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { setDatasetThumbnail, setProjectThumbnail } from '@/api/rest';
-import { computed, defineComponent, ref, watch } from '@vue/composition-api';
+import { computed, defineComponent, ref, watch } from 'vue';
 import {
     particleSize,
     layers,

web/shapeworks/src/components/SubsetSelection.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { DataObject, Dataset } from '@/types'
-import { defineComponent, ref } from '@vue/composition-api'
+import { defineComponent, ref } from 'vue'
 import DataList from './DataList.vue'
 import { selectedDataObjects, allDatasets } from '@/store';
 import { subsetDataset } from '@/api/rest';

web/shapeworks/src/components/TabForm.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref, computed } from '@vue/composition-api'
+import { defineComponent, ref, computed } from 'vue'
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'

web/shapeworks/src/main.ts

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import '@/plugins/composition';
 import App from './App.vue';
 import router from './router';
 import vuetify from './plugins/vuetify';

web/shapeworks/src/plugins/composition.ts

@@ -1,4 +1,4 @@
 import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
+import VueCompositionAPI from 'vue';
 
 Vue.use(VueCompositionAPI);

web/shapeworks/src/store/constants.ts

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 import {
     selectedProject,
     groomedShapesForOriginalDataObjects,

web/shapeworks/src/store/index.ts

@@ -5,7 +5,7 @@ import {
     ReconstructedSample, VTKInstance,
     Analysis, Task
 } from '@/types'
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 
 export * from './methods'
 
@@ -69,4 +69,4 @@ export const jobProgressPoll = ref();
 
 export const analysisExpandedTab = ref(0);
 
-export const analysisAnimate = ref<boolean>(false);
+export const analysisAnimate = ref<boolean>(false);

web/shapeworks/src/store/methods.ts

@@ -243,7 +243,7 @@ export async function switchTab(tabName: string) {
 }
 
 
-export function calculateComparisons(mapper: any, currentPoints: TypedArray, meanPoints: TypedArray) {
+export function calculateComparisons(mapper: any, currentPoints: number[], meanPoints: number[]) {
     const vectorValues: number[][] = []
     let colorValues = []
     for (let i = 0; i < currentPoints.length; i += 3){
@@ -306,15 +306,15 @@ export async function cacheAllComparisons(comparisons: CacheComparison[]) {
                         points: currentPoints.getPoints().getData(),
                         mapper: generateMapper(currentMesh),
                         particleUrl: g.particles,
-                    }, 
+                    },
                 }
             }
         }))
 
         cachePrep.forEach((g) => {
             if (g !== undefined) {
                 const { current, compareTo } = g;
-                const comparisons = calculateComparisons(current.mapper, current.points, compareTo.points)
+                const comparisons = calculateComparisons(current.mapper, current.points as number[], compareTo.points as number[])
                 cacheComparison(comparisons.colorValues, comparisons.vectorValues, `${current.particleUrl}_${compareTo.particleUrl}`);
             }
         })

web/shapeworks/src/types/index.ts

@@ -114,6 +114,8 @@ export interface Subject {
     dataset: number,
     created: string,
     modified: string,
+    groups: string[],
+    showDetails: boolean,
 }
 
 export interface DataObject {

web/shapeworks/src/views/DatasetSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from '@vue/composition-api';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 import {
     allDatasets,
     selectedDataset,

web/shapeworks/src/views/Main.vue

@@ -3,7 +3,7 @@ import {
     defineComponent, onMounted, ref,
     watch, computed, nextTick,
     onBeforeUnmount,
-} from '@vue/composition-api';
+} from 'vue';
 import _ from 'lodash';
 import imageReader from '../reader/image';
 import pointsReader from '../reader/points';

web/shapeworks/src/views/ProjectSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from '@vue/composition-api';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 import { cloneProject, deleteProject } from '@/api/rest'
 import {
     selectedDataset,