Merge pull request #123 from LCOGT/fix/data-session-view-behavior-fixes

Fix/data session view behavior fixes

src/components/DataSession/DataSession.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, defineEmits, defineProps, onMounted, watch } from 'vue'
 import OperationPipeline from './OperationPipeline.vue'
-import { fetchApiCall, handleError } from '../../utils/api'
+import { fetchApiCall, handleError, deleteOperation } from '../../utils/api'
 import { calculateColumnSpan } from '@/utils/common'
 import { useConfigurationStore } from '@/stores/configuration'
 import ImageGrid from '../Global/ImageGrid'
@@ -99,11 +99,6 @@ function reconcileFilteredImages() {
   }
 }
 
-function deleteOperation(operationID) {
-  const url = dataSessionsUrl + props.data.id + '/operations/' + operationID + '/'
-  fetchApiCall({ url: url, method: 'DELETE', successCallback: () => {emit('reloadSession')}, failCallback: handleError })
-}
-
 async function addOperation(operationDefinition) {
   const url = dataSessionsUrl + props.data.id + '/operations/'
 
@@ -143,7 +138,6 @@ onMounted(() => {
   <v-container class="d-lg-flex ds-container">
     <v-col
       cols="3"
-      justify="center"
       align="center"
     >
       <!-- The operations bar list goes here -->
@@ -154,7 +148,7 @@ onMounted(() => {
         @operation-completed="addCompletedOperation"
         @select-operation="selectOperation"
         @operation-was-deleted="emit('reloadSession')"
-        @delete-operation="deleteOperation"
+        @delete-operation="(operationID) => deleteOperation(props.data.id, operationID, emit('reloadSession'))"
       />
       <v-btn
         variant="flat"
@@ -188,13 +182,12 @@ onMounted(() => {
   display: flex;
 }
 .addop_button {
-  width: 16rem;
-  height: 4rem;
-  font-size: 1.3rem;
+  font-size: 1rem;
   align-content: center;
   background-color: var(--light-blue);
   font-weight: 700;
-  color: white;
+  color: var(--tan);
   margin-top: 1rem;
+  padding: 25px
 }
 </style>

src/components/DataSession/OperationPipeline.vue

@@ -90,6 +90,12 @@ function openDeleteOperationDialog(operation) {
   showDeleteDialog.value = true
 }
 
+function itemDeleted(){
+  // Reset the selected operation after its deleted, otherwise the next operation will be selected 
+  selectedOperation.value = -1
+  emit('operationWasDeleted')
+}
+
 watch(() => props.operations, () => {
   if (props.active) {
     props.operations.forEach(operation => {
@@ -167,7 +173,7 @@ onBeforeUnmount(() => {
     v-model="showDeleteDialog"
     :session-id="sessionId"
     :operation-id="deleteOperationId"
-    @item-was-deleted="emit('operationWasDeleted', $event)"
+    @item-was-deleted="itemDeleted()"
   />
 </template>
 
@@ -185,9 +191,8 @@ onBeforeUnmount(() => {
 .operation_button {
   width: 12rem;
   height: 3rem;
-  font-size: 1.2rem;
+  font-size: 1rem;
   font-weight: 600;
-  border-style: none;
   color: var(--metal);
 }
 

src/components/DataSession/OperationWizard.vue

@@ -271,9 +271,7 @@ function selectImage(inputKey, imageIndex) {
             :type="inputDescription.type"
             class="operation-input"
           />
-          <div
-            v-else-if="inputDescription.type == 'file'"
-          >
+          <div v-else-if="inputDescription.type == 'file'">
             <div
               v-if="inputDescription.name"
               class="input-images"
@@ -284,7 +282,6 @@ function selectImage(inputKey, imageIndex) {
               :images="imagesWithFilter(inputDescription.filter)"
               :selected-images="selectedImages[inputKey]"
               :column-span="calculateColumnSpan(images.length, imagesPerRow)"
-              class="wizard-images"
               :allow-selection="true"
               @select-image="selectImage(inputKey, $event)"
             />
@@ -293,17 +290,16 @@ function selectImage(inputKey, imageIndex) {
       </v-card-text>
     </v-slide-y-reverse-transition>
     <v-slide-y-reverse-transition hide-on-leave>
-    <v-card-text
+      <v-card-text
         v-show="page == 'scaling'"
         class="wizard-card"
       >
         <div v-if="isInputComplete">
           <image-scaling-group
-            :inputDescription="selectedOperationInputs"
+            :input-description="selectedOperationInputs"
             :inputs="selectedOperationInput"
             @update-scaling="updateScaling"
-          >
-          </image-scaling-group>
+          />
         </div>
       </v-card-text>
     </v-slide-y-reverse-transition>
@@ -386,12 +382,6 @@ function selectImage(inputKey, imageIndex) {
   font-size: 1.5rem;
   text-transform: uppercase;
 }
-.wizard-images {
-  max-width: 100%;
-  height: auto;
-  box-sizing: border-box;
-  cursor: pointer;
-}
 
 .selected-image {
   border: 0.3rem solid var(--dark-green);

src/components/Global/DeleteDialog.vue

@@ -7,10 +7,6 @@ defineProps({
     type: Boolean,
     required: true
   },
-  showSnackBar: {
-    type: Boolean,
-    required: true
-  },
   dialogTitle: {
     type: String,
     required: true
@@ -70,13 +66,6 @@ function closeDialog() {
       </v-card-actions>
     </v-card>
   </v-dialog>
-  <v-snackbar
-    :model-value="showSnackBar"
-    color="red"
-    :timeout="2000"
-  >
-    Error: Item couldn't be deleted
-  </v-snackbar>
 </template>
 
 <style scoped>

src/components/Global/DeleteOperationDialog.vue

@@ -1,8 +1,6 @@
-<!-- eslint-disable vue/require-prop-types -->
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue'
-import { fetchApiCall } from '../../utils/api'
-import { useConfigurationStore } from '@/stores/configuration'
+import { defineProps, defineEmits } from 'vue'
+import { deleteOperation } from '../../utils/api'
 import DeleteDialog from '@/components/Global/DeleteDialog.vue'
 
 const props = defineProps({
@@ -22,10 +20,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'itemWasDeleted'])
 
-const store = useConfigurationStore()
-
-const showSnackBar = ref(false)
-const dataSessionsUrl = store.datalabApiBaseUrl + 'datasessions/'
 const DIALOG_TITLE = 'DELETE OPERATION'
 const DIALOG_BODY = 'Are you sure you want to delete this Datalab Operation? This is not reversible!'
 
@@ -34,23 +28,16 @@ function itemDeleted(){
   emit('update:modelValue', false)
 }
 
-async function confirmDeleteOperation() {
-  const url = dataSessionsUrl + props.sessionId + '/operations/' + props.operationId + '/'
-  await fetchApiCall({ url: url, method: 'DELETE', successCallback: itemDeleted, failCallback: () => {showSnackBar.value=true} })
-}
-
 </script>
 <template>
   <!-- Shared dialog used to confirm deleting of operations -->
   <delete-dialog
     :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
-    :show-snack-bar="showSnackBar"
     :dialog-title="DIALOG_TITLE"
     :dialog-body="DIALOG_BODY"
-    :on-delete="confirmDeleteOperation"
-  >
-  </delete-dialog>
+    :on-delete="() => {deleteOperation(props.sessionId, props.operationId, itemDeleted)}"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
 </template>
 
 <style scoped>

src/components/Global/DeleteSessionDialog.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/require-prop-types -->
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue'
+import { defineProps, defineEmits } from 'vue'
 import { fetchApiCall } from '../../utils/api'
 import { useConfigurationStore } from '@/stores/configuration'
 import DeleteDialog from '@/components/Global/DeleteDialog.vue'
@@ -20,7 +20,6 @@ const emit = defineEmits(['update:modelValue', 'itemWasDeleted'])
 
 const store = useConfigurationStore()
 
-const showSnackBar = ref(false)
 const dataSessionsUrl = store.datalabApiBaseUrl + 'datasessions/'
 const DIALOG_TITLE = 'DELETE SESSION'
 const DIALOG_BODY = 'Are you sure you want to delete this Datalab Session? This is not reversible!'
@@ -32,21 +31,19 @@ function itemDeleted(){
 
 async function confirmDeleteOperation() {
   const url = dataSessionsUrl + props.sessionId
-  await fetchApiCall({url: url, method: 'DELETE', successCallback: itemDeleted, failCallback: () => {showSnackBar.value=true} })
+  await fetchApiCall({url: url, method: 'DELETE', successCallback: itemDeleted })
 }
 
 </script>
 <template>
   <!-- Shared dialog used to confirm deleting of operations -->
   <delete-dialog
     :model-value="modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
-    :show-snack-bar="showSnackBar"
     :dialog-title="DIALOG_TITLE"
     :dialog-body="DIALOG_BODY"
     :on-delete="confirmDeleteOperation"
-  >
-  </delete-dialog>
+    @update:model-value="emit('update:modelValue', $event)"
+  />
 </template>
 
 <style scoped>

src/components/Global/ImageScalingGroup.vue

@@ -59,7 +59,7 @@ watch(
         :value="groupName"
         class="pr-0 tab"
       >
-      {{ groupName }}
+        {{ groupName }}
       </v-tab>
     </v-tabs>
     <v-card-text>
@@ -69,42 +69,51 @@ watch(
           :key="groupName"
           :value="groupName"
         >
-          <v-content style="height:100vh">
-            <v-container fluid pa-0 class="d-flex flex-column flex-grow-1 fill-parent-height">
+          <v-main style="height:100vh">
+            <v-container
+              fluid
+              pa-0
+              class="d-flex flex-column flex-grow-1 fill-parent-height"
+            >
               <v-row no-gutters>
-                <v-col cols="6" class="flex-grow-1 flex-shrink-1 fill-parent-height scaled-images">
-                  <v-row no-gutters
+                <v-col
+                  cols="6"
+                  class="flex-grow-1 flex-shrink-1 fill-parent-height scaled-images"
+                >
+                  <v-row
                     v-for="(groupInput, groupInputName ) in groupInputs"
                     :key="groupName + '-' + groupInputName"
+                    no-gutters
                   >
                     <image-scaler
                       v-if="groupInput"
                       :image="groupInput"
                       :image-name="groupInputName"
                       :composite-name="groupName"
                       @update-scaling="(imageName, zmin, zmax) => emit('updateScaling', imageName, zmin, zmax)"
-                    >
-                    </image-scaler>
-                    <v-divider></v-divider>
+                    />
+                    <v-divider />
                   </v-row>
                 </v-col>
-                <v-col cols="6" class="flex-grow-0 flex-shrink-0 fill-parent-height mt-8" v-if="groupName != 'default'">
+                <v-col
+                  v-if="groupName != 'default'"
+                  cols="6"
+                  class="flex-grow-0 flex-shrink-0 fill-parent-height mt-8"
+                >
                   <v-row no-gutters>
                     <composite-image
-                      :width=500
-                      :height=500
-                      :imageName="groupName"
-                    >
-                    </composite-image>
+                      :width="500"
+                      :height="500"
+                      :image-name="groupName"
+                    />
                   </v-row>
                 </v-col>
               </v-row>
             </v-container>
-          </v-content>
+          </v-main>
         </v-tabs-window-item>
       </v-tabs-window>
     </v-card-text>
-
   </v-card>
 </template>
 <style scoped>

src/components/Project/CreateSessionDialog.vue

@@ -69,7 +69,7 @@ async function createNewDataSession(){
 }
 
 function routeToDataSessionView(response){
-  userDataStore.mostRecentSessionId = response.id
+  userDataStore.activeSessionId = response.id
   router.push({ name: 'DataSessionView' })
 }
 

src/stores/userData.js

@@ -11,7 +11,7 @@ export const useUserDataStore = defineStore('userData', {
       openProposals: [],
       isColorblindMode: false,
       gridToggle: true,
-      mostRecentSessionId: ''
+      activeSessionId: ''
     }
   },
   persist: true,

src/utils/api.js

@@ -1,4 +1,5 @@
 import { useUserDataStore } from '@/stores/userData'
+import { useConfigurationStore } from '@/stores/configuration'
 
 // handles api requests for datasessions with configurable parameters and callback functions
 async function fetchApiCall({ url, method, body = null, header, successCallback = null, failCallback = handleError }) {
@@ -46,5 +47,11 @@ const handleError = (error) => {
   console.error('API call failed with error:', error)
 }
 
+function deleteOperation(sessionId, operationId, successCallback, failCallback = handleError) {
+  const configStore = useConfigurationStore()
+  const url = configStore.datalabApiBaseUrl + 'datasessions/' + sessionId + '/operations/' + operationId + '/'
+  fetchApiCall({ url: url, method: 'DELETE', successCallback: successCallback, failCallback: failCallback })
+}
+
 
-export { fetchApiCall, handleError }
+export { fetchApiCall, handleError, deleteOperation }