Merge pull request #390 from SCIInstitute/project-sorting

Project and Dataset sorting UI

web/shapeworks/src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed } from 'vue'
 import { logout, oauthClient } from '@/api/auth';
-import { allDatasets, loadingState, selectedDataset, selectedProject } from '@/store';
+import { allDatasets, loadingState, sortOption, sortAscending, selectedDataset, selectedProject, filters, SORT_OPTION } from '@/store';
 import FilterSearch from './FilterSearch.vue';
 import router from '@/router';
 import { getDatasets } from '@/api/rest';
@@ -17,6 +17,10 @@ export default {
         project: selectedProject.value?.id
       }))
 
+      const ascendingLabel = computed(() => {
+        return sortOption.value !== 'modified' ? "A to Z" : "Oldest"
+      })
+
       async function logInOrOut() {
           if (oauthClient.isLoggedIn) {
             await logout();
@@ -48,6 +52,11 @@ export default {
           selectedDataset,
           selectedProject,
           navigateToHome,
+          sortOption,
+          sortAscending,
+          ascendingLabel,
+          filters,
+          SORT_OPTION,
           router,
       }
     }
@@ -67,6 +76,59 @@ export default {
     </div>
     <v-spacer />
     <filter-search v-if="!(selectedDataset && selectedProject) && !(router.currentRoute.params.dataset && router.currentRoute.params.project)"/>
+    <v-menu offset-y :close-on-content-click="false">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          class="ma-5"
+          v-if="!(selectedDataset && selectedProject) && !(router.currentRoute.params.dataset && router.currentRoute.params.project)"
+          hover
+          icon
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon>
+            mdi-filter-variant
+          </v-icon>
+        </v-btn>
+      </template>
+      <v-card>
+        <v-expansion-panels>
+          <v-expansion-panel>
+            <v-expansion-panel-header>Sort</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-card-text>
+                <div class="flex">
+                  <v-select
+                    v-model="sortOption"
+                    :items="Object.values(SORT_OPTION)"
+                    label="Sort by"
+                  />
+                  <v-switch
+                    v-model="sortAscending"
+                    :label="ascendingLabel"
+                  />
+                </div>
+              </v-card-text>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+          <v-expansion-panel v-if="selectedDataset">
+            <v-expansion-panel-header>Filter</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-card-text>
+                <v-switch
+                  v-model="filters.private"
+                  label="Hide private"
+                />
+                <v-switch
+                  v-model="filters.readonly"
+                  label="Hide read only"
+                />
+              </v-card-text>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-card>
+    </v-menu>
     <v-spacer />
     <v-btn
       v-if="oauthClient.isLoggedIn"

web/shapeworks/src/components/ProjectForm.vue

@@ -114,6 +114,7 @@ export default {
         v-else
         class="selectable-card"
         @click.stop
+        :ripple="false"
     >
         <div v-if="!editMode" class="text-overline mb-4">
             NEW PROJECT FOR DATASET {{selectedDataset.id}}

web/shapeworks/src/store/constants.ts

@@ -84,3 +84,10 @@ export const COLORS = [
 ];
 
 export const DEEPSSM_SAMPLES_PER_PAGE = 12;
+
+export enum SORT_OPTION {
+    NAME = 'name',
+    ID = 'id',
+    MODIFIED = 'modified',
+    CREATOR = 'creator',
+}

web/shapeworks/src/store/index.ts

@@ -3,9 +3,11 @@ import {
     DataObject, Dataset, Subject,
     Particles, GroomedShape, Project,
     ReconstructedSample, VTKInstance,
-    Analysis, Task, LandmarkInfo, Constraints
+    Analysis, Task, LandmarkInfo, Constraints,
+    Filters
 } from '@/types'
 import { ref } from 'vue'
+import { SORT_OPTION } from './constants';
 
 export * from './methods'
 
@@ -144,3 +146,12 @@ export const uniformScale = ref<boolean>(true);
 export const deepSSMErrorGlobalRange = ref<number[]>([0, 1]);
 
 export const deepSSMSamplePage = ref<number>(1);
+
+export const sortAscending = ref(true);
+
+export const sortOption = ref<SORT_OPTION>(SORT_OPTION.NAME);
+
+export const filters = ref<Filters>({
+    private: false,
+    readonly: false,
+});

web/shapeworks/src/types/index.ts

@@ -81,6 +81,7 @@ export interface Analysis {
 
 export interface Project {
     id: number,
+    creator: number,
     name: string,
     file: string,
     file_contents: Object | undefined,
@@ -100,6 +101,7 @@ export interface Project {
 
 export interface Dataset {
     id: number,
+    creator: number,
     name: string,
     file: string,
     private: boolean,
@@ -249,3 +251,8 @@ export interface DeepSSMImage {
     image: string,
     validation: boolean,
 }
+
+export interface Filters {
+    private: boolean,
+    readonly: boolean,
+}

web/shapeworks/src/views/DatasetSelect.vue

@@ -1,12 +1,14 @@
 <script lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import {
     allDatasets,
     selectedDataset,
     loadingState,
     selectedDataObjects,
     loadProjectsForDataset,
     getAllDatasets,
+sortOption,
+sortAscending,
 } from '@/store';
 import { Dataset } from '@/types';
 import SubsetSelection from '@/components/SubsetSelection.vue';
@@ -24,6 +26,30 @@ export default {
         const selectingSubsetOf = ref();
         selectedDataset.value = undefined;
 
+        const sortedDatasets = computed(() => {
+            if (allDatasets.value) {
+                const datasets = allDatasets.value.sort((a, b) => {
+                    let sortA = a[sortOption.value];
+                    let sortB = b[sortOption.value];
+
+                    if ((!sortA || !sortB)) {
+                        return 0;
+                    }
+
+                    if (sortA < sortB) {
+                        return (sortAscending.value === true) ? -1 : 1;
+                    }
+                    if (sortA > sortB) {
+                        return (sortAscending.value === true) ? 1 : -1;
+                    }
+                    return 0;
+                });
+
+                return datasets;
+            }
+            return [];
+        });
+
         async function selectOrDeselectDataset (dataset: Dataset | undefined) {
             if(!selectedDataset.value && dataset) {
                 selectedDataset.value = dataset;
@@ -59,6 +85,7 @@ export default {
             selectOrDeselectDataset,
             selectingSubsetOf,
             loadingState,
+            sortedDatasets,
         }
     }
 }
@@ -75,7 +102,7 @@ export default {
                 <v-card-title>No datasets.</v-card-title>
             </v-card>
             <v-card
-                v-for="dataset in allDatasets"
+                v-for="dataset in sortedDatasets"
                 :key="'dataset_'+dataset.id"
                 :class="dataset.thumbnail? 'selectable-card with-thumbnail': 'selectable-card'"
                 v-show="!selectedDataset || selectedDataset == dataset"

web/shapeworks/src/views/ProjectSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { cloneProject, deleteProject } from '@/api/rest'
 import {
     selectedDataset,
@@ -12,6 +12,9 @@ import {
     getAllDatasets,
     loadDataset,
     loadProjectsForDataset,
+    sortAscending,
+    sortOption,
+    filters,
 } from '@/store';
 import ProjectForm from '@/components/ProjectForm.vue';
 import { Project } from '@/types';
@@ -32,6 +35,44 @@ export default {
     setup(props) {
         const deleting = ref();
 
+        const sortedProjects = computed(() => {
+            if (allProjectsForDataset.value) {
+                let projects = allProjectsForDataset.value.sort((a, b) => {
+                    let sortA = a[sortOption.value];
+                    let sortB = b[sortOption.value];
+
+                    if ((!sortA || !sortB)) {
+                        return 0;
+                    }
+
+                    if (sortA < sortB) {
+                        return (sortAscending.value === true) ? -1 : 1;
+                    }
+                    if (sortA > sortB) {
+                        return (sortAscending.value === true) ? 1 : -1;
+                    }
+                    return 0;
+                });
+
+                projects = projects.filter((p) => {
+                    if (filters.value.private && filters.value.readonly) {
+                        return !p.private && !p.readonly;
+                    }
+                    if (filters.value.private) {
+                        return !p.private;
+                    }
+                    if (filters.value.readonly) {
+                        return !p.readonly;
+                    }
+
+                    return true;
+                })
+
+                return projects;
+            }
+            return [];
+        });
+
         async function selectOrDeselectProject (project: Project) {
             if(!selectedProject.value){
                 selectProject(project.id);
@@ -98,6 +139,7 @@ export default {
             selectProject,
             back,
             loadingState,
+            sortedProjects,
         }
     }
 }
@@ -116,7 +158,7 @@ export default {
                 <v-card-title>No projects.</v-card-title>
             </v-card>
             <div
-                v-for="project in allProjectsForDataset"
+                v-for="project in sortedProjects"
                 :key="'project_'+project.id"
                 @click="() => selectOrDeselectProject(project)"
             >
@@ -189,6 +231,8 @@ export default {
                     </v-card-actions>
                 </v-card>
             </div>
+            <!-- Create project form (shows at end of list). Does this need more advanced perms? -->
+            <project-form />
             <v-dialog
                 :value="deleting"
                 width="500"