From f2b19f36bd92f00aa0b8dd3009c0f10a5faf583c Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 17 Sep 2025 14:24:59 -0400
Subject: [PATCH 01/15] style: Redesign project configuration menu

---
 web/src/components/DatasetList.vue            |   2 +-
 web/src/components/projects/DatasetSelect.vue |  81 ++++++----
 web/src/components/projects/ProjectConfig.vue | 146 +++++-------------
 web/src/components/sidebars/FloatingPanel.vue |  14 +-
 4 files changed, 99 insertions(+), 144 deletions(-)

diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index b3e32efc..911177f9 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -31,7 +31,7 @@ const datasetGroups = computed(() => {
 const expandedGroups = ref();
 
 function expandAllGroups() {
-  if (!expandedGroups.value && filteredDatasets.value) {
+  if (filteredDatasets.value) {
     expandedGroups.value = Object.keys(datasetGroups.value)
   }
 }
diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index 1ba6a071..d0dfd955 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -9,9 +9,11 @@ const layerStore = useLayerStore();
 
 const props = defineProps<{
   datasets: Dataset[] | undefined;
-  selectedIds: number[] | undefined;
+  savingId: number | undefined;
+  addedIds?: number[] | undefined;
+  buttonIcon: string
 }>();
-const emit = defineEmits(["toggleDatasets"]);
+const emit = defineEmits(["buttonClick"]);
 
 const datasetsWithLayers = computed(() => {
   return props.datasets?.map((dataset) => {
@@ -21,10 +23,6 @@ const datasetsWithLayers = computed(() => {
     }
   })
 })
-
-function toggleSelected(items: Dataset[]) {
-    emit("toggleDatasets", items);
-}
 </script>
 
 <template>
@@ -37,33 +35,45 @@ function toggleSelected(items: Dataset[]) {
         >
           <v-expansion-panel-title>
             <div style="display: flex; justify-content: space-between; width: 100%;">
-              <div class="item-title">
-                <div>
-                    <v-checkbox-btn
-                      :model-value="props.selectedIds?.includes(dataset.id)"
-                      style="display: inline"
-                      class="mr-2"
-                      @click.stop="() => toggleSelected([dataset])"
-                    />
-                    {{ dataset.name }}
-                </div>
-                <div v-if="dataset.layers" style="min-width: 75px; text-align: right">
-                  <v-icon
-                    icon="mdi-layers"
-                    size="small"
-                    v-tooltip="dataset.layers.length + ' layers'"
-                    class="ml-2"
-                  ></v-icon>
-                  <span class="secondary-text">{{ dataset.layers.length }}</span>
-                  <v-icon
-                    icon="mdi-information-outline"
-                    size="small"
-                    v-tooltip="dataset.description"
-                    class="mx-1"
-                  ></v-icon>
-                </div>
+              <div>
+                <v-progress-circular
+                  v-if="props.savingId === dataset.id"
+                  size="24"
+                  class="mr-5"
+                  indeterminate
+                />
+                <v-icon
+                  v-else-if="!props.addedIds || !props.addedIds.includes(dataset.id)"
+                  :icon="props.buttonIcon"
+                  color="primary"
+                  class="icon-button mr-5"
+                  @click.stop="emit('buttonClick', dataset)"
+                />
+                <v-icon
+                  v-else
+                  icon="mdi-check"
+                  color="success"
+                  class="mr-5"
+                  @click.stop
+                />
+                {{ dataset.name }}
+              </div>
+              <div v-if="dataset.layers" style="min-width: 75px; text-align: right">
+                <v-icon
+                  icon="mdi-layers"
+                  size="small"
+                  v-tooltip="dataset.layers.length + ' layers'"
+                  class="ml-2"
+                ></v-icon>
+                <span class="secondary-text">{{ dataset.layers.length }}</span>
+                <v-icon
+                  icon="mdi-information-outline"
+                  size="small"
+                  v-tooltip="dataset.description"
+                  class="mx-1"
+                ></v-icon>
+                <DetailView v-if="dataset" :details="{...dataset, type: 'dataset'}"/>
               </div>
-              <DetailView v-if="dataset" :details="{...dataset, type: 'dataset'}"/>
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="pb-2">
@@ -84,3 +94,10 @@ function toggleSelected(items: Dataset[]) {
     </template>
   </DatasetList>
 </template>
+
+<style>
+.icon-button {
+  background-color: rgb(var(--v-theme-secondary));
+  border-radius: 4px;
+}
+</style>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index bdde60a1..81b49996 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, Ref, computed, onMounted, ComputedRef, watch } from "vue";
+import { ref, Ref, computed, onMounted, watch } from "vue";
 import DatasetSelect from "@/components/projects/DatasetSelect.vue";
 import AccessControl from "@/components/projects/AccessControl.vue";
 import {
@@ -31,12 +31,6 @@ const selectedProject: Ref<Project | undefined> = ref();
 const allDatasets: Ref<Dataset[]> = ref([]);
 const projDatasets: Ref<Dataset[] | undefined> = ref();
 const projSelectedDatasetIds: Ref<number[]> = ref([]);
-const otherDatasets: ComputedRef<Dataset[]> = computed(() => {
-  return allDatasets.value.filter(
-    (d1) => !projDatasets.value?.map((d2) => d2.id).includes(d1.id)
-  );
-});
-const otherSelectedDatasetIds: Ref<number[]> = ref([]);
 
 const permissions = computed(() => {
   const ret = Object.fromEntries(
@@ -62,6 +56,7 @@ const permissions = computed(() => {
   return ret;
 });
 const saving = ref<"waiting" | "done">();
+const savingId = ref<number | undefined>();
 const newProjectName = ref();
 const projectToEdit: Ref<Project | undefined> = ref();
 const projectToDelete: Ref<Project | undefined> = ref();
@@ -160,62 +155,35 @@ function loadSelectedProject() {
   projectStore.projectConfigMode = undefined;
 }
 
-function toggleOtherDatasetSelection(datasets: Dataset[]) {
-  datasets.forEach((dataset: Dataset) => {
-    if (!otherSelectedDatasetIds.value.includes(dataset.id)) {
-      otherSelectedDatasetIds.value.push(dataset.id);
-    } else {
-      otherSelectedDatasetIds.value = otherSelectedDatasetIds.value.filter(
-        (id) => id !== dataset.id
-      );
-    }
-  });
-}
-
-function toggleProjDatasetSelection(datasets: Dataset[]) {
-  datasets.forEach((dataset: Dataset) => {
-    if (!projSelectedDatasetIds.value.includes(dataset.id)) {
-      projSelectedDatasetIds.value.push(dataset.id);
-    } else {
-      projSelectedDatasetIds.value = projSelectedDatasetIds.value.filter(
-        (id) => id !== dataset.id
-      );
-    }
-  });
-}
-
-function addAllSelectionToProject() {
-  if (projDatasets.value) {
-    saveDatasetsToProject([
-      ...projDatasets.value.map((d) => d.id),
-      ...otherSelectedDatasetIds.value,
-    ]);
-    otherSelectedDatasetIds.value = [];
+function addDatasetToProject(dataset: Dataset) {
+  savingId.value = dataset.id
+  const projDatasetIds = projDatasets.value?.map((d) => d.id)
+  if (!projDatasetIds?.includes(dataset.id)) {
+    projDatasetIds?.push(dataset.id)
+  }
+  if (projDatasetIds) {
+    saveDatasetsToProject(projDatasetIds)
   }
 }
 
-function removeProjSelectionFromProject() {
-  if (projDatasets.value) {
-    saveDatasetsToProject(
-      projDatasets.value
-        .map((d) => d.id)
-        .filter((id) => !projSelectedDatasetIds.value.includes(id))
-    );
-    projSelectedDatasetIds.value = [];
+function removeDatasetFromProject(dataset: Dataset) {
+  savingId.value = dataset.id
+  let projDatasetIds = projDatasets.value?.map((d) => d.id)
+  if (projDatasetIds?.includes(dataset.id)) {
+    projDatasetIds = projDatasetIds.filter((id) => id !== dataset.id)
+  }
+  if (projDatasetIds) {
+    saveDatasetsToProject(projDatasetIds)
   }
 }
 
 function saveDatasetsToProject(ids: number[]) {
-  saving.value = "waiting";
   if (selectedProject.value) {
     patchProject(selectedProject.value.id, {
       datasets: ids,
     }).then(() => {
       refreshProjectDatasets(() => {
-        saving.value = "done";
-        setTimeout(() => {
-          saving.value = undefined;
-        }, 2000);
+        savingId.value = undefined
       })
     });
   }
@@ -261,7 +229,7 @@ onMounted(() => {
 
 watch(selectedProject, resetProjectEdit);
 
-watch(otherDatasets, () => {
+watch(allDatasets, () => {
   if (allDatasets.value && projDatasets.value) {
     projectStore.loadingDatasets = false;
   }
@@ -508,67 +476,29 @@ watch(() => projectStore.projectConfigMode, () => {
           >
             <v-progress-linear v-if="projectStore.loadingDatasets" indeterminate></v-progress-linear>
             <div v-else class="py-3 px-6 d-flex">
-              <div style="width: 30%">
-                <v-card-text>Available Datasets</v-card-text>
-                <v-card class="pa-2 dataset-card">
-                  <DatasetSelect
-                    :datasets="otherDatasets"
-                    :selected-ids="otherSelectedDatasetIds"
-                    @toggleDatasets="toggleOtherDatasetSelection"
-                  />
-                </v-card>
-                <v-btn
-                  color="primary"
-                  @click="addAllSelectionToProject"
-                  :disabled="!!saving || !otherSelectedDatasetIds.length"
-                  class="mt-2"
-                >
-                  Add
-                  <v-icon icon="mdi-chevron-double-right" />
-                  <v-icon
-                    v-if="saving === 'done'"
-                    icon="mdi-check"
-                    color="green"
-                    class="ml-4"
-                  />
-                  <v-progress-circular
-                    v-else-if="saving"
-                    size="25"
-                    indeterminate
-                    class="ml-4"
-                  />
-                </v-btn>
-              </div>
-              <div class="ml-10" style="width: 30%">
+              <div style="width: 45%">
                 <v-card-text>Project Datasets</v-card-text>
-                <v-card class="pa-2 dataset-card">
+                <div class="pa-2 dataset-card">
                   <DatasetSelect
                     :datasets="projDatasets"
-                    :selected-ids="projSelectedDatasetIds"
-                    @toggleDatasets="toggleProjDatasetSelection"
+                    :savingId="savingId"
+                    button-icon="mdi-close"
+                    @buttonClick="removeDatasetFromProject"
                   />
-                </v-card>
-                <v-btn
-                  color="primary"
-                  @click="removeProjSelectionFromProject"
-                  :disabled="!!saving || !projSelectedDatasetIds.length"
-                  class="mt-2"
-                >
-                  <v-icon icon="mdi-chevron-double-left" />
-                  Remove
-                  <v-icon
-                    v-if="saving === 'done'"
-                    icon="mdi-check"
-                    color="green"
-                    class="ml-4"
-                  />
-                  <v-progress-circular
-                    v-else-if="saving"
-                    size="25"
-                    indeterminate
-                    class="ml-4"
+                </div>
+              </div>
+              <v-divider class="mx-5" vertical></v-divider>
+              <div style="width: 45%">
+                <v-card-text>All Datasets</v-card-text>
+                <div class="pa-2 dataset-card">
+                  <DatasetSelect
+                    :datasets="allDatasets"
+                    :savingId="savingId"
+                    :addedIds="projDatasets?.map((d) => d.id)"
+                    button-icon="mdi-plus"
+                    @buttonClick="addDatasetToProject"
                   />
-                </v-btn>
+                </div>
               </div>
             </div>
           </div>
diff --git a/web/src/components/sidebars/FloatingPanel.vue b/web/src/components/sidebars/FloatingPanel.vue
index e5a6dd5f..6e5ffdc4 100644
--- a/web/src/components/sidebars/FloatingPanel.vue
+++ b/web/src/components/sidebars/FloatingPanel.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import { usePanelStore } from "@/store";
+import { usePanelStore, useProjectStore } from "@/store";
 const panelStore = usePanelStore();
+const projectStore = useProjectStore();
 
 const props = defineProps<{
   id: string;
@@ -95,6 +96,13 @@ function panelUpdated() {
         <div style="display: flex; align-items: center;">
           <v-card-text class="pa-3" style="font-size: 18px;">{{ panel.label }}</v-card-text>
           <div class="mr-3">
+            <v-icon
+              v-if="panel.id === 'datasets' && projectStore.currentProject"
+              v-tooltip="'Add Dataset'"
+              icon="mdi-plus"
+              color="primary"
+              @mousedown="projectStore.projectConfigMode = 'existing'"
+            />
             <v-icon
               :icon="panel.collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'"
               v-tooltip="panel.collapsed ? 'Expand' : 'Collapse'"
@@ -103,7 +111,7 @@ function panelUpdated() {
             <v-icon
               icon="mdi-drag"
               class="draggable"
-              @mousedown="(e) => {
+              @mousedown="(e: any) => {
                 updatePanelElement();
                 startDrag(e, panel, ['position'])
               }"
@@ -123,7 +131,7 @@ function panelUpdated() {
             icon="mdi-resize-bottom-right"
             class="right mr-2 draggable-corner"
             @mousedown="
-              (e) => {
+              (e: any) => {
                 updatePanelElement();
                 startDrag(e, panel, ['width', 'height']);
               }

From 620bb6b1427f8361a1de3206720beb1c45c33fd4 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 17 Sep 2025 15:40:43 -0400
Subject: [PATCH 02/15] feat: Create basic dataset upload menu

---
 web/components.d.ts                           |   1 +
 web/src/components/projects/DatasetUpload.vue | 117 ++++++++++++++++++
 web/src/components/projects/ProjectConfig.vue |   6 +-
 3 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/projects/DatasetUpload.vue

diff --git a/web/components.d.ts b/web/components.d.ts
index ab5a30fb..9dd65dfe 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     DatasetList: typeof import('./src/components/DatasetList.vue')['default']
     DatasetSelect: typeof import('./src/components/projects/DatasetSelect.vue')['default']
     DatasetsPanel: typeof import('./src/components/sidebars/DatasetsPanel.vue')['default']
+    DatasetUpload: typeof import('./src/components/projects/DatasetUpload.vue')['default']
     DetailView: typeof import('./src/components/DetailView.vue')['default']
     FloatingPanel: typeof import('./src/components/sidebars/FloatingPanel.vue')['default']
     LayersPanel: typeof import('./src/components/sidebars/LayersPanel.vue')['default']
diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
new file mode 100644
index 00000000..62d90e60
--- /dev/null
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { Dataset } from '@/types';
+import { computed, ref, watch } from 'vue';
+
+
+const props = defineProps<{
+  allDatasets: Dataset[];
+}>();
+
+const open = ref<boolean>(false)
+const name = ref<string>()
+const description = ref<string>()
+const category = ref<string>()
+const mandatoryRule = [
+  (v: any) => (v ? true : "Input required.")
+];
+
+const categories = computed(() => {
+    return [...new Set(props.allDatasets?.map((d) => d.category))]
+})
+
+const valid = computed(() => {
+    return name.value && description.value && category.value
+})
+
+function cancel() {
+    open.value = false
+    name.value = undefined
+    description.value = undefined
+    category.value = undefined
+}
+
+function submit() {
+    console.log('submit')
+}
+
+watch(open, () => {
+    if(!open) cancel()
+})
+</script>
+
+<template>
+    <v-btn color="primary" @click="open=true">
+        <v-icon icon="mdi-upload" class="mr-2" />
+        Upload New Dataset
+
+        <v-dialog v-model="open" persistent width="700">
+            <v-card class="dataset-upload-card" color="background">
+                <div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); height: 40px">
+                    Upload Dataset
+
+                    <v-icon
+                        icon="mdi-close"
+                        style="position: absolute; top: 10px; right: 5px;"
+                        v-tooltip="'Warning: unsaved changes will be discarded'"
+                        @mousedown="cancel"
+                    />
+                </div>
+                <div class="pa-5 d-flex" style="flex-direction: column; row-gap: 10px">
+                    <v-text-field
+                        autofocus
+                        label="Dataset Name"
+                        v-model="name"
+                        :rules="mandatoryRule"
+                        hide-details="auto"
+                    />
+                    <v-text-field
+                        label="Description"
+                        v-model="description"
+                        :rules="mandatoryRule"
+                        hide-details="auto"
+                    />
+                    <v-combobox
+                        label="Combobox"
+                        v-model="category"
+                        :items="categories"
+                        :rules="mandatoryRule"
+                        hide-details="auto"
+                    >
+                        <template v-slot:append-inner>
+                            <v-icon
+                                v-if="!categories.includes(category)"
+                                icon="mdi-information-outline"
+                                class="ml-2"
+                                color="primary"
+                                v-tooltip="'You are creating a new category'"
+                            />
+                        </template>
+                    </v-combobox>
+                </div>
+
+                <v-card-actions style="float: right;">
+                    <v-btn class="secondary-button" @click="cancel">
+                        <v-icon color="primary" class="mr-1">mdi-close-circle</v-icon>
+                        Cancel
+                    </v-btn>
+                    <v-btn
+                        class="primary-button"
+                        :disabled="!valid"
+                        @click="submit"
+                    >
+                        <v-icon color="button-text" class="mr-1" icon="mdi-upload" />
+                        Upload
+                    </v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-btn>
+</template>
+
+<style>
+.dataset-upload-card {
+    max-height: 80vh!important;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+</style>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index 81b49996..7d628376 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, Ref, computed, onMounted, watch } from "vue";
 import DatasetSelect from "@/components/projects/DatasetSelect.vue";
+import DatasetUpload from "@/components/projects/DatasetUpload.vue";
 import AccessControl from "@/components/projects/AccessControl.vue";
 import {
   getDatasets,
@@ -489,7 +490,10 @@ watch(() => projectStore.projectConfigMode, () => {
               </div>
               <v-divider class="mx-5" vertical></v-divider>
               <div style="width: 45%">
-                <v-card-text>All Datasets</v-card-text>
+                <div class="d-flex">
+                  <v-card-text>All Datasets</v-card-text>
+                  <DatasetUpload :allDatasets="allDatasets"/>
+                </div>
                 <div class="pa-2 dataset-card">
                   <DatasetSelect
                     :datasets="allDatasets"

From 19050d29303e9a9fdd76881f00fba4668509369c Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 17 Sep 2025 16:56:24 -0400
Subject: [PATCH 03/15] feat: Add layers configuration

---
 web/src/components/projects/DatasetUpload.vue | 92 +++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index 62d90e60..cda70a37 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -2,6 +2,13 @@
 import { Dataset } from '@/types';
 import { computed, ref, watch } from 'vue';
 
+import { VFileUpload } from 'vuetify/labs/VFileUpload'
+
+
+interface LayerSpec {
+    id: number;
+    name: string | undefined,
+}
 
 const props = defineProps<{
   allDatasets: Dataset[];
@@ -11,6 +18,9 @@ const open = ref<boolean>(false)
 const name = ref<string>()
 const description = ref<string>()
 const category = ref<string>()
+const layers = ref<LayerSpec[]>([])
+const maxLayerId = ref<number>(0)
+const focusedLayerId = ref<number>(0)
 const mandatoryRule = [
   (v: any) => (v ? true : "Input required.")
 ];
@@ -28,6 +38,24 @@ function cancel() {
     name.value = undefined
     description.value = undefined
     category.value = undefined
+    layers.value = []
+}
+
+function addLayer() {
+    maxLayerId.value += 1
+    const id = maxLayerId.value
+    layers.value.push({
+        id,
+        name: undefined
+    })
+    focusedLayerId.value = id
+}
+
+function removeLayer(layer_id: number) {
+    layers.value = layers.value.filter((l) => l.id !== layer_id)
+    if (focusedLayerId.value === layer_id) {
+        focusedLayerId.value = 0
+    }
 }
 
 function submit() {
@@ -36,6 +64,7 @@ function submit() {
 
 watch(open, () => {
     if(!open) cancel()
+    else addLayer()
 })
 </script>
 
@@ -87,6 +116,59 @@ watch(open, () => {
                             />
                         </template>
                     </v-combobox>
+
+                    <div class="layers-configuration">
+                        <div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); height: 40px">
+                            Layers Configuration
+                        </div>
+                        <div class="pa-2">
+                            <v-card
+                                v-for="layer, index in layers"
+                                :key="layer.id"
+                                class="layer-card"
+                            >
+                                <div v-if="focusedLayerId === layer.id">
+                                    <v-text-field
+                                        label="Layer Name"
+                                        v-model="layer.name"
+                                        :rules="mandatoryRule"
+                                        hide-details="auto"
+                                    />
+                                    <v-file-upload
+                                        density="compact"
+                                        class="mt-2"
+                                        multiple
+                                        clearable
+                                        style="background-color: rgb(var(--v-theme-secondary)); padding: 10px"
+                                    >
+                                        <template v-slot:icon>
+                                            <v-icon size="xs" icon="mdi-upload" color="primary"/>
+                                        </template>
+                                        <template v-slot:title>
+                                            <div style="font-weight: normal; font-size: medium;">
+                                                Drag & drop file(s) or
+                                                <span style="text-decoration: underline;" class="text-primary">Browse</span>
+                                            </div>
+                                        </template>
+                                    </v-file-upload>
+                                </div>
+                                <div v-else style="width: 100%; display: flex; justify-content: space-between;">
+                                    {{ layer.name || ('Layer ' + (index + 1)) }}
+
+                                    <div>
+                                        <v-icon @click="focusedLayerId = layer.id" class="ml-2">mdi-pencil-outline</v-icon>
+                                        <v-icon @click="removeLayer(layer.id)" class="ml-2">mdi-delete-outline</v-icon>
+                                    </div>
+                                </div>
+                            </v-card>
+                            <div style="text-align: center;" class="pt-2">
+                                <v-btn color="background" class="text-primary" flat @click="addLayer">
+                                    <v-icon icon="mdi-plus" color="primary"/>
+                                    Add Layer
+                                </v-btn>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
                 <v-card-actions style="float: right;">
@@ -114,4 +196,14 @@ watch(open, () => {
     overflow-y: auto;
     overflow-x: hidden;
 }
+.layers-configuration {
+    border: 1px solid rgb(var(--v-theme-primary-text))
+}
+.layer-card {
+    padding: 8px !important;
+    margin-top: 8px;
+    background-color: rgb(var(--v-theme-background)) !important;
+    box-shadow: none !important;
+    border-bottom: 1px solid rgb(var(--v-theme-surface))
+}
 </style>

From 7e2f570f17650f20bc44103e4f06dcfd59ca5647 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 18 Sep 2025 10:57:12 -0400
Subject: [PATCH 04/15] fix: Update appearance and behavior of file input

---
 web/src/components/projects/DatasetUpload.vue | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index cda70a37..c0862bf6 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -2,12 +2,13 @@
 import { Dataset } from '@/types';
 import { computed, ref, watch } from 'vue';
 
-import { VFileUpload } from 'vuetify/labs/VFileUpload'
+import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
 
 
 interface LayerSpec {
     id: number;
     name: string | undefined,
+    files: File[],
 }
 
 const props = defineProps<{
@@ -24,6 +25,7 @@ const focusedLayerId = ref<number>(0)
 const mandatoryRule = [
   (v: any) => (v ? true : "Input required.")
 ];
+const acceptTypes = '.json,.geojson,.tif,.tiff,.zip'
 
 const categories = computed(() => {
     return [...new Set(props.allDatasets?.map((d) => d.category))]
@@ -46,7 +48,8 @@ function addLayer() {
     const id = maxLayerId.value
     layers.value.push({
         id,
-        name: undefined
+        name: undefined,
+        files: []
     })
     focusedLayerId.value = id
 }
@@ -108,7 +111,7 @@ watch(open, () => {
                     >
                         <template v-slot:append-inner>
                             <v-icon
-                                v-if="!categories.includes(category)"
+                                v-if="category && !categories.includes(category)"
                                 icon="mdi-information-outline"
                                 class="ml-2"
                                 color="primary"
@@ -134,11 +137,19 @@ watch(open, () => {
                                         :rules="mandatoryRule"
                                         hide-details="auto"
                                     />
+                                    <v-icon
+                                        icon="mdi-information-outline"
+                                        color="primary"
+                                        class="upload-info-icon"
+                                        v-tooltip="'Upload multiple files to create a sequence of frames, or upload a single file to optionally split into frames.'"
+                                    />
                                     <v-file-upload
+                                        v-model="layer.files"
                                         density="compact"
                                         class="mt-2"
                                         multiple
                                         clearable
+                                        :accept="acceptTypes"
                                         style="background-color: rgb(var(--v-theme-secondary)); padding: 10px"
                                     >
                                         <template v-slot:icon>
@@ -150,6 +161,19 @@ watch(open, () => {
                                                 <span style="text-decoration: underline;" class="text-primary">Browse</span>
                                             </div>
                                         </template>
+                                        <template v-slot:item="{ props: itemProps }">
+                                            <v-file-upload-item v-bind="itemProps" lines="one" nav>
+                                                <template v-slot:prepend>
+                                                    <v-icon icon="mdi-file-outline" />
+                                                </template>
+                                                <template v-slot:title="{ title }">
+                                                    <div class="text-primary">{{ title }}</div>
+                                                </template>
+                                                <template v-slot:clear="{ props: clearProps }">
+                                                <v-icon color="error" icon="mdi-close-circle" v-bind="clearProps" />
+                                                </template>
+                                            </v-file-upload-item>
+                                        </template>
                                     </v-file-upload>
                                 </div>
                                 <div v-else style="width: 100%; display: flex; justify-content: space-between;">
@@ -206,4 +230,13 @@ watch(open, () => {
     box-shadow: none !important;
     border-bottom: 1px solid rgb(var(--v-theme-surface))
 }
+.upload-info-icon {
+    position: absolute;
+    right: 15px;
+    padding-top: 25px;
+    z-index: 1;
+}
+.v-file-upload-items .v-list-item-title {
+    font-size: 1rem!important;
+}
 </style>

From 053f2fa0ffa65f59ac88a77736cea749c7dd03cb Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 18 Sep 2025 11:35:29 -0400
Subject: [PATCH 05/15] feat: Add "similar datasets" list and "add to project"
 checkbox

---
 web/src/components/projects/DatasetUpload.vue | 47 +++++++++++++++++--
 web/src/components/projects/ProjectConfig.vue |  7 ++-
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index c0862bf6..1ce597c4 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { Dataset } from '@/types';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
 
-
 interface LayerSpec {
     id: number;
     name: string | undefined,
@@ -13,6 +12,7 @@ interface LayerSpec {
 
 const props = defineProps<{
   allDatasets: Dataset[];
+  projectPermission: any;
 }>();
 
 const open = ref<boolean>(false)
@@ -22,18 +22,36 @@ const category = ref<string>()
 const layers = ref<LayerSpec[]>([])
 const maxLayerId = ref<number>(0)
 const focusedLayerId = ref<number>(0)
+const addToCurrentProject = ref<boolean>(false)
 const mandatoryRule = [
   (v: any) => (v ? true : "Input required.")
 ];
 const acceptTypes = '.json,.geojson,.tif,.tiff,.zip'
 
+const similarExisting = computed(() => {
+    return props.allDatasets.filter((d) => {
+        if (name.value && name.value.length > 2) return d.name?.toLowerCase().includes(name.value.toLowerCase())
+        return false
+    })
+})
 const categories = computed(() => {
     return [...new Set(props.allDatasets?.map((d) => d.category))]
 })
-
 const valid = computed(() => {
-    return name.value && description.value && category.value
+    return (
+        name.value && description.value && category.value &&
+        layers.value.length > 0 && layers.value.every((l) => l.name && l.files.length)
+    )
 })
+const canEditProject = computed(() => {
+    return ['owner', 'collaborator'].includes(props.projectPermission)
+})
+
+function init() {
+    if (canEditProject) {
+        addToCurrentProject.value = true
+    }
+}
 
 function cancel() {
     open.value = false
@@ -69,6 +87,8 @@ watch(open, () => {
     if(!open) cancel()
     else addLayer()
 })
+
+onMounted(init)
 </script>
 
 <template>
@@ -96,6 +116,12 @@ watch(open, () => {
                         :rules="mandatoryRule"
                         hide-details="auto"
                     />
+                    <div v-if="similarExisting.length" class="bg-surface-light pa-2">
+                        <span class="secondary-text">Similar Existing Datasets:</span>
+                        <div v-for="dataset in similarExisting" style="font-size: 0.8rem; margin-left: 10px">
+                            {{ dataset.name }}
+                        </div>
+                    </div>
                     <v-text-field
                         label="Description"
                         v-model="description"
@@ -195,6 +221,16 @@ watch(open, () => {
                     </div>
                 </div>
 
+                <div class="d-flex px-3" style="justify-content: right;">
+                    <v-checkbox
+                        v-if="canEditProject"
+                        v-model="addToCurrentProject"
+                        label="Add dataset to current project"
+                        density="compact"
+                        color="primary"
+                        hide-details
+                    />
+                </div>
                 <v-card-actions style="float: right;">
                     <v-btn class="secondary-button" @click="cancel">
                         <v-icon color="primary" class="mr-1">mdi-close-circle</v-icon>
@@ -239,4 +275,7 @@ watch(open, () => {
 .v-file-upload-items .v-list-item-title {
     font-size: 1rem!important;
 }
+.v-checkbox-btn .text-primary .v-icon {
+    color: rgb(var(--v-theme-primary))!important
+}
 </style>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index 7d628376..26289b78 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -31,7 +31,6 @@ const filteredProjects = computed(() => {
 const selectedProject: Ref<Project | undefined> = ref();
 const allDatasets: Ref<Dataset[]> = ref([]);
 const projDatasets: Ref<Dataset[] | undefined> = ref();
-const projSelectedDatasetIds: Ref<number[]> = ref([]);
 
 const permissions = computed(() => {
   const ret = Object.fromEntries(
@@ -492,7 +491,11 @@ watch(() => projectStore.projectConfigMode, () => {
               <div style="width: 45%">
                 <div class="d-flex">
                   <v-card-text>All Datasets</v-card-text>
-                  <DatasetUpload :allDatasets="allDatasets"/>
+                  <DatasetUpload
+                    v-if=projectStore.currentProject
+                    :allDatasets="allDatasets"
+                    :projectPermission="permissions[projectStore.currentProject.id]"
+                  />
                 </div>
                 <div class="pa-2 dataset-card">
                   <DatasetSelect

From ed9df37c8f4621338539cdf9e46fb25ba462eab3 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 18 Sep 2025 13:02:35 -0400
Subject: [PATCH 06/15] feat: Add multiframe specification controls

---
 web/src/components/projects/DatasetUpload.vue | 78 +++++++++++++++++--
 1 file changed, 71 insertions(+), 7 deletions(-)

diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index 1ce597c4..6d6cb8d6 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -6,8 +6,10 @@ import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
 
 interface LayerSpec {
     id: number;
-    name: string | undefined,
-    files: File[],
+    name: string | undefined;
+    files: File[];
+    frame_method: 'single' | 'multi';
+    frame_property: string | undefined
 }
 
 const props = defineProps<{
@@ -67,7 +69,9 @@ function addLayer() {
     layers.value.push({
         id,
         name: undefined,
-        files: []
+        files: [],
+        frame_method: 'single',
+        frame_property: undefined,
     })
     focusedLayerId.value = id
 }
@@ -79,6 +83,14 @@ function removeLayer(layer_id: number) {
     }
 }
 
+function isRasterFile(file: File) {
+    return ['image/tiff'].includes(file.type)
+}
+
+function isVectorFile(file: File) {
+    return ['application/json', 'application/geo+json'].includes(file.type)
+}
+
 function submit() {
     console.log('submit')
 }
@@ -97,7 +109,7 @@ onMounted(init)
         Upload New Dataset
 
         <v-dialog v-model="open" persistent width="700">
-            <v-card class="dataset-upload-card" color="background">
+            <v-card color="background">
                 <div class="px-4 py-2" style="background-color: rgb(var(--v-theme-surface)); height: 40px">
                     Upload Dataset
 
@@ -108,7 +120,7 @@ onMounted(init)
                         @mousedown="cancel"
                     />
                 </div>
-                <div class="pa-5 d-flex" style="flex-direction: column; row-gap: 10px">
+                <div class="pa-5 d-flex dataset-upload-form-content" style="flex-direction: column; row-gap: 10px">
                     <v-text-field
                         autofocus
                         label="Dataset Name"
@@ -177,6 +189,7 @@ onMounted(init)
                                         clearable
                                         :accept="acceptTypes"
                                         style="background-color: rgb(var(--v-theme-secondary)); padding: 10px"
+                                        @update:model-value="() => {layer.frame_method = 'single'; layer.frame_property = undefined}"
                                     >
                                         <template v-slot:icon>
                                             <v-icon size="xs" icon="mdi-upload" color="primary"/>
@@ -201,6 +214,54 @@ onMounted(init)
                                             </v-file-upload-item>
                                         </template>
                                     </v-file-upload>
+                                    <div
+                                        v-if="layer.files.length > 1 || layer.files.some((f) => f.type === 'application/zip')"
+                                        class="secondary-text"
+                                        style="text-align: center; font-size: 0.8rem;"
+                                    >
+                                        Each file will be treated as a frame in the layer's sequence.
+                                    </div>
+                                    <div v-else-if="layer.files.length === 1">
+                                        <v-btn-toggle
+                                            v-model="layer.frame_method"
+                                            variant="outlined"
+                                            density="compact"
+                                            divided
+                                            mandatory
+                                        >
+                                            <v-btn value="single">Add as single frame</v-btn>
+                                            <v-btn value="multi">Add as multi-frame</v-btn>
+                                        </v-btn-toggle>
+                                        <div v-if="layer.frame_method === 'multi'" class="mt-2">
+                                            <v-btn-toggle
+                                                v-if="isRasterFile(layer.files[0])"
+                                                v-model="layer.frame_property"
+                                                variant="outlined"
+                                                density="compact"
+                                                divided
+                                                mandatory
+                                            >
+                                                <v-btn value="frame">Split by raster frame</v-btn>
+                                                <v-btn value="band">Split by raster band</v-btn>
+                                            </v-btn-toggle>
+                                            <v-text-field
+                                                v-else-if="isVectorFile(layer.files[0])"
+                                                v-model="layer.frame_property"
+                                                label="Frame Property"
+                                                density="compact"
+                                                :rules="mandatoryRule"
+                                                hide-details="auto"
+                                            >
+                                                <template v-slot:append>
+                                                    <v-icon
+                                                        icon="mdi-information-outline"
+                                                        v-tooltip="'Enter the name of an ordered feature property that corresponds to frame'"
+                                                        color="primary"
+                                                    />
+                                                </template>
+                                            </v-text-field>
+                                        </div>
+                                    </div>
                                 </div>
                                 <div v-else style="width: 100%; display: flex; justify-content: space-between;">
                                     {{ layer.name || ('Layer ' + (index + 1)) }}
@@ -251,8 +312,8 @@ onMounted(init)
 </template>
 
 <style>
-.dataset-upload-card {
-    max-height: 80vh!important;
+.dataset-upload-form-content {
+    max-height: 70vh!important;
     overflow-y: auto;
     overflow-x: hidden;
 }
@@ -272,6 +333,9 @@ onMounted(init)
     padding-top: 25px;
     z-index: 1;
 }
+.v-file-upload-items .v-list-item {
+    border: none!important
+}
 .v-file-upload-items .v-list-item-title {
     font-size: 1rem!important;
 }

From d93c4e6d4c951be1ead56f7f55b8aee8cc3f9575 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 18 Sep 2025 13:34:19 -0400
Subject: [PATCH 07/15] build: Add `django-s3-file-field` as a client
 dependency

---
 web/package-lock.json | 17 +++++++++++++++--
 web/package.json      |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 5246215b..3b93286b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "uvdat",
-  "version": "1.2.1",
+  "version": "1.6.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "uvdat",
-      "version": "1.2.1",
+      "version": "1.6.0",
       "dependencies": {
         "@mdi/font": "^7.2.96",
         "@resonant/oauth-client": "^0.9.0",
@@ -16,6 +16,7 @@
         "colormap": "^2.3.2",
         "core-js": "^3.8.3",
         "dayjs": "^1.11.13",
+        "django-s3-file-field": "^1.1.0",
         "git-describe": "^4.1.1",
         "html2canvas": "^1.4.1",
         "lodash": "^4.17.21",
@@ -5137,6 +5138,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/django-s3-file-field": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/django-s3-file-field/-/django-s3-file-field-1.1.0.tgz",
+      "integrity": "sha512-yksfBPSuwrFk5702r3ApqUkt/VUVF616mkoWMNDcPa5WnX1viQHNg+hG2+v8dB9OXFt/0IaF0lPBW+BcgNDNMg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "axios": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 1ae19206..c87a03cf 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,6 +17,7 @@
     "colormap": "^2.3.2",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.13",
+    "django-s3-file-field": "^1.1.0",
     "git-describe": "^4.1.1",
     "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",

From e896557ae2a81f8605332da000a5d0f3ae346757 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 18 Sep 2025 16:47:38 -0400
Subject: [PATCH 08/15] feat: Implement `submit` function with dataset
 creation, file upload, fileitem creation, and spawning dataset conversion
 task

---
 web/src/api/auth.js                           | 13 ++++
 web/src/api/rest.ts                           | 21 +++++-
 web/src/components/projects/DatasetUpload.vue | 64 ++++++++++++++++---
 web/src/components/projects/ProjectConfig.vue | 27 +++++---
 4 files changed, 108 insertions(+), 17 deletions(-)

diff --git a/web/src/api/auth.js b/web/src/api/auth.js
index b93bf6e4..80a9f0d1 100644
--- a/web/src/api/auth.js
+++ b/web/src/api/auth.js
@@ -1,5 +1,6 @@
 import axios from "axios";
 import OauthClient from "@resonant/oauth-client";
+import S3FileFieldClient from 'django-s3-file-field';
 import { useAppStore, useMapStore, useProjectStore } from "@/store";
 
 export const baseURL = `${import.meta.env.VITE_APP_API_ROOT}api/v1/`;
@@ -13,6 +14,12 @@ export const oauthClient = new OauthClient(
   { redirectUrl: window.location.origin }
 );
 
+let s3ffClient = undefined;
+
+export function getS3ffClient() {
+  return s3ffClient
+}
+
 export async function restoreLogin() {
   if (!oauthClient) {
     return;
@@ -24,6 +31,12 @@ export async function restoreLogin() {
         useAppStore().currentUser = response.data;
       }
     });
+    s3ffClient = new S3FileFieldClient({
+      baseUrl: baseURL + 's3-upload/',
+      apiConfig: {
+        headers: oauthClient.authHeaders
+      }
+    })
   }
 }
 
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index 41b2b1b9..cfd66636 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -1,4 +1,4 @@
-import { apiClient } from "./auth";
+import { apiClient, getS3ffClient } from "./auth";
 import {
   User,
   Project,
@@ -93,6 +93,14 @@ export async function getDataset(datasetId: number): Promise<Dataset> {
   return (await apiClient.get(`datasets/${datasetId}`)).data;
 }
 
+export async function createDataset(data: any): Promise<Dataset> {
+  return (await apiClient.post('datasets/', data)).data;
+}
+
+export async function spawnDatasetConversion(datasetId: number, options: any): Promise<Dataset> {
+  return (await apiClient.post(`datasets/${datasetId}/convert/`, options || {})).data;
+}
+
 export async function getDatasetLayers(datasetId: number): Promise<Layer[]> {
   return (await apiClient.get(`datasets/${datasetId}/layers`)).data;
 }
@@ -113,6 +121,17 @@ export async function getFileDataObjects(fileId: number): Promise<(RasterData |
   return (await apiClient.get(`files/${fileId}/data`)).data;
 }
 
+export async function uploadFile(file:File): Promise<string> {
+  const s3ffClient = getS3ffClient()
+  return await s3ffClient.uploadFile(
+    file, 'core.FileItem.file',
+  )
+}
+
+export async function createFileItem(data: any): Promise<FileItem> {
+  return (await apiClient.post('files/', data)).data;
+}
+
 export async function getDatasetNetworks(datasetId: number): Promise<Network[]> {
   return (await apiClient.get(`datasets/${datasetId}/networks`)).data;
 }
diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index 6d6cb8d6..d9da84e3 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { createDataset, createFileItem, spawnDatasetConversion, uploadFile } from '@/api/rest';
 import { Dataset } from '@/types';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { VFileUpload, VFileUploadItem } from 'vuetify/labs/VFileUpload'
 
@@ -16,6 +17,8 @@ const props = defineProps<{
   allDatasets: Dataset[];
   projectPermission: any;
 }>();
+const emit = defineEmits(['addToCurrentProject', 'uploaded']);
+
 
 const open = ref<boolean>(false)
 const name = ref<string>()
@@ -25,6 +28,7 @@ const layers = ref<LayerSpec[]>([])
 const maxLayerId = ref<number>(0)
 const focusedLayerId = ref<number>(0)
 const addToCurrentProject = ref<boolean>(false)
+const submitting = ref<boolean>(false)
 const mandatoryRule = [
   (v: any) => (v ? true : "Input required.")
 ];
@@ -42,7 +46,11 @@ const categories = computed(() => {
 const valid = computed(() => {
     return (
         name.value && description.value && category.value &&
-        layers.value.length > 0 && layers.value.every((l) => l.name && l.files.length)
+        layers.value.length > 0 && layers.value.every((l) => {
+            return l.name && l.files.length && (
+                l.frame_method === 'single' || l.frame_property
+            )
+        })
     )
 })
 const canEditProject = computed(() => {
@@ -50,6 +58,7 @@ const canEditProject = computed(() => {
 })
 
 function init() {
+    addLayer()
     if (canEditProject) {
         addToCurrentProject.value = true
     }
@@ -61,6 +70,10 @@ function cancel() {
     description.value = undefined
     category.value = undefined
     layers.value = []
+    maxLayerId.value = 0
+    focusedLayerId.value = 0
+    addToCurrentProject.value = false
+    submitting.value = false
 }
 
 function addLayer() {
@@ -92,15 +105,49 @@ function isVectorFile(file: File) {
 }
 
 function submit() {
-    console.log('submit')
+    submitting.value = true
+    createDataset({
+        name: name.value,
+        description: description.value,
+        category: category.value,
+    }).then(async (dataset) => {
+        if (addToCurrentProject.value) {
+            emit('addToCurrentProject', dataset)
+        }
+        const layerOptions = await Promise.all(
+            layers.value.map(async (l) => {
+                let fileValues = await Promise.all(
+                    l.files.map(async (f) => await uploadFile(f))
+                )
+                let fileItems = await Promise.all(
+                    l.files.map(async (f, i) => await createFileItem({
+                        name: f.name,
+                        file: fileValues[i],
+                        file_type: f.type.substring(f.type.lastIndexOf('/') + 1).replaceAll('+', ''),
+                        dataset: dataset.id,
+                    }))
+                )
+                const layerInfo: any = {
+                    name: l.name,
+                    source_files: fileItems.map((f) => f.name)
+                }
+                if (l.frame_property) {
+                    layerInfo.frame_property = l.frame_property
+                }
+                return layerInfo
+            })
+        )
+        spawnDatasetConversion(dataset.id, {layer_options: layerOptions}).then((conversionTask) => {
+            emit('uploaded', {dataset, conversionTask})
+            cancel()
+        })
+    })
 }
 
 watch(open, () => {
     if(!open) cancel()
-    else addLayer()
+    else init()
 })
-
-onMounted(init)
 </script>
 
 <template>
@@ -299,10 +346,11 @@ onMounted(init)
                     </v-btn>
                     <v-btn
                         class="primary-button"
-                        :disabled="!valid"
+                        :disabled="!valid || submitting"
                         @click="submit"
                     >
-                        <v-icon color="button-text" class="mr-1" icon="mdi-upload" />
+                        <v-progress-circular v-if="submitting" indeterminate size="20" class="mr-1"/>
+                        <v-icon v-else color="button-text" class="mr-1" icon="mdi-upload" />
                         Upload
                     </v-btn>
                 </v-card-actions>
diff --git a/web/src/components/projects/ProjectConfig.vue b/web/src/components/projects/ProjectConfig.vue
index 26289b78..d080a3b4 100644
--- a/web/src/components/projects/ProjectConfig.vue
+++ b/web/src/components/projects/ProjectConfig.vue
@@ -10,7 +10,7 @@ import {
   deleteProject,
   patchProject,
 } from "@/api/rest";
-import { Project, Dataset } from "@/types";
+import { Project, Dataset, TaskResult } from "@/types";
 
 import { useMapStore, useAppStore, useProjectStore, useLayerStore } from "@/store";
 const projectStore = useProjectStore();
@@ -140,12 +140,7 @@ function selectProject(project: Project) {
   if (selectedProject.value?.id !== project.id) {
     selectedProject.value = project;
     projectStore.loadingDatasets = true;
-    getDatasets().then(async (datasets) => {
-      allDatasets.value = datasets
-      allDatasets.value.forEach((dataset: Dataset) => {
-        layerStore.fetchAvailableLayersForDataset(dataset.id)
-      })
-    })
+    refreshAllDatasets()
     refreshProjectDatasets(null);
   }
 }
@@ -194,6 +189,15 @@ function updateSelectedProject(newProjectData: Project) {
   selectedProject.value = newProjectData;
 }
 
+function refreshAllDatasets() {
+  getDatasets().then(async (datasets) => {
+    allDatasets.value = datasets
+    allDatasets.value.forEach((dataset: Dataset) => {
+      layerStore.fetchAvailableLayersForDataset(dataset.id)
+    })
+  })
+}
+
 function refreshProjectDatasets(callback: Function | null) {
   if (selectedProject.value) {
     getProjectDatasets(selectedProject.value.id).then(async (datasets) => {
@@ -219,6 +223,11 @@ function handleEditFocus(focused: boolean) {
   }
 }
 
+function datasetUploaded(result: {dataset: Dataset, conversionTask: TaskResult}) {
+  refreshAllDatasets()
+  refreshProjectDatasets(null)
+}
+
 onMounted(() => {
   window.addEventListener("keydown", (e) => {
     if (e.key == "Escape" && projectStore.projectConfigMode) {
@@ -492,9 +501,11 @@ watch(() => projectStore.projectConfigMode, () => {
                 <div class="d-flex">
                   <v-card-text>All Datasets</v-card-text>
                   <DatasetUpload
-                    v-if=projectStore.currentProject
+                    v-if="projectStore.currentProject"
                     :allDatasets="allDatasets"
                     :projectPermission="permissions[projectStore.currentProject.id]"
+                    @addToCurrentProject="addDatasetToProject"
+                    @uploaded="datasetUploaded"
                   />
                 </div>
                 <div class="pa-2 dataset-card">

From 3176a309796c00ef1dcd49372182ff1b74cf079e Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 19 Sep 2025 10:29:39 -0400
Subject: [PATCH 09/15] feat: Set up websocket communication for conversion
 task updates

---
 uvdat/asgi.py               |  9 +++++++--
 uvdat/core/notifications.py | 13 +++++++++++++
 web/src/App.vue             |  4 +++-
 web/src/store/conversion.ts | 23 +++++++++++++++++++++++
 web/src/store/index.ts      |  4 +++-
 5 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 web/src/store/conversion.ts

diff --git a/uvdat/asgi.py b/uvdat/asgi.py
index e48ba3c3..e166ad2e 100644
--- a/uvdat/asgi.py
+++ b/uvdat/asgi.py
@@ -6,7 +6,7 @@
 from django.core.asgi import get_asgi_application
 from django.urls import path
 
-from uvdat.core.notifications import AnalyticsConsumer
+from uvdat.core.notifications import AnalyticsConsumer, ConversionConsumer
 
 os.environ['DJANGO_SETTINGS_MODULE'] = 'uvdat.settings'
 if not os.environ.get('DJANGO_CONFIGURATION'):
@@ -23,7 +23,12 @@
                         'ws/analytics/project/<int:project_id>/results/',
                         AnalyticsConsumer.as_asgi(),
                         name='analytics-ws',
-                    )
+                    ),
+                    path(
+                        'ws/conversion/',
+                        ConversionConsumer.as_asgi(),
+                        name='conversion-ws',
+                    ),
                 ]
             )
         ),
diff --git a/uvdat/core/notifications.py b/uvdat/core/notifications.py
index 00adc070..bebdadd1 100644
--- a/uvdat/core/notifications.py
+++ b/uvdat/core/notifications.py
@@ -14,3 +14,16 @@ def disconnect(self, code):
 
     def send_notification(self, event):
         self.send_json(content=event['message'])
+
+
+class ConversionConsumer(JsonWebsocketConsumer):
+    def connect(self):
+        self.group_name = 'conversion'
+        async_to_sync(self.channel_layer.group_add)(self.group_name, self.channel_name)
+        self.accept()
+
+    def disconnect(self, code):
+        async_to_sync(self.channel_layer.group_discard)(self.group_name, self.channel_name)
+
+    def send_notification(self, event):
+        self.send_json(content=event['message'])
diff --git a/web/src/App.vue b/web/src/App.vue
index 98310172..e60974f3 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -5,10 +5,11 @@ import Map from "./components/map/Map.vue";
 import SideBars from "./components/sidebars/SideBars.vue";
 import ControlsBar from "./components/ControlsBar.vue";
 
-import { useAppStore, usePanelStore, useProjectStore } from "@/store";
+import { useAppStore, usePanelStore, useProjectStore, useConversionStore } from "@/store";
 const appStore = useAppStore();
 const panelStore = usePanelStore();
 const projectStore = useProjectStore();
+const conversionStore = useConversionStore();
 
 const showError = computed(() => appStore.currentError !== undefined);
 
@@ -16,6 +17,7 @@ function onReady() {
   if (appStore.currentUser) {
     projectStore.clearState();
     projectStore.loadProjects();
+    conversionStore.createWebSocket();
   }
 }
 
diff --git a/web/src/store/conversion.ts b/web/src/store/conversion.ts
new file mode 100644
index 00000000..0841c53c
--- /dev/null
+++ b/web/src/store/conversion.ts
@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+const url = `${import.meta.env.VITE_APP_API_ROOT}ws/conversion/`
+
+export const useConversionStore = defineStore('conversion', () => {
+    const ws = ref()
+
+    function createWebSocket() {
+        if (!ws.value) {
+            ws.value = new WebSocket(url)
+            ws.value.onmessage = (event: any) => {
+                const data = JSON.parse(JSON.parse(event.data))
+                // TODO handle response
+                console.log(data)
+            }
+        }
+    }
+
+    return {
+        createWebSocket,
+    }
+});
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index beb52887..54d890aa 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -6,6 +6,7 @@ import { useNetworkStore } from './network';
 import { useProjectStore } from './project';
 import { useStyleStore } from './style';
 import { usePanelStore } from './panel';
+import { useConversionStore } from './conversion';
 
 export {
     useAppStore,
@@ -16,4 +17,5 @@ export {
     useProjectStore,
     useStyleStore,
     usePanelStore,
-}
\ No newline at end of file
+    useConversionStore,
+}

From 44a8cb394f9e9adb769d8bc628cfcb96324ade8e Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 19 Sep 2025 10:44:35 -0400
Subject: [PATCH 10/15] fix: Update handling of `layer_options` in dataset
 conversion

---
 uvdat/core/tasks/dataset.py | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/uvdat/core/tasks/dataset.py b/uvdat/core/tasks/dataset.py
index 163d776c..d7d276af 100644
--- a/uvdat/core/tasks/dataset.py
+++ b/uvdat/core/tasks/dataset.py
@@ -26,11 +26,11 @@ def create_layers_and_frames(dataset, layer_options=None):
             frames = []
             kwargs = dict(dataset=dataset)
             data_name = layer_info.get('data')
-            source_file_name = layer_info.get('source_file')
+            source_file_names = layer_info.get('source_files')
             if data_name is not None:
                 kwargs['name'] = data_name
-            if source_file_name is not None:
-                kwargs['source_file__name'] = source_file_name
+            if source_file_names is not None:
+                kwargs['source_file__name__in'] = source_file_names
 
             for layer_data in [
                 *VectorData.objects.filter(**kwargs).order_by('name').all(),
@@ -40,6 +40,7 @@ def create_layers_and_frames(dataset, layer_options=None):
                 additional_filters = layer_info.get('additional_filters', {})
                 metadata = layer_data.metadata or {}
                 bands = metadata.get('bands')
+                raster_frames = metadata.get('frames')
                 summary = layer_data.summary if hasattr(layer_data, 'summary') else {}
                 properties = summary.get('properties')
                 if properties and frame_property and frame_property in properties:
@@ -54,7 +55,7 @@ def create_layers_and_frames(dataset, layer_options=None):
                                         index=len(frames),
                                         data=layer_data.name,
                                         source_filters=dict(
-                                            frame_property=value, **additional_filters
+                                            **{frame_property: value}, **additional_filters
                                         ),
                                     )
                                 )
@@ -66,10 +67,23 @@ def create_layers_and_frames(dataset, layer_options=None):
                                         name=f'Frame {i}',
                                         index=len(frames),
                                         data=layer_data.name,
-                                        source_filters=dict(frame_property=i, **additional_filters),
+                                        source_filters=dict(
+                                            **{frame_property: i}, **additional_filters
+                                        ),
                                     )
                                 )
-                elif bands and len(bands) > 1:
+                elif frame_property == 'frame' and raster_frames and len(raster_frames) > 1:
+                    for raster_frame in raster_frames:
+                        i = raster_frame.get('Index')
+                        frames.append(
+                            dict(
+                                name=i,
+                                index=i,
+                                data=layer_data.name,
+                                source_filters=dict(frame=i),
+                            )
+                        )
+                elif frame_property == 'band' and bands and len(bands) > 1:
                     for band in bands:
                         frames.append(
                             dict(

From c08b5a503f37ab1dd3c77f38580ab4a3bba32119 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 24 Sep 2025 16:32:39 -0400
Subject: [PATCH 11/15] feat: Display conversion task status / error next to
 processing datasets

---
 web/src/components/projects/DatasetSelect.vue | 24 +++++++++++++++--
 web/src/components/sidebars/DatasetsPanel.vue | 26 +++++++++++++++++--
 web/src/store/conversion.ts                   | 14 +++++++---
 web/src/store/project.ts                      |  1 +
 4 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/web/src/components/projects/DatasetSelect.vue b/web/src/components/projects/DatasetSelect.vue
index d0dfd955..971dd6fb 100644
--- a/web/src/components/projects/DatasetSelect.vue
+++ b/web/src/components/projects/DatasetSelect.vue
@@ -3,9 +3,10 @@ import { computed } from 'vue';
 import DatasetList from '@/components/DatasetList.vue'
 import DetailView from '@/components/DetailView.vue'
 import { Dataset } from '@/types';
-import { useLayerStore } from '@/store';
 
+import { useLayerStore, useConversionStore } from '@/store';
 const layerStore = useLayerStore();
+const conversionStore = useConversionStore();
 
 const props = defineProps<{
   datasets: Dataset[] | undefined;
@@ -36,8 +37,27 @@ const datasetsWithLayers = computed(() => {
           <v-expansion-panel-title>
             <div style="display: flex; justify-content: space-between; width: 100%;">
               <div>
+                <div
+                  v-if="conversionStore.datasetConversionTasks[dataset.id] && !conversionStore.datasetConversionTasks[dataset.id].completed"
+                  style="display: inline-block"
+                >
+                  <v-icon
+                    v-if="conversionStore.datasetConversionTasks[dataset.id].error"
+                    v-tooltip="conversionStore.datasetConversionTasks[dataset.id].error"
+                    icon="mdi-alert-outline"
+                    color="error"
+                    class="mr-5"
+                  />
+                  <v-progress-circular
+                    v-else
+                    v-tooltip="conversionStore.datasetConversionTasks[dataset.id].status"
+                    size="24"
+                    class="mr-5"
+                    indeterminate
+                  />
+                </div>
                 <v-progress-circular
-                  v-if="props.savingId === dataset.id"
+                  v-else-if="props.savingId === dataset.id"
                   size="24"
                   class="mr-5"
                   indeterminate
diff --git a/web/src/components/sidebars/DatasetsPanel.vue b/web/src/components/sidebars/DatasetsPanel.vue
index da2dfbec..bda7878b 100644
--- a/web/src/components/sidebars/DatasetsPanel.vue
+++ b/web/src/components/sidebars/DatasetsPanel.vue
@@ -4,8 +4,9 @@ import DatasetList from '@/components/DatasetList.vue'
 import DetailView from '@/components/DetailView.vue'
 import { Dataset, Layer } from '@/types';
 
-import { useLayerStore } from '@/store';
+import { useLayerStore, useConversionStore } from '@/store';
 const layerStore = useLayerStore();
+const conversionStore = useConversionStore();
 
 const props = defineProps<{
   datasets: Dataset[] | undefined;
@@ -39,7 +40,28 @@ function toggleSelected(items: Layer[]) {
           <v-expansion-panel-title>
             <div style="display: flex; justify-content: space-between; width: 100%;">
               <div class="item-title" style="margin-left: 12px">
-                {{ dataset.name }}
+                <div>
+                  <div
+                    v-if="conversionStore.datasetConversionTasks[dataset.id] && !conversionStore.datasetConversionTasks[dataset.id].completed"
+                    style="display: inline-block"
+                  >
+                    <v-icon
+                      v-if="conversionStore.datasetConversionTasks[dataset.id].error"
+                      v-tooltip="conversionStore.datasetConversionTasks[dataset.id].error"
+                      icon="mdi-alert-outline"
+                      color="error"
+                      class="mr-2"
+                    />
+                    <v-progress-circular
+                      v-else
+                      v-tooltip="conversionStore.datasetConversionTasks[dataset.id].status"
+                      size="18"
+                      class="mr-2"
+                      indeterminate
+                    />
+                  </div>
+                  {{ dataset.name }}
+                </div>
                 <div style="min-width: 75px; text-align: right" v-if="dataset.layers">
                   <v-icon
                     icon="mdi-layers-outline"
diff --git a/web/src/store/conversion.ts b/web/src/store/conversion.ts
index 0841c53c..21c62e06 100644
--- a/web/src/store/conversion.ts
+++ b/web/src/store/conversion.ts
@@ -1,23 +1,31 @@
+import { TaskResult } from '@/types';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
+import { useProjectStore } from './project';
 
 const url = `${import.meta.env.VITE_APP_API_ROOT}ws/conversion/`
 
 export const useConversionStore = defineStore('conversion', () => {
+    const projectStore = useProjectStore();
     const ws = ref()
+    const datasetConversionTasks = ref<Record<number, TaskResult>>({})
 
     function createWebSocket() {
         if (!ws.value) {
             ws.value = new WebSocket(url)
             ws.value.onmessage = (event: any) => {
-                const data = JSON.parse(JSON.parse(event.data))
-                // TODO handle response
-                console.log(data)
+                const result = JSON.parse(JSON.parse(event.data)) as TaskResult
+                const datasetId = result.inputs.dataset_id
+                if (datasetId !== undefined) {
+                    datasetConversionTasks.value[datasetId] = result
+                    if (result.completed) projectStore.fetchProjectDatasets();
+                }
             }
         }
     }
 
     return {
+        datasetConversionTasks,
         createWebSocket,
     }
 });
diff --git a/web/src/store/project.ts b/web/src/store/project.ts
index cebb1d66..2ada753b 100644
--- a/web/src/store/project.ts
+++ b/web/src/store/project.ts
@@ -102,6 +102,7 @@ export const useProjectStore = defineStore('project', () => {
         projectConfigMode,
         loadingDatasets,
         availableDatasets,
+        fetchProjectDatasets,
         clearState,
         clearProjectState,
         loadProjects,

From df8ac65af6d4bb6c02042d06a2d386d57c9945c0 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 24 Sep 2025 16:33:09 -0400
Subject: [PATCH 12/15] fix: Apply source filters from frame definitions

---
 web/src/store/map.ts   | 21 +++++++++++++++++++--
 web/src/store/style.ts |  8 +++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/web/src/store/map.ts b/web/src/store/map.ts
index cc93ded1..c3cec4a3 100644
--- a/web/src/store/map.ts
+++ b/web/src/store/map.ts
@@ -10,6 +10,7 @@ import {
   MapLibreLayerWithMetadata,
   MapLibreLayerMetadata,
   Layer,
+  StyleFilter,
 } from '@/types';
 import {
   Map, MapLayerMouseEvent,
@@ -19,7 +20,7 @@ import {
 import { getRasterDataValues } from '@/api/rest';
 import { baseURL } from '@/api/auth';
 import proj4 from 'proj4';
-import { useStyleStore } from './style';
+import { useStyleStore, useLayerStore } from '.';
 
 function getLayerIsVisible(layer: MapLibreLayerWithMetadata) {
   // Since visibility must be 'visible' for a feature click to even be registered,
@@ -133,6 +134,7 @@ export const useMapStore = defineStore('map', () => {
   const rasterTooltipDataCache = ref<Record<number, RasterDataValues | undefined>>({});
 
   const styleStore = useStyleStore();
+  const layerStore = useLayerStore();
 
   function handleLayerClick(e: MapLayerMouseEvent) {
     const map = getMap();
@@ -430,8 +432,23 @@ export const useMapStore = defineStore('map', () => {
     const queryParams: { projection: string, style?: string } = { projection: 'epsg:3857' }
     const { layerId, layerCopyId } = parseSourceString(sourceId);
     const styleSpec = styleStore.selectedLayerStyles[`${layerId}.${layerCopyId}`].style_spec;
+    let filters: StyleFilter[] = []
+    const layer = layerStore.selectedLayers.find((l: Layer) => l.id = layerId)
+    if (layer) {
+      const frames = layerStore.layerFrames(layer)
+      const frame = frames.find((f: LayerFrame) => f.index === layer.current_frame_index)
+      if (frame?.source_filters) {
+        filters = Object.entries(frame.source_filters).map(([k, v]) => ({
+          filter_by: k,
+          list: [v],
+          include: true,
+          transparency: true,
+          apply: true,
+        }))
+      }
+    }
     if (styleSpec) {
-      const styleParams = styleStore.getRasterTilesQuery(styleSpec)
+      const styleParams = styleStore.getRasterTilesQuery({...styleSpec, filters})
       if (styleParams) queryParams.style = JSON.stringify(styleParams)
     }
     const query = new URLSearchParams(queryParams)
diff --git a/web/src/store/style.ts b/web/src/store/style.ts
index 2518c62a..a46e0f98 100644
--- a/web/src/store/style.ts
+++ b/web/src/store/style.ts
@@ -96,6 +96,11 @@ function getRasterTilesQuery(styleSpec: StyleSpec) {
             if (colorSpec.colormap && colorSpec.visible) query.bands.push(colorQuery)
         }
     })
+    styleSpec.filters.forEach((f) => {
+        if (f.apply && f.filter_by && f.include && f.list?.length === 1) {
+            query[f.filter_by] = f.list[0]
+        }
+    })
     if (!Object.keys(query).length) return undefined
     return query;
 }
@@ -348,6 +353,7 @@ export const useStyleStore = defineStore('style', () => {
                     list: [v],
                     include: true,
                     transparency: true,
+                    apply: true,
                 }))
             ]
         }
@@ -394,7 +400,7 @@ export const useStyleStore = defineStore('style', () => {
                 map.setPaintProperty(mapLayerId, 'circle-stroke-opacity', visibility)
             }
         } else if (mapLayerId.includes("raster")) {
-            const rasterTilesQuery = getRasterTilesQuery(styleSpec)
+            const rasterTilesQuery = getRasterTilesQuery({...styleSpec, filters})
             if (rasterTilesQuery?.bands && !rasterTilesQuery.bands.length) opacity = 0
             map.setPaintProperty(mapLayerId, "raster-opacity", opacity)
             let source = map.getSource(mapLayer.source) as RasterTileSource;

From 4bcd43ee8db12951b9f63729c3cc3db91d3fb48e Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 25 Sep 2025 12:02:35 -0400
Subject: [PATCH 13/15] fix: Don't use `large_image_converter` on multiframe
 raster files

---
 uvdat/core/tasks/conversion.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/uvdat/core/tasks/conversion.py b/uvdat/core/tasks/conversion.py
index 71d0d531..7c2ba1ec 100644
--- a/uvdat/core/tasks/conversion.py
+++ b/uvdat/core/tasks/conversion.py
@@ -32,6 +32,11 @@ def get_cog_path(file):
         source = large_image.open(file)
         if source.geospatial:
             raster_path = file
+            metadata = source.getMetadata()
+            if len(metadata.get('frames', [])) > 1:
+                # If multiframe, return early;
+                # large_image_converter is not multiframe-compatible yet
+                return raster_path
     except large_image.exceptions.TileSourceError:
         pass
 

From ec80eaac429c814a7a0ffcb34f0ea8e2c0e82267 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 26 Sep 2025 09:32:26 -0400
Subject: [PATCH 14/15] fix: Update label of category combobox

---
 web/src/components/projects/DatasetUpload.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/projects/DatasetUpload.vue b/web/src/components/projects/DatasetUpload.vue
index d9da84e3..6cdf17de 100644
--- a/web/src/components/projects/DatasetUpload.vue
+++ b/web/src/components/projects/DatasetUpload.vue
@@ -188,7 +188,7 @@ watch(open, () => {
                         hide-details="auto"
                     />
                     <v-combobox
-                        label="Combobox"
+                        label="Category"
                         v-model="category"
                         :items="categories"
                         :rules="mandatoryRule"

From 9b6292b135c4e24f7bfcbbe3d506e3229565141d Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 26 Sep 2025 09:35:09 -0400
Subject: [PATCH 15/15] fix: raise `StopConsumer` in django-channels
 `disconnect` functions

---
 uvdat/core/notifications.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/uvdat/core/notifications.py b/uvdat/core/notifications.py
index bebdadd1..7cbaf3b3 100644
--- a/uvdat/core/notifications.py
+++ b/uvdat/core/notifications.py
@@ -1,4 +1,5 @@
 from asgiref.sync import async_to_sync
+from channels.exceptions import StopConsumer
 from channels.generic.websocket import JsonWebsocketConsumer
 
 
@@ -11,6 +12,7 @@ def connect(self):
 
     def disconnect(self, code):
         async_to_sync(self.channel_layer.group_discard)(self.group_name, self.channel_name)
+        raise StopConsumer()
 
     def send_notification(self, event):
         self.send_json(content=event['message'])
@@ -24,6 +26,7 @@ def connect(self):
 
     def disconnect(self, code):
         async_to_sync(self.channel_layer.group_discard)(self.group_name, self.channel_name)
+        raise StopConsumer()
 
     def send_notification(self, event):
         self.send_json(content=event['message'])