From e7b29bb00b2da2ab96e61cd7dbe1881ece13c5b2 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 14 Aug 2024 16:58:17 +0000
Subject: [PATCH 01/40] feat: Add basic ProjectConfig component

---
 web/src/App.vue                      |   3 +
 web/src/api/rest.ts                  |  25 ++++
 web/src/components/ProjectConfig.vue | 213 +++++++++++++++++++++++++++
 web/src/storeFunctions.ts            |  11 ++
 4 files changed, 252 insertions(+)
 create mode 100644 web/src/components/ProjectConfig.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index 2dd46d92..9e5853b3 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -16,6 +16,7 @@ import MainDrawerContents from "./components/MainDrawerContents.vue";
 import OptionsDrawerContents from "./components/OptionsDrawerContents.vue";
 import ChartJS from "./components/ChartJS.vue";
 import SimulationsPanel from "./components/SimulationsPanel.vue";
+import ProjectConfig from "./components/ProjectConfig.vue";
 
 export default defineComponent({
   components: {
@@ -24,6 +25,7 @@ export default defineComponent({
     OptionsDrawerContents,
     ChartJS,
     SimulationsPanel,
+    ProjectConfig,
   },
   setup() {
     const drawer = ref(false);
@@ -103,6 +105,7 @@ export default defineComponent({
       />
       <v-toolbar-title>UVDAT</v-toolbar-title>
       <v-spacer />
+      <ProjectConfig />
       <v-select
         label="Select Project"
         v-model="currentProject"
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index f4b10342..36a6becd 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -16,6 +16,31 @@ export async function getProjects(): Promise<Project[]> {
   return (await apiClient.get("projects")).data.results;
 }
 
+export async function createProject(
+  name: string,
+  default_map_center: number[],
+  default_map_zoom: number
+): Promise<Project> {
+  return (
+    await apiClient.post("projects/", {
+      name,
+      default_map_center,
+      default_map_zoom,
+    })
+  ).data;
+}
+
+export async function patchProject(
+  projectId: number,
+  data: object
+): Promise<Project> {
+  return await apiClient.patch(`projects/${projectId}/`, data);
+}
+
+export async function deleteProject(projectId: number): Promise<Project> {
+  return await apiClient.delete(`projects/${projectId}/`).data;
+}
+
 export async function getProjectDatasets(
   projectId: number
 ): Promise<Dataset[]> {
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
new file mode 100644
index 00000000..107f24e7
--- /dev/null
+++ b/web/src/components/ProjectConfig.vue
@@ -0,0 +1,213 @@
+<script lang="ts">
+import { ref, watch } from "vue";
+import { currentUser, currentProject, availableProjects } from "@/store";
+import { createProject, patchProject, deleteProject } from "@/api/rest";
+import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
+
+export default {
+  setup() {
+    const newProjectName = ref();
+    const savedPosition = ref(false);
+    const currentTab = ref(0);
+
+    function create() {
+      const { center, zoom } = getCurrentMapPosition();
+      createProject(newProjectName.value, center, zoom).then(() => {
+        newProjectName.value = undefined;
+        loadProjects();
+      });
+    }
+
+    function del() {
+      if (currentProject.value) {
+        deleteProject(currentProject.value.id).then(() => {
+          currentProject.value = undefined;
+          loadProjects();
+        });
+      }
+    }
+
+    function savePosition() {
+      if (currentProject.value) {
+        const { center, zoom } = getCurrentMapPosition();
+        patchProject(currentProject.value.id, {
+          default_map_center: center,
+          default_map_zoom: zoom,
+        }).then((proj) => {
+          if (proj) {
+            if (currentProject.value) {
+              currentProject.value.default_map_center = proj.default_map_center;
+              currentProject.value.default_map_zoom = proj.default_map_zoom;
+            }
+            savedPosition.value = true;
+          }
+        });
+      }
+    }
+
+    watch(currentProject, () => {
+      newProjectName.value = undefined;
+      savedPosition.value = false;
+    });
+
+    return {
+      currentUser,
+      currentProject,
+      availableProjects,
+      newProjectName,
+      savedPosition,
+      currentTab,
+      create,
+      del,
+      savePosition,
+    };
+  },
+};
+</script>
+
+<template>
+  <v-dialog max-width="70%" max-height="90%">
+    <template v-slot:activator="{ props: activatorProps }">
+      <v-btn v-bind="activatorProps" variant="flat" icon>
+        <v-icon>mdi-cog</v-icon>
+      </v-btn>
+    </template>
+
+    <template v-slot:default="{ isActive }">
+      <v-card title="Project Config">
+        <v-btn
+          style="position: absolute; right: 0"
+          variant="flat"
+          icon
+          @click="isActive.value = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+
+        <div class="d-flex pa-2">
+          <div>
+            <v-tabs
+              v-model="currentProject"
+              v-if="availableProjects.length"
+              :mandatory="false"
+              direction="vertical"
+              prev-icon="mdi-menu-up"
+              next-icon="mdi-menu-down"
+              style="max-height: 60vh"
+            >
+              <v-tab
+                v-for="project in availableProjects"
+                :key="project.id"
+                :value="project"
+              >
+                {{ project.name }}
+              </v-tab>
+            </v-tabs>
+            <v-card-text v-else> You do not have any projects. </v-card-text>
+            <v-expansion-panels>
+              <v-expansion-panel title="Create New Project">
+                <v-expansion-panel-text>
+                  <v-form @submit.prevent="create">
+                    <v-text-field
+                      v-model="newProjectName"
+                      label="Name"
+                      :autofocus="true"
+                    ></v-text-field>
+                    <v-btn v-if="newProjectName" color="green" type="submit">
+                      Create
+                    </v-btn>
+                  </v-form>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </div>
+
+          <div v-if="!currentProject" class="pa-3">
+            Select a Project from the list.
+          </div>
+          <v-tabs-window
+            v-model="currentProject"
+            direction="vertical"
+            style="flex: 1; align-self: stretch"
+          >
+            <v-tabs-window-item
+              v-for="project in availableProjects"
+              :key="project.id"
+              :value="project"
+              class="fill"
+            >
+              <v-card
+                variant="outlined"
+                :title="project.name"
+                class="fill pb-10"
+              >
+                <v-tabs v-model="currentTab">
+                  <v-tab value="0">Dataset Selection</v-tab>
+                  <v-tab value="1">Access Control</v-tab>
+                </v-tabs>
+                <v-tabs-window v-model="currentTab">
+                  <v-tabs-window-item value="0">
+                    <div class="pa-2">TODO</div>
+                  </v-tabs-window-item>
+                  <v-tabs-window-item value="1">
+                    <div class="pa-2">TODO</div>
+                  </v-tabs-window-item>
+                </v-tabs-window>
+
+                <div
+                  class="d-flex"
+                  style="
+                    position: absolute;
+                    bottom: 0;
+                    width: 100%;
+                    justify-content: space-between;
+                  "
+                >
+                  <v-btn
+                    v-if="!savedPosition"
+                    @click="savePosition"
+                    style="max-width: 50%"
+                  >
+                    Set current map position as project default
+                  </v-btn>
+                  <v-card-text v-else>Saved Default Map Position.</v-card-text>
+                  <v-btn v-if="currentUser?.is_superuser" color="red">
+                    Delete Project
+                    <v-dialog
+                      v-if="currentUser?.is_superuser"
+                      activator="parent"
+                      max-width="300"
+                    >
+                      <template v-slot:default="{ isActive }">
+                        <v-card class="pa-3">
+                          <v-card-title>
+                            Delete {{ currentProject?.name }}?
+                          </v-card-title>
+                          <v-btn
+                            @click="isActive.value = false"
+                            text="Cancel"
+                          />
+                          <v-btn @click="del" color="red" text="Confirm" />
+                        </v-card>
+                      </template>
+                    </v-dialog>
+                  </v-btn>
+                </div>
+              </v-card>
+            </v-tabs-window-item>
+          </v-tabs-window>
+        </div>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+
+<style>
+.fill {
+  height: 100%;
+  width: 100%;
+}
+.v-window__container {
+  height: 100% !important;
+}
+</style>
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index 231d025f..460d0775 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -104,6 +104,17 @@ export function setMapCenter() {
   map.jumpTo({ center, zoom });
 }
 
+export function getCurrentMapPosition() {
+  const map = getMap();
+  let center = [0, 0];
+  let zoom = map.getZoom();
+  const centerLngLat = map.getCenter();
+  if (centerLngLat) center = [centerLngLat.lat, centerLngLat.lng];
+  if (zoom) zoom = Math.floor(zoom);
+  else zoom = 1;
+  return { center, zoom };
+}
+
 export function loadDatasets() {
   if (!currentProject.value) return;
   availableDatasets.value = undefined;

From 13f00ead7791a53c42140276f11d984af9fc8ab5 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 16 Sep 2024 18:51:42 +0000
Subject: [PATCH 02/40] ui: Redesign main drawer contents

---
 web/src/App.vue                           |  34 +-
 web/src/components/DatasetList.vue        | 296 +++++++++++++++++
 web/src/components/MainDrawerContents.vue | 369 ++++++----------------
 web/src/components/ProjectContents.vue    | 127 ++++++++
 web/src/types.ts                          |   7 +
 5 files changed, 527 insertions(+), 306 deletions(-)
 create mode 100644 web/src/components/DatasetList.vue
 create mode 100644 web/src/components/ProjectContents.vue

diff --git a/web/src/App.vue b/web/src/App.vue
index 9e5853b3..15c01dec 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -16,7 +16,6 @@ import MainDrawerContents from "./components/MainDrawerContents.vue";
 import OptionsDrawerContents from "./components/OptionsDrawerContents.vue";
 import ChartJS from "./components/ChartJS.vue";
 import SimulationsPanel from "./components/SimulationsPanel.vue";
-import ProjectConfig from "./components/ProjectConfig.vue";
 
 export default defineComponent({
   components: {
@@ -25,10 +24,9 @@ export default defineComponent({
     OptionsDrawerContents,
     ChartJS,
     SimulationsPanel,
-    ProjectConfig,
   },
   setup() {
-    const drawer = ref(false);
+    const drawer = ref(true);
     const showError = computed(() => currentError.value !== undefined);
 
     function onReady() {
@@ -43,9 +41,6 @@ export default defineComponent({
 
     onMounted(onReady);
     watch(currentUser, onReady);
-    watch(currentProject, () => {
-      drawer.value = currentProject.value !== undefined;
-    });
 
     return {
       login,
@@ -99,23 +94,9 @@ export default defineComponent({
       </v-card>
     </v-overlay>
     <v-app-bar app prominent>
-      <v-app-bar-nav-icon
-        v-if="currentProject"
-        @click.stop="drawer = !drawer"
-      />
+      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
       <v-toolbar-title>UVDAT</v-toolbar-title>
       <v-spacer />
-      <ProjectConfig />
-      <v-select
-        label="Select Project"
-        v-model="currentProject"
-        :items="availableProjects"
-        item-title="name"
-        density="compact"
-        return-object
-        style="margin-top: 15px"
-      />
-      <v-spacer />
       <div v-if="currentUser" class="px-3">
         {{ currentUser.first_name }}
         <v-btn icon>
@@ -133,10 +114,9 @@ export default defineComponent({
       </div>
     </v-app-bar>
     <v-navigation-drawer
-      v-if="currentProject"
       v-model="drawer"
       permanent
-      width="300"
+      width="350"
       class="main-area drawer"
     >
       <MainDrawerContents />
@@ -177,12 +157,12 @@ export default defineComponent({
   left: 250px;
 }
 .shifted-1 {
-  left: 300px;
-  width: calc(100% - 300px);
+  left: 350px;
+  width: calc(100% - 350px);
 }
 .shifted-2 {
-  left: 300px;
+  left: 350px;
   right: 300px;
-  width: calc(100% - 600px);
+  width: calc(100% - 650px);
 }
 </style>
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
new file mode 100644
index 00000000..9b785016
--- /dev/null
+++ b/web/src/components/DatasetList.vue
@@ -0,0 +1,296 @@
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { onMounted, ref, Ref, computed } from "vue";
+import { Dataset } from "@/types";
+import { selectedDatasets } from "../store";
+import { getDatasetLayers } from "@/api/rest";
+
+export default {
+  props: {
+    datasets: {
+      required: true,
+      type: Array,
+    },
+    detail: {
+      default: true,
+      type: Boolean,
+    },
+  },
+  setup(props: any) {
+    const groupByOptions = ["category", "dataset_type"];
+    const groupByKey = ref(["category"]);
+    const filterMenuItems: Ref<Record<string, string[]>> = ref({});
+    const filters: Ref<Record<string, string[]>> = ref({});
+    const searchText = ref();
+    const selectedIds = computed(() =>
+      selectedDatasets.value.map((d2) => d2.id)
+    );
+    const filteredDatasets = computed(() => {
+      return props.datasets.filter((dataset: any) => {
+        const searchMatch =
+          !searchText.value ||
+          dataset.name.toLowerCase().includes(searchText.value.toLowerCase());
+        const filterMatch = Object.entries(filters.value).every(
+          ([filter_type, values]) => {
+            return (
+              !values.length ||
+              values
+                .map((v) => v.toLowerCase())
+                .includes(dataset[filter_type].toLowerCase())
+            );
+          }
+        );
+        return searchMatch && filterMatch;
+      });
+    });
+    const datasetGroups = computed(() => {
+      const groups: Record<string, Dataset[]> = {};
+      filteredDatasets.value.forEach((dataset: any) => {
+        const groupName = dataset[groupByKey.value[0]];
+        if (!groups[groupName]) {
+          groups[groupName] = [];
+        }
+        groups[groupName].push(dataset);
+      });
+      return groups;
+    });
+
+    function fetchAllLayers() {
+      props.datasets.forEach(async (dataset: Dataset) => {
+        dataset.map_layers = await getDatasetLayers(dataset.id);
+      });
+    }
+
+    function populateFilterMenu() {
+      filterMenuItems.value = Object.fromEntries(
+        groupByOptions.map((opt) => [opt, []])
+      );
+      filters.value = Object.fromEntries(
+        groupByOptions.map((opt) => [opt, []])
+      );
+      props.datasets.forEach((dataset: any) => {
+        groupByOptions.forEach((opt) => {
+          const value = dataset[opt].toLowerCase();
+          if (!filterMenuItems.value[opt].includes(value)) {
+            filterMenuItems.value[opt].push(value);
+          }
+        });
+      });
+    }
+
+    function toggleDatasets(show: unknown, datasets: Dataset[]) {
+      datasets.forEach((dataset) => {
+        if (show && !selectedIds.value.includes(dataset.id)) {
+          selectedDatasets.value.push(dataset);
+        } else if (!show) {
+          selectedDatasets.value = selectedDatasets.value.filter((d) => {
+            d.id != dataset.id;
+          });
+        }
+      });
+      // TODO: Pair program with Jake
+      // Update map layers with selected datasets
+    }
+
+    onMounted(fetchAllLayers);
+    onMounted(populateFilterMenu);
+
+    return {
+      groupByOptions,
+      groupByKey,
+      filterMenuItems,
+      filters,
+      datasetGroups,
+      selectedIds,
+      searchText,
+      toggleDatasets,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="px-1">
+    <div class="d-flex" style="align-items: center">
+      <v-text-field
+        v-model="searchText"
+        label="Search Datasets"
+        variant="outlined"
+        density="compact"
+        class="ml-3"
+        append-inner-icon="mdi-magnify"
+        hide-details
+      />
+      <v-icon icon="mdi-filter" class="mx-1" id="filter-datasets" />
+      <v-menu
+        activator="#filter-datasets"
+        open-on-hover
+        :close-on-content-click="false"
+      >
+        <v-card>
+          <v-card-text style="background-color: lightgrey" class="py-2">
+            Group by
+          </v-card-text>
+          <v-list
+            density="compact"
+            selectable
+            mandatory
+            select-strategy="single-leaf"
+            v-model:selected="groupByKey"
+          >
+            <v-list-item
+              v-for="option in groupByOptions"
+              :key="option"
+              :value="option"
+            >
+              <v-list-item-title class="capitalize">
+                {{ option.replace("_", " ") }}
+              </v-list-item-title>
+              <template v-slot:append="{ isSelected }">
+                <v-checkbox
+                  :model-value="isSelected"
+                  density="compact"
+                  class="ml-4"
+                  style="vertical-align: bottom"
+                  hide-details
+                />
+              </template>
+            </v-list-item>
+          </v-list>
+          <v-card-text style="background-color: lightgrey" class="py-2">
+            Filter by
+          </v-card-text>
+          <v-list density="compact">
+            <v-list-item
+              v-for="option in Object.keys(filterMenuItems)"
+              :key="option"
+            >
+              <v-list-item-title class="capitalize">
+                {{ option.replace("_", " ") }}
+              </v-list-item-title>
+              <template v-slot:append>
+                <v-icon icon="mdi-menu-right" size="x-small"></v-icon>
+              </template>
+
+              <v-menu
+                activator="parent"
+                location="end"
+                open-on-hover
+                :close-on-content-click="false"
+              >
+                <v-list
+                  density="compact"
+                  selectable
+                  select-strategy="leaf"
+                  v-model:selected="filters[option]"
+                >
+                  <v-list-item
+                    v-for="value in filterMenuItems[option]"
+                    :key="value"
+                    :value="value"
+                  >
+                    <v-list-item-title class="capitalize">
+                      {{ value }}
+                    </v-list-item-title>
+                    <template v-slot:append="{ isSelected }">
+                      <v-checkbox
+                        :model-value="isSelected"
+                        density="compact"
+                        class="ml-4"
+                        style="vertical-align: bottom"
+                        hide-details
+                      />
+                    </template>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
+    </div>
+    <div
+      v-for="groupName in Object.keys(datasetGroups)"
+      :key="groupName"
+      class="group py-1"
+    >
+      <v-checkbox
+        true-icon="mdi-eye-outline"
+        false-icon="mdi-eye-off-outline"
+        style="display: inline-block"
+        density="compact"
+        hide-details
+        :model-value="
+          datasetGroups[groupName].every((d) => selectedIds.includes(d.id))
+        "
+        @update:model-value="(v) => toggleDatasets(v, datasetGroups[groupName])"
+      />
+      <v-card-subtitle class="group-title capitalize text-caption px-1">
+        {{ groupByKey[0].replace("_", " ") }}: {{ groupName.toLowerCase() }}
+      </v-card-subtitle>
+      <div
+        v-for="dataset in datasetGroups[groupName]"
+        :key="dataset.id"
+        class="d-flex pb-3"
+        style="flex-direction: column"
+      >
+        <div class="d-flex" style="column-gap: 5px; align-items: center">
+          <v-checkbox
+            true-icon="mdi-eye-outline"
+            false-icon="mdi-eye-off-outline"
+            style="display: inline-block"
+            density="compact"
+            hide-details
+            :model-value="selectedIds.includes(dataset.id)"
+            @update:model-value="(v) => toggleDatasets(v, [dataset])"
+          />
+          {{ dataset.name }}
+        </div>
+        <div
+          v-if="detail"
+          class="d-flex pl-7 pr-3"
+          style="column-gap: 5px; justify-content: space-between"
+        >
+          <div>
+            <v-chip color="primary" size="x-small" class="mr-1 capitalize">
+              category: {{ dataset.category }}
+            </v-chip>
+            <v-chip color="primary" size="x-small" class="capitalize">
+              type: {{ dataset.dataset_type.toLowerCase() }}
+            </v-chip>
+          </div>
+          <span
+            v-if="dataset.map_layers"
+            class="text-caption"
+            style="color: grey"
+          >
+            <v-icon icon="mdi-layers-outline" size="small" />
+            {{ dataset.map_layers.length }}
+            <v-tooltip activator="parent" location="end">
+              Number of Layers
+            </v-tooltip>
+          </span>
+        </div>
+        <div v-if="detail" class="text-caption pl-8 pr-1" style="color: grey">
+          {{ dataset.description }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.group {
+  border-bottom: 1px solid lightgray;
+}
+.group-title {
+  display: inline-block !important;
+  vertical-align: super !important;
+}
+.v-input--density-compact {
+  --v-input-control-height: 10px;
+}
+.capitalize {
+  text-transform: capitalize !important;
+}
+</style>
diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 987230ac..cc9de39c 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -1,305 +1,116 @@
 <script lang="ts">
-import { ref, computed, watch } from "vue";
-import {
-  availableCharts,
-  currentChart,
-  selectedDatasets,
-  availableDatasets,
-  availableSimulationTypes,
-  currentSimulationType,
-  availableDerivedRegions,
-  currentDataset,
-  availableDatasetLayers,
-  selectedDerivedRegions,
-} from "@/store";
-import {
-  loadDatasets,
-  loadCharts,
-  loadSimulationTypes,
-  loadDerivedRegions,
-} from "../storeFunctions";
-import { Dataset, DerivedRegion } from "@/types";
-import { getDatasetLayers } from "@/api/rest";
-import { getDatasetLayerForDataObject, toggleDatasetLayer } from "@/layers";
+import { ref, computed } from "vue";
+import { availableProjects, currentProject } from "@/store";
+import ProjectContents from "./ProjectContents.vue";
 
 export default {
+  components: { ProjectContents },
   setup() {
-    const openPanels = ref([0]);
-
-    const expandedDatasetGroups = ref<string[]>([]);
-
-    const availableDatasetGroups = computed(() => {
-      if (!availableDatasets.value) return [];
-      const groupKey = "category";
-      const datasetGroups: Record<string, Dataset[]> = {};
-      availableDatasets.value.forEach((dataset: Dataset) => {
-        const currentGroup = dataset[groupKey];
-        if (!datasetGroups[currentGroup]) datasetGroups[currentGroup] = [];
-        datasetGroups[currentGroup].push(dataset);
+    const searchText = ref();
+    const filteredProjects = computed(() => {
+      return availableProjects.value.filter((proj) => {
+        return (
+          !searchText.value ||
+          proj.name.toLowerCase().includes(searchText.value.toLowerCase())
+        );
       });
-
-      const ret: {
-        id: number;
-        datasets: Dataset[];
-        name: string;
-      }[] = Object.entries(datasetGroups)
-        .map(([name, datasets], index) => ({
-          id: index,
-          datasets,
-          name,
-        }))
-        .sort((a, b) => b.name.localeCompare(a.name));
-      return ret;
     });
 
-    const activeLayerTableHeaders = [{ text: "Name", value: "name" }];
-
-    async function toggleDerivedRegion(derivedRegion: DerivedRegion) {
-      const datasetLayer = await getDatasetLayerForDataObject(derivedRegion);
-      toggleDatasetLayer(datasetLayer);
+    function openProjectConfig(create = false) {
+      // TODO: open project config
+      console.log("Open project config. create=", create);
     }
 
-    async function toggleDataset(dataset: Dataset) {
-      if (
-        !selectedDatasets.value.map((d) => d.id).includes(dataset.id) &&
-        currentDataset.value?.id === dataset.id
-      ) {
-        currentDataset.value = undefined;
-      }
-
-      // Ensure layer index is set
-      dataset.current_layer_index = dataset.current_layer_index || 0;
-      if (dataset.map_layers === undefined) {
-        dataset.map_layers = await getDatasetLayers(dataset.id);
-        availableDatasetLayers.value = [
-          ...availableDatasetLayers.value,
-          ...dataset.map_layers,
-        ];
-      }
-
-      if (
-        dataset.map_layers !== undefined &&
-        dataset.current_layer_index !== undefined
-      ) {
-        const datasetLayer = dataset.map_layers[dataset.current_layer_index];
-        toggleDatasetLayer(datasetLayer);
-      }
-    }
-
-    // If new derived region created, open panel
-    watch(availableDerivedRegions, (availableRegs, oldRegs) => {
-      if (availableRegs === undefined || oldRegs === undefined) {
-        return;
-      }
-      if (!(availableRegs.length > oldRegs.length)) {
-        return;
-      }
-
-      if (!openPanels.value.includes(1)) {
-        openPanels.value.push(1);
-      }
-    });
-
-    watch(availableDatasets, () => {
-      expandedDatasetGroups.value = availableDatasetGroups.value.map(
-        (g) => g.name
-      );
-    });
-
     return {
-      availableDatasets,
-      currentDataset,
-      selectedDatasets,
-      selectedDerivedRegions,
-      openPanels,
-      expandedDatasetGroups,
-      availableDatasetGroups,
-      activeLayerTableHeaders,
-      currentChart,
-      availableCharts,
-      currentSimulationType,
-      availableSimulationTypes,
-      availableDerivedRegions,
-      loadDatasets,
-      toggleDataset,
-      toggleDerivedRegion,
-      loadCharts,
-      loadSimulationTypes,
-      loadDerivedRegions,
+      filteredProjects,
+      currentProject,
+      searchText,
+      openProjectConfig,
     };
   },
 };
 </script>
 
 <template>
-  <v-expansion-panels multiple variant="accordion" v-model="openPanels">
-    <v-expansion-panel>
-      <v-expansion-panel-title>
-        <v-icon @click.stop="loadDatasets" class="mr-2">mdi-refresh</v-icon>
-        Available Datasets
-      </v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <div v-if="!availableDatasets" style="text-align: center; width: 100%">
-          <v-progress-circular indeterminate size="30" />
-        </div>
-        <v-card-subtitle
-          v-if="availableDatasets && availableDatasets.length === 0"
-        >
-          No Available Datasets.
-        </v-card-subtitle>
-        <v-expansion-panels
-          multiple
-          variant="accordion"
-          v-model="expandedDatasetGroups"
-          v-if="
-            availableDatasets &&
-            availableDatasets.length &&
-            availableDatasets[0].id
-          "
-        >
-          <v-expansion-panel
-            v-for="group in availableDatasetGroups"
-            :title="group.name"
-            :key="group.id"
-            :value="group.name"
-          >
-            <v-expansion-panel-text>
-              <v-checkbox
-                v-for="dataset in group.datasets"
-                v-model="selectedDatasets"
-                :value="dataset"
-                :key="dataset.name"
-                :label="dataset.name"
-                :disabled="dataset.processing"
-                @change="() => toggleDataset(dataset)"
-                density="compact"
-                hide-details
-              >
-                <template v-slot:label>
-                  {{ dataset.name }}
-                  {{ dataset.processing ? "(processing)" : "" }}
-                  <v-tooltip activator="parent" location="end" max-width="300">
-                    {{ dataset.description }}
-                  </v-tooltip>
-                  <v-icon
-                    v-show="
-                      selectedDatasets && selectedDatasets.includes(dataset)
-                    "
-                    size="small"
-                    class="expand-icon ml-1"
-                    @click.prevent="currentDataset = dataset"
-                  >
-                    mdi-cog
-                  </v-icon>
-                </template>
-              </v-checkbox>
-            </v-expansion-panel-text>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-
-    <v-expansion-panel>
-      <v-expansion-panel-title>
-        <v-icon @click.stop="loadDerivedRegions" class="mr-2">
-          mdi-refresh
-        </v-icon>
-        Available Derived Regions
-      </v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <template v-if="!availableDerivedRegions?.length">
-          <div style="text-align: center; width: 100%">
-            <v-progress-circular indeterminate size="30" />
-          </div>
-          <v-card-subtitle> No Available Derived Regions. </v-card-subtitle>
-        </template>
-        <v-checkbox
-          v-for="region in availableDerivedRegions"
-          v-model="selectedDerivedRegions"
-          :value="region"
-          :key="region.id"
-          :label="region.name"
-          hide-details
+  <div>
+    <v-card flat class="position-sticky top-0 pa-3" style="z-index: 2">
+      <div class="d-flex mb-2">
+        <v-text-field
+          v-model="searchText"
+          label="Search Projects"
+          variant="outlined"
           density="compact"
-          @click="toggleDerivedRegion(region)"
+          append-inner-icon="mdi-magnify"
+          hide-details
         />
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-
-    <v-expansion-panel>
-      <v-expansion-panel-title>
-        <v-icon @click.stop="loadCharts" class="mr-2">mdi-refresh</v-icon>
-        Available Charts
-      </v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <div v-if="!availableCharts" style="text-align: center; width: 100%">
-          <v-progress-circular indeterminate size="30" />
-        </div>
-        <v-card-subtitle v-if="availableCharts && availableCharts.length === 0">
-          No Available Charts.
-        </v-card-subtitle>
-        <v-list>
-          <v-list-item
-            v-for="chart in availableCharts"
-            :key="chart.id"
-            :value="chart.id"
-            :active="currentChart && chart.id === currentChart.id"
-            @click="currentChart = chart"
-          >
-            {{ chart.name }}
-            <v-tooltip activator="parent" location="end" max-width="300">
-              {{ chart.description }}
-            </v-tooltip>
-          </v-list-item>
-        </v-list>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-
-    <v-expansion-panel>
-      <v-expansion-panel-title>
-        <v-icon @click.stop="loadSimulationTypes" class="mr-2"
-          >mdi-refresh</v-icon
-        >
-        Available Simulations
-      </v-expansion-panel-title>
-      <v-expansion-panel-text>
-        <div
-          v-if="!availableSimulationTypes"
-          style="text-align: center; width: 100%"
+        <v-btn
+          color="primary"
+          variant="flat"
+          style="min-width: 40px; min-height: 40px"
+          class="px-0 ml-2"
+          @click="() => openProjectConfig(true)"
         >
-          <v-progress-circular indeterminate size="30" />
-        </div>
-        <v-card-subtitle
-          v-if="
-            availableSimulationTypes && availableSimulationTypes.length === 0
-          "
-        >
-          No Available Simulation Types.
-        </v-card-subtitle>
-        <v-list>
-          <v-list-item
-            v-for="sim in availableSimulationTypes"
-            :key="sim.id"
-            :value="sim.id"
-            :active="
-              currentSimulationType && sim.id === currentSimulationType.id
-            "
-            @click="currentSimulationType = sim"
-          >
-            {{ sim.name }}
-            <v-tooltip activator="parent" location="end" max-width="300">
-              {{ sim.description }}
-            </v-tooltip>
-          </v-list-item>
-        </v-list>
-      </v-expansion-panel-text>
-    </v-expansion-panel>
-  </v-expansion-panels>
+          <v-icon icon="mdi-plus" size="large" />
+          <v-tooltip activator="parent" location="end">
+            Create New Project
+          </v-tooltip>
+        </v-btn>
+      </div>
+      <div class="d-flex" style="justify-content: space-between">
+        <v-card-subtitle>All Projects</v-card-subtitle>
+        <v-icon icon="mdi-cog" color="primary" id="open-config" />
+        <v-tooltip activator="#open-config" location="end">
+          Configure Projects
+        </v-tooltip>
+      </div>
+    </v-card>
+    <div
+      v-if="!filteredProjects || !filteredProjects.length"
+      style="color: grey"
+      class="my-2 mx-6 text-caption"
+    >
+      No Available Projects.
+    </div>
+    <v-expansion-panels flat rounded v-model="currentProject" class="px-3">
+      <v-expansion-panel
+        v-for="project in filteredProjects"
+        :key="project.id"
+        :value="project"
+      >
+        <v-expansion-panel-title color="grey-lighten-4">
+          <div>
+            {{ project.name }}
+            <div style="color: grey" class="mt-2">
+              <v-icon icon="mdi-database-outline" size="small" />
+              <span class="mr-3">{{ project.item_counts.datasets }}</span>
+              <v-icon icon="mdi-border-none-variant" size="small" />
+              <span class="mr-3">{{ project.item_counts.regions }}</span>
+              <v-icon icon="mdi-chart-bar" size="small" />
+              <span class="mr-3">{{ project.item_counts.charts }}</span>
+              <v-icon icon="mdi-earth" size="small" />
+              <span class="mr-3">{{ project.item_counts.simulations }}</span>
+            </div>
+          </div>
+        </v-expansion-panel-title>
+        <v-expansion-panel-text class="pa-0">
+          <v-card rounded="0" flat color="grey-lighten-2" class="pa-2">
+            <project-contents
+              v-if="project == currentProject"
+              :project="project"
+            />
+          </v-card>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </div>
 </template>
 
 <style>
+.v-expansion-panel {
+  margin-bottom: 6px;
+}
 .v-expansion-panel-text__wrapper {
-  padding: 8px 10px 16px !important;
+  padding: 0 !important;
 }
 
 .v-checkbox .v-selection-control {
diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
new file mode 100644
index 00000000..732420fa
--- /dev/null
+++ b/web/src/components/ProjectContents.vue
@@ -0,0 +1,127 @@
+<script lang="ts">
+import { ref, Ref, PropType, watch } from "vue";
+import {
+  Project,
+  Dataset,
+  Chart,
+  DerivedRegion,
+  SimulationType,
+} from "../types";
+import {
+  getProjectCharts,
+  getProjectDatasets,
+  getProjectDerivedRegions,
+  getProjectSimulationTypes,
+} from "@/api/rest";
+import DatasetList from "./DatasetList.vue";
+import { currentChart, currentSimulationType } from "@/store";
+
+export default {
+  components: { DatasetList },
+  props: {
+    project: {
+      required: true,
+      type: Object as PropType<Project>,
+    },
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setup(props: any) {
+    const panels = [
+      { label: "Datasets", loadFunction: getProjectDatasets },
+      { label: "Regions", loadFunction: getProjectDerivedRegions },
+      { label: "Charts", loadFunction: getProjectCharts },
+      { label: "Simulations", loadFunction: getProjectSimulationTypes },
+    ];
+
+    const openPanels: Ref<string[]> = ref([]);
+    const projectContents: Ref<
+      Record<string, Dataset[] | Chart[] | DerivedRegion[] | SimulationType[]>
+    > = ref({});
+
+    function selectItem(
+      panelLabel: string,
+      item: Dataset | DerivedRegion | Chart | SimulationType
+    ) {
+      if (panelLabel == "Regions") {
+        // TODO: select region
+      } else if (panelLabel == "Charts") {
+        currentChart.value = item as Chart;
+      } else if (panelLabel == "Simulations") {
+        currentSimulationType.value = item as SimulationType;
+      }
+    }
+
+    watch(openPanels, () => {
+      projectContents.value = {};
+      panels.forEach((panel) => {
+        if (openPanels.value.includes(panel.label)) {
+          panel.loadFunction(props.project.id).then((data) => {
+            projectContents.value[panel.label] = data;
+          });
+        }
+      });
+    });
+
+    return {
+      panels,
+      openPanels,
+      projectContents,
+      selectItem,
+    };
+  },
+};
+</script>
+
+<template>
+  <v-expansion-panels multiple variant="accordion" v-model="openPanels">
+    <v-expansion-panel
+      v-for="panel in panels"
+      :key="panel.label"
+      :value="panel.label"
+    >
+      <v-expansion-panel-title>
+        {{ panel.label }}
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        <div
+          v-if="
+            !projectContents[panel.label] ||
+            !projectContents[panel.label].length
+          "
+          style="color: grey"
+          class="my-2 mx-6 text-caption"
+        >
+          No Available {{ panel.label }}.
+        </div>
+        <dataset-list
+          v-else-if="panel.label == 'Datasets'"
+          :datasets="projectContents['Datasets']"
+        />
+        <v-list v-else>
+          <v-list-item
+            v-for="item in projectContents[panel.label]"
+            :key="item.id"
+            :value="item"
+            class="pa-2 mx-2"
+            @click="selectItem(panel.label, item)"
+          >
+            {{ item.name }}
+            <div class="text-caption" style="color: grey">
+              {{ item.description }}
+            </div>
+          </v-list-item>
+        </v-list>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<style scoped>
+.v-expansion-panel--active
+  > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
+  min-height: 30px;
+}
+.v-list-item--active > * {
+  background: transparent !important;
+}
+</style>
diff --git a/web/src/types.ts b/web/src/types.ts
index 282215e0..e18cbc87 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -38,6 +38,7 @@ export interface SourceRegion {
 export interface DerivedRegion {
   id: number;
   name: string;
+  description: string;
   project: number;
   metadata: object;
   boundary: object;
@@ -62,6 +63,12 @@ export interface Project {
   owner: User;
   collaborators: User[];
   followers: User[];
+  item_counts: {
+    datasets: number;
+    regions: number;
+    charts: number;
+    simulations: number;
+  };
 }
 
 export interface Feature {

From 7afef9be6ecca1db97135dddca7fa3bf223770e2 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 16 Sep 2024 22:36:31 +0000
Subject: [PATCH 03/40] refactor: populate store vars when fetching for Project
 contents

---
 web/src/components/ProjectContents.vue | 39 +++++++++++++++++++++----
 web/src/storeFunctions.ts              | 40 +-------------------------
 2 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index 732420fa..7bc2b046 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -14,7 +14,15 @@ import {
   getProjectSimulationTypes,
 } from "@/api/rest";
 import DatasetList from "./DatasetList.vue";
-import { currentChart, currentSimulationType } from "@/store";
+import {
+  availableCharts,
+  availableDatasets,
+  availableDerivedRegions,
+  availableSimulationTypes,
+  currentChart,
+  currentSimulationType,
+} from "@/store";
+import { getDatasetLayerForDataObject, toggleDatasetLayer } from "@/layers";
 
 export default {
   components: { DatasetList },
@@ -27,10 +35,26 @@ export default {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setup(props: any) {
     const panels = [
-      { label: "Datasets", loadFunction: getProjectDatasets },
-      { label: "Regions", loadFunction: getProjectDerivedRegions },
-      { label: "Charts", loadFunction: getProjectCharts },
-      { label: "Simulations", loadFunction: getProjectSimulationTypes },
+      {
+        label: "Datasets",
+        loadFunction: getProjectDatasets,
+        storeVar: availableDatasets,
+      },
+      {
+        label: "Regions",
+        loadFunction: getProjectDerivedRegions,
+        storeVar: availableDerivedRegions,
+      },
+      {
+        label: "Charts",
+        loadFunction: getProjectCharts,
+        storeVar: availableCharts,
+      },
+      {
+        label: "Simulations",
+        loadFunction: getProjectSimulationTypes,
+        storeVar: availableSimulationTypes,
+      },
     ];
 
     const openPanels: Ref<string[]> = ref([]);
@@ -43,7 +67,9 @@ export default {
       item: Dataset | DerivedRegion | Chart | SimulationType
     ) {
       if (panelLabel == "Regions") {
-        // TODO: select region
+        getDatasetLayerForDataObject(item as DerivedRegion).then((layer) => {
+          toggleDatasetLayer(layer);
+        });
       } else if (panelLabel == "Charts") {
         currentChart.value = item as Chart;
       } else if (panelLabel == "Simulations") {
@@ -57,6 +83,7 @@ export default {
         if (openPanels.value.includes(panel.label)) {
           panel.loadFunction(props.project.id).then((data) => {
             projectContents.value[panel.label] = data;
+            panel.storeVar.value = data;
           });
         }
       });
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index 460d0775..e64f9803 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -31,15 +31,7 @@ import {
   tooltipOverlay,
   clickedFeatureCandidates,
 } from "./store";
-import { Dataset } from "./types";
-import {
-  getProjectDatasets,
-  getProjects,
-  getDataset,
-  getProjectCharts,
-  getProjectSimulationTypes,
-  getProjectDerivedRegions,
-} from "@/api/rest";
+import { getProjects, getDataset, getProjectDerivedRegions } from "@/api/rest";
 import {
   datasetLayerFromMapLayerID,
   styleNetworkVectorTileLayer,
@@ -115,32 +107,6 @@ export function getCurrentMapPosition() {
   return { center, zoom };
 }
 
-export function loadDatasets() {
-  if (!currentProject.value) return;
-  availableDatasets.value = undefined;
-  getProjectDatasets(currentProject.value.id).then((data: Dataset[]) => {
-    availableDatasets.value = data;
-  });
-}
-
-export function loadCharts() {
-  if (!currentProject.value) return;
-  availableCharts.value = undefined;
-  currentChart.value = undefined;
-  getProjectCharts(currentProject.value.id).then((charts) => {
-    availableCharts.value = charts;
-  });
-}
-
-export function loadSimulationTypes() {
-  if (!currentProject.value) return;
-  availableSimulationTypes.value = undefined;
-  currentSimulationType.value = undefined;
-  getProjectSimulationTypes(currentProject.value.id).then((sims) => {
-    availableSimulationTypes.value = sims;
-  });
-}
-
 export async function loadDerivedRegions() {
   if (!currentProject.value) {
     return;
@@ -199,10 +165,6 @@ export function clearCurrentNetwork() {
 watch(currentProject, () => {
   clearState();
   setMapCenter();
-  loadDatasets();
-  loadCharts();
-  loadSimulationTypes();
-  loadDerivedRegions();
 });
 watch(currentDataset, () => {
   rasterTooltipEnabled.value = false;

From b84303d806776500b20a29191ee2ad8c814da193 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 16 Sep 2024 22:40:39 +0000
Subject: [PATCH 04/40] feat: Toggle dataset layers with maplibre

---
 web/src/components/DatasetList.vue | 36 +++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index 9b785016..cc17e700 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -2,8 +2,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { onMounted, ref, Ref, computed } from "vue";
 import { Dataset } from "@/types";
-import { selectedDatasets } from "../store";
+import {
+  availableDatasetLayers,
+  currentDataset,
+  selectedDatasets,
+} from "../store";
 import { getDatasetLayers } from "@/api/rest";
+import { toggleDatasetLayer } from "@/layers";
 
 export default {
   props: {
@@ -79,17 +84,36 @@ export default {
     }
 
     function toggleDatasets(show: unknown, datasets: Dataset[]) {
-      datasets.forEach((dataset) => {
+      datasets.forEach(async (dataset) => {
+        // Ensure layer index is set
+        dataset.current_layer_index = dataset.current_layer_index || 0;
+        if (dataset.map_layers === undefined) {
+          dataset.map_layers = await getDatasetLayers(dataset.id);
+          availableDatasetLayers.value = [
+            ...availableDatasetLayers.value,
+            ...dataset.map_layers,
+          ];
+        }
+        let layer = undefined;
+        if (
+          dataset.map_layers !== undefined &&
+          dataset.current_layer_index !== undefined
+        ) {
+          layer = dataset.map_layers[dataset.current_layer_index];
+        }
         if (show && !selectedIds.value.includes(dataset.id)) {
           selectedDatasets.value.push(dataset);
-        } else if (!show) {
+          if (layer) toggleDatasetLayer(layer);
+        } else if (!show && selectedIds.value.includes(dataset.id)) {
+          if (currentDataset.value?.id === dataset.id) {
+            currentDataset.value = undefined;
+          }
           selectedDatasets.value = selectedDatasets.value.filter((d) => {
             d.id != dataset.id;
           });
+          if (layer) toggleDatasetLayer(layer);
         }
       });
-      // TODO: Pair program with Jake
-      // Update map layers with selected datasets
     }
 
     onMounted(fetchAllLayers);
@@ -238,7 +262,7 @@ export default {
           <v-checkbox
             true-icon="mdi-eye-outline"
             false-icon="mdi-eye-off-outline"
-            style="display: inline-block"
+            style="flex: initial"
             density="compact"
             hide-details
             :model-value="selectedIds.includes(dataset.id)"

From 971e9914bc15cf9c7be8c706fdb1663c43643650 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 16 Sep 2024 22:41:01 +0000
Subject: [PATCH 05/40] fix: Add matplotlib to requirements for raster
 colormaps

---
 setup.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/setup.py b/setup.py
index 5d7bd986..0062c0b2 100644
--- a/setup.py
+++ b/setup.py
@@ -47,6 +47,7 @@
         'djangorestframework==3.15.2',
         'django-large-image==0.10.0',
         'drf-yasg==1.21.7',
+        'matplotlib==3.9.2',  # for raster colormaps
         'osmnx==1.9.4',
         'geopandas==0.14.4',
         'networkx==3.3',

From 407eccf53eb68b6d3b60579c6cc35baf0d07eac1 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 17 Sep 2024 13:18:26 +0000
Subject: [PATCH 06/40] fix: change loading behavior of Project contents panels

---
 web/src/components/ProjectContents.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index 7bc2b046..5d897572 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -78,9 +78,11 @@ export default {
     }
 
     watch(openPanels, () => {
-      projectContents.value = {};
       panels.forEach((panel) => {
-        if (openPanels.value.includes(panel.label)) {
+        if (
+          openPanels.value.includes(panel.label) &&
+          !projectContents.value[panel.label]?.length
+        ) {
           panel.loadFunction(props.project.id).then((data) => {
             projectContents.value[panel.label] = data;
             panel.storeVar.value = data;

From 58f59a4b0cae192aba5a091e8288cac80e84115b Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 18 Sep 2024 13:27:27 +0000
Subject: [PATCH 07/40] fix: adjust map state watchers

---
 web/src/storeFunctions.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index e64f9803..5761aca6 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -33,6 +33,7 @@ import {
 } from "./store";
 import { getProjects, getDataset, getProjectDerivedRegions } from "@/api/rest";
 import {
+  clearMapLayers,
   datasetLayerFromMapLayerID,
   styleNetworkVectorTileLayer,
   updateBaseLayer,
@@ -165,6 +166,7 @@ export function clearCurrentNetwork() {
 watch(currentProject, () => {
   clearState();
   setMapCenter();
+  clearMapLayers();
 });
 watch(currentDataset, () => {
   rasterTooltipEnabled.value = false;

From e7e0e3ce16fc15b0cda5b0aadc0daf699c8335c0 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 18 Sep 2024 14:37:01 +0000
Subject: [PATCH 08/40] ui: Set primary color to blue

---
 web/src/main.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/web/src/main.ts b/web/src/main.ts
index 54d6a980..3fc860d7 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 // Vuetify
 import "vuetify/styles";
+import colors from "vuetify/lib/util/colors";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
@@ -12,6 +13,15 @@ import "@mdi/font/css/materialdesignicons.css";
 const vuetify = createVuetify({
   components,
   directives,
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: colors.blue.darken3,
+        },
+      },
+    },
+  },
 });
 
 restoreLogin().then(createApp(App).use(vuetify).mount("#app"));

From 8977ada2e19a2e543c13f38a63c12e1ff39004b3 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 18 Sep 2024 14:56:26 +0000
Subject: [PATCH 09/40] deps: Upgrade vuetify

---
 web/package-lock.json | 507 ++++++++++++++++++++----------------------
 web/package.json      |   4 +-
 2 files changed, 249 insertions(+), 262 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 23a60466..d4e64a89 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -21,7 +21,7 @@
         "vue": "^3.2.13",
         "vue-chartjs": "^5.2.0",
         "vuedraggable": "^4.1.0",
-        "vuetify": "^3.3.16"
+        "vuetify": "^3.7.2"
       },
       "devDependencies": {
         "@types/lodash": "^4.17.7",
@@ -416,19 +416,17 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "dev": true,
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -486,9 +484,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "dependencies": {
+        "@babel/types": "^7.25.6"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1717,13 +1718,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
-      "dev": true,
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.20",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1913,10 +1913,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -5469,49 +5468,60 @@
       "dev": true
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.6.tgz",
+      "integrity": "sha512-r+gNu6K4lrvaQLQGmf+1gc41p3FO2OUJyWmNqaIITaJU6YFiV5PtQSFZt8jfztYyARwqhoCayjprC7KMvT3nRA==",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.6",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.6.tgz",
+      "integrity": "sha512-xRXqxDrIqK8v8sSScpistyYH0qYqxakpsIvqMD2e5sV/PXQ1mTwtXp4k42yHK06KXxKSmitop9e45Ui/3BrTEw==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.6.tgz",
+      "integrity": "sha512-pjWJ8Kj9TDHlbF5LywjVso+BIxCY5wVOLhkEXRhuCHDxPFIeX1zaFefKs8RYoHvkSMqRWt93a0f2gNJVJixHwg==",
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.6",
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/compiler-ssr": "3.5.6",
+        "@vue/shared": "3.5.6",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.6.tgz",
+      "integrity": "sha512-VpWbaZrEOCqnmqjE83xdwegtr5qO/2OPUC6veWgvNqTJ3bYysz6vY3VqMuOijubuUYPRpG3OOKIh9TD0Stxb9A==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -5597,60 +5607,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.6.tgz",
+      "integrity": "sha512-shZ+KtBoHna5GyUxWfoFVBCVd7k56m6lGhk5e+J9AKjheHF6yob5eukssHRI+rzvHBiU1sWs/1ZhNbLExc5oYQ==",
       "dependencies": {
-        "@vue/shared": "3.2.47"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.5.6"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.6.tgz",
+      "integrity": "sha512-FpFULR6+c2lI+m1fIGONLDqPQO34jxV8g6A4wBOgne8eSRHP6PQL27+kWFIx5wNhhjkO7B4rgtsHAmWv7qKvbg==",
       "dependencies": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.6.tgz",
+      "integrity": "sha512-SDPseWre45G38ENH2zXRAHL1dw/rr5qp91lS4lt/nHvMr0MhsbCbihGAWLXNB/6VfFOJe2O+RBRkXU+CJF7/sw==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.5.6",
+        "@vue/runtime-core": "3.5.6",
+        "@vue/shared": "3.5.6",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.6.tgz",
+      "integrity": "sha512-zivnxQnOnwEXVaT9CstJ64rZFXMS5ZkKxCjDQKiMSvUhXRzFLWZVbaBiNF4HGDqGNNsTgmjcCSmU6TB/0OOxLA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.5.6",
+        "@vue/shared": "3.5.6"
       },
       "peerDependencies": {
-        "vue": "3.2.47"
+        "vue": "3.5.6"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.6.tgz",
+      "integrity": "sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA=="
     },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
@@ -7455,9 +7454,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/d3-array": {
       "version": "1.2.4",
@@ -10608,11 +10607,11 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "dependencies": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/make-dir": {
@@ -11000,9 +10999,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -11607,9 +11606,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -11683,9 +11682,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -11701,9 +11700,9 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -13226,14 +13225,15 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13248,12 +13248,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
-    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -13727,7 +13721,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -14182,15 +14175,23 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.6.tgz",
+      "integrity": "sha512-zv+20E2VIYbcJOzJPUWp03NOGFhMmpCKOfSxVTmCYyYFFko48H9tmuQFzYj7tu4qX1AeXlp9DmhIP89/sSxxhw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/compiler-sfc": "3.5.6",
+        "@vue/runtime-dom": "3.5.6",
+        "@vue/server-renderer": "3.5.6",
+        "@vue/shared": "3.5.6"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-chartjs": {
@@ -14447,9 +14448,9 @@
       "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
     },
     "node_modules/vuetify": {
-      "version": "3.3.16",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.16.tgz",
-      "integrity": "sha512-vVfUroT5lSU+yOZAf7JlGm2j3dCR4BQml8Al27+/Uh0YW+97/CyUqOzo6IzMCt/bXLvnRerJ5fCAJtQYWnwfLA==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.2.tgz",
+      "integrity": "sha512-q0WTcRG977+a9Dqhb8TOaPm+Xmvj0oVhnBJhAdHWFSov3HhHTTxlH2nXP/GBTXZuuMHDbBeIWFuUR2/1Fx0PPw==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -14459,10 +14460,9 @@
       },
       "peerDependencies": {
         "typescript": ">=4.7",
-        "vite-plugin-vuetify": "^1.0.0-alpha.12",
-        "vue": "^3.2.0",
-        "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
+        "vite-plugin-vuetify": ">=1.0.0",
+        "vue": "^3.3.0",
+        "webpack-plugin-vuetify": ">=2.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -14471,9 +14471,6 @@
         "vite-plugin-vuetify": {
           "optional": true
         },
-        "vue-i18n": {
-          "optional": true
-        },
         "webpack-plugin-vuetify": {
           "optional": true
         }
@@ -15505,16 +15502,14 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
-      "dev": true
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ=="
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
-      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w=="
     },
     "@babel/helper-validator-option": {
       "version": "7.21.0",
@@ -15557,9 +15552,12 @@
       }
     },
     "@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "requires": {
+        "@babel/types": "^7.25.6"
+      }
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -16386,13 +16384,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
-      "dev": true,
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
       "requires": {
-        "@babel/helper-string-parser": "^7.22.5",
-        "@babel/helper-validator-identifier": "^7.22.20",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -16529,10 +16526,9 @@
       }
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.18",
@@ -19360,49 +19356,56 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.6.tgz",
+      "integrity": "sha512-r+gNu6K4lrvaQLQGmf+1gc41p3FO2OUJyWmNqaIITaJU6YFiV5PtQSFZt8jfztYyARwqhoCayjprC7KMvT3nRA==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.6",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.6.tgz",
+      "integrity": "sha512-xRXqxDrIqK8v8sSScpistyYH0qYqxakpsIvqMD2e5sV/PXQ1mTwtXp4k42yHK06KXxKSmitop9e45Ui/3BrTEw==",
       "requires": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.6.tgz",
+      "integrity": "sha512-pjWJ8Kj9TDHlbF5LywjVso+BIxCY5wVOLhkEXRhuCHDxPFIeX1zaFefKs8RYoHvkSMqRWt93a0f2gNJVJixHwg==",
+      "requires": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.6",
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/compiler-ssr": "3.5.6",
+        "@vue/shared": "3.5.6",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.47",
+        "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.6.tgz",
+      "integrity": "sha512-VpWbaZrEOCqnmqjE83xdwegtr5qO/2OPUC6veWgvNqTJ3bYysz6vY3VqMuOijubuUYPRpG3OOKIh9TD0Stxb9A==",
       "requires": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "@vue/component-compiler-utils": {
@@ -19472,57 +19475,46 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
-      "requires": {
-        "@vue/shared": "3.2.47"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.6.tgz",
+      "integrity": "sha512-shZ+KtBoHna5GyUxWfoFVBCVd7k56m6lGhk5e+J9AKjheHF6yob5eukssHRI+rzvHBiU1sWs/1ZhNbLExc5oYQ==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.5.6"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.6.tgz",
+      "integrity": "sha512-FpFULR6+c2lI+m1fIGONLDqPQO34jxV8g6A4wBOgne8eSRHP6PQL27+kWFIx5wNhhjkO7B4rgtsHAmWv7qKvbg==",
       "requires": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.6.tgz",
+      "integrity": "sha512-SDPseWre45G38ENH2zXRAHL1dw/rr5qp91lS4lt/nHvMr0MhsbCbihGAWLXNB/6VfFOJe2O+RBRkXU+CJF7/sw==",
       "requires": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.5.6",
+        "@vue/runtime-core": "3.5.6",
+        "@vue/shared": "3.5.6",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.6.tgz",
+      "integrity": "sha512-zivnxQnOnwEXVaT9CstJ64rZFXMS5ZkKxCjDQKiMSvUhXRzFLWZVbaBiNF4HGDqGNNsTgmjcCSmU6TB/0OOxLA==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.6.tgz",
+      "integrity": "sha512-eidH0HInnL39z6wAt6SFIwBrvGOpDWsDxlw3rCgo1B+CQ1781WzQUSU3YjxgdkcJo9Q8S6LmXTkvI+cLHGkQfA=="
     },
     "@vue/vue-loader-v15": {
       "version": "npm:vue-loader@15.11.1",
@@ -20869,9 +20861,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "d3-array": {
       "version": "1.2.4",
@@ -23237,11 +23229,11 @@
       }
     },
     "magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "requires": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "make-dir": {
@@ -23547,9 +23539,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -23999,9 +23991,9 @@
       }
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -24067,13 +24059,13 @@
       }
     },
     "postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "requires": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       }
     },
     "postcss-calc": {
@@ -25161,12 +25153,13 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -25178,11 +25171,6 @@
         "source-map": "^0.6.0"
       }
     },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
     "spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -25544,8 +25532,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
     },
     "to-regex-range": {
       "version": "5.0.1",
@@ -25870,15 +25857,15 @@
       }
     },
     "vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.6.tgz",
+      "integrity": "sha512-zv+20E2VIYbcJOzJPUWp03NOGFhMmpCKOfSxVTmCYyYFFko48H9tmuQFzYj7tu4qX1AeXlp9DmhIP89/sSxxhw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.5.6",
+        "@vue/compiler-sfc": "3.5.6",
+        "@vue/runtime-dom": "3.5.6",
+        "@vue/server-renderer": "3.5.6",
+        "@vue/shared": "3.5.6"
       }
     },
     "vue-chartjs": {
@@ -26072,9 +26059,9 @@
       }
     },
     "vuetify": {
-      "version": "3.3.16",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.16.tgz",
-      "integrity": "sha512-vVfUroT5lSU+yOZAf7JlGm2j3dCR4BQml8Al27+/Uh0YW+97/CyUqOzo6IzMCt/bXLvnRerJ5fCAJtQYWnwfLA==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.2.tgz",
+      "integrity": "sha512-q0WTcRG977+a9Dqhb8TOaPm+Xmvj0oVhnBJhAdHWFSov3HhHTTxlH2nXP/GBTXZuuMHDbBeIWFuUR2/1Fx0PPw==",
       "requires": {}
     },
     "watchpack": {
diff --git a/web/package.json b/web/package.json
index 2aae0298..c6595f07 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@mdi/font": "^7.2.96",
-    "@turf/turf": "^7.1.0",
     "@resonant/oauth-client": "^0.9.0",
+    "@turf/turf": "^7.1.0",
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
     "core-js": "^3.8.3",
@@ -22,7 +22,7 @@
     "vue": "^3.2.13",
     "vue-chartjs": "^5.2.0",
     "vuedraggable": "^4.1.0",
-    "vuetify": "^3.3.16"
+    "vuetify": "^3.7.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.7",

From bb2185903fba8ee4189c415206ed8a24250233fb Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 19 Sep 2024 15:14:24 +0000
Subject: [PATCH 10/40] feat: Add Dataset selection panel to Project Config
 page

---
 uvdat/core/rest/project.py                |  20 +-
 web/src/App.vue                           |  70 ++--
 web/src/api/rest.ts                       |  20 +
 web/src/components/DatasetList.vue        | 216 +++++-----
 web/src/components/MainDrawerContents.vue |  24 +-
 web/src/components/ProjectConfig.vue      | 485 ++++++++++++++--------
 web/src/components/ProjectContents.vue    |  56 ++-
 web/src/store.ts                          |   1 +
 8 files changed, 557 insertions(+), 335 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 448f943c..96de476b 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -2,10 +2,11 @@
 from django.http import HttpResponse
 from rest_framework.decorators import action
 from rest_framework.viewsets import ModelViewSet
+from rest_framework.response import Response
 
-from uvdat.core.models import Project
+from uvdat.core.models import Dataset, Project
 from uvdat.core.rest.access_control import GuardianFilter, GuardianPermission
-from uvdat.core.rest.serializers import ProjectSerializer
+from uvdat.core.rest.serializers import DatasetSerializer, ProjectSerializer
 from uvdat.core.tasks.osmnx import load_roads
 
 
@@ -21,6 +22,21 @@ def perform_create(self, serializer):
         user: User = self.request.user
         project.set_permissions(owner=user)
 
+    def partial_update(self, request, id):
+        project = self.get_object()
+        project.datasets.set(
+            Dataset.objects.filter(
+                id__in=request.data.get('dataset_ids')
+            )
+        )
+        project.save()
+        response = ProjectSerializer(project).data
+        response.update(datasets=[
+            DatasetSerializer(dataset).data
+            for dataset in project.datasets.all()
+        ])
+        return Response(response, status=200)
+
     @action(detail=True, methods=['get'])
     def regions(self, request, **kwargs):
         project = self.get_object()
diff --git a/web/src/App.vue b/web/src/App.vue
index 15c01dec..75a93fc2 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -8,6 +8,7 @@ import {
   availableProjects,
   currentChart,
   currentSimulationType,
+  projectConfigMode,
 } from "./store";
 import { oauthClient, logout } from "./api/auth";
 import { loadProjects } from "./storeFunctions";
@@ -16,6 +17,7 @@ import MainDrawerContents from "./components/MainDrawerContents.vue";
 import OptionsDrawerContents from "./components/OptionsDrawerContents.vue";
 import ChartJS from "./components/ChartJS.vue";
 import SimulationsPanel from "./components/SimulationsPanel.vue";
+import ProjectConfig from "./components/ProjectConfig.vue";
 
 export default defineComponent({
   components: {
@@ -24,6 +26,7 @@ export default defineComponent({
     OptionsDrawerContents,
     ChartJS,
     SimulationsPanel,
+    ProjectConfig,
   },
   setup() {
     const drawer = ref(true);
@@ -54,6 +57,7 @@ export default defineComponent({
       showError,
       currentChart,
       currentSimulationType,
+      projectConfigMode,
     };
   },
 });
@@ -94,7 +98,10 @@ export default defineComponent({
       </v-card>
     </v-overlay>
     <v-app-bar app prominent>
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
+      <v-app-bar-nav-icon
+        @click.stop="drawer = !drawer"
+        v-if="!projectConfigMode"
+      />
       <v-toolbar-title>UVDAT</v-toolbar-title>
       <v-spacer />
       <div v-if="currentUser" class="px-3">
@@ -113,35 +120,38 @@ export default defineComponent({
         </v-btn>
       </div>
     </v-app-bar>
-    <v-navigation-drawer
-      v-model="drawer"
-      permanent
-      width="350"
-      class="main-area drawer"
-    >
-      <MainDrawerContents />
-    </v-navigation-drawer>
-    <v-navigation-drawer
-      :model-value="currentDataset !== undefined"
-      permanent
-      width="300"
-      location="right"
-      class="main-area drawer"
-    >
-      <OptionsDrawerContents />
-    </v-navigation-drawer>
-    <div
-      :class="
-        drawer
-          ? currentDataset
-            ? 'main-area shifted-2'
-            : 'main-area shifted-1'
-          : 'main-area'
-      "
-    >
-      <Map />
-      <ChartJS v-if="currentChart" />
-      <SimulationsPanel v-if="currentSimulationType" />
+    <ProjectConfig v-if="projectConfigMode" />
+    <div v-else>
+      <v-navigation-drawer
+        v-model="drawer"
+        permanent
+        width="350"
+        class="main-area drawer"
+      >
+        <MainDrawerContents />
+      </v-navigation-drawer>
+      <v-navigation-drawer
+        :model-value="currentDataset !== undefined"
+        permanent
+        width="300"
+        location="right"
+        class="main-area drawer"
+      >
+        <OptionsDrawerContents />
+      </v-navigation-drawer>
+      <div
+        :class="
+          drawer
+            ? currentDataset
+              ? 'main-area shifted-2'
+              : 'main-area shifted-1'
+            : 'main-area'
+        "
+      >
+        <Map />
+        <ChartJS v-if="currentChart" />
+        <SimulationsPanel v-if="currentSimulationType" />
+      </div>
     </div>
   </v-app>
 </template>
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index 36a6becd..f7c7fb5a 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -1,5 +1,6 @@
 import { apiClient } from "./auth";
 import {
+  User,
   Project,
   Dataset,
   NetworkNode,
@@ -12,6 +13,10 @@ import {
   Network,
 } from "@/types";
 
+export async function getUsers(): Promise<User[]> {
+  return (await apiClient.get(`users`)).data.results;
+}
+
 export async function getProjects(): Promise<Project[]> {
   return (await apiClient.get("projects")).data.results;
 }
@@ -47,6 +52,17 @@ export async function getProjectDatasets(
   return (await apiClient.get(`datasets?project=${projectId}`)).data.results;
 }
 
+export async function setProjectDatasets(
+  projectId: number,
+  datasetIds: number[]
+): Promise<Project> {
+  return (
+    await apiClient.patch(`projects/${projectId}/`, {
+      dataset_ids: datasetIds,
+    })
+  ).data;
+}
+
 export async function getProjectCharts(projectId: number): Promise<Chart[]> {
   return (await apiClient.get(`charts?project=${projectId}`)).data.results;
 }
@@ -65,6 +81,10 @@ export async function getProjectSimulationTypes(
     .data;
 }
 
+export async function getDatasets(): Promise<Dataset[]> {
+  return (await apiClient.get(`datasets`)).data.results;
+}
+
 export async function getDataset(datasetId: number): Promise<Dataset> {
   return (await apiClient.get(`datasets/${datasetId}`)).data;
 }
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index cc17e700..b2d783dc 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -1,14 +1,8 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { onMounted, ref, Ref, computed } from "vue";
+import { onMounted, ref, Ref, computed, ComputedRef } from "vue";
 import { Dataset } from "@/types";
-import {
-  availableDatasetLayers,
-  currentDataset,
-  selectedDatasets,
-} from "../store";
 import { getDatasetLayers } from "@/api/rest";
-import { toggleDatasetLayer } from "@/layers";
 
 export default {
   props: {
@@ -16,20 +10,43 @@ export default {
       required: true,
       type: Array,
     },
-    detail: {
-      default: true,
+    selectedIds: {
+      required: true,
+      type: Array,
+    },
+    eyeIcon: {
+      default: false,
       type: Boolean,
     },
+    idPrefix: {
+      default: "",
+      type: String,
+    },
   },
-  setup(props: any) {
+  emits: ["toggleDatasets"],
+  setup(props: any, { emit }: any) {
     const groupByOptions = ["category", "dataset_type"];
     const groupByKey = ref(["category"]);
-    const filterMenuItems: Ref<Record<string, string[]>> = ref({});
-    const filters: Ref<Record<string, string[]>> = ref({});
-    const searchText = ref();
-    const selectedIds = computed(() =>
-      selectedDatasets.value.map((d2) => d2.id)
+    const filterMenuItems: ComputedRef<Record<string, string[]>> = computed(
+      () => {
+        const menuItems: Record<string, string[]> = Object.fromEntries(
+          groupByOptions.map((opt) => [opt, []])
+        );
+        props.datasets.forEach((dataset: any) => {
+          groupByOptions.forEach((opt) => {
+            const value = dataset[opt].toLowerCase();
+            if (!menuItems[opt].includes(value)) {
+              menuItems[opt].push(value);
+            }
+          });
+        });
+        return menuItems;
+      }
+    );
+    const filters: Ref<Record<string, string[]>> = ref(
+      Object.fromEntries(groupByOptions.map((opt) => [opt, []]))
     );
+    const searchText = ref();
     const filteredDatasets = computed(() => {
       return props.datasets.filter((dataset: any) => {
         const searchMatch =
@@ -66,58 +83,11 @@ export default {
       });
     }
 
-    function populateFilterMenu() {
-      filterMenuItems.value = Object.fromEntries(
-        groupByOptions.map((opt) => [opt, []])
-      );
-      filters.value = Object.fromEntries(
-        groupByOptions.map((opt) => [opt, []])
-      );
-      props.datasets.forEach((dataset: any) => {
-        groupByOptions.forEach((opt) => {
-          const value = dataset[opt].toLowerCase();
-          if (!filterMenuItems.value[opt].includes(value)) {
-            filterMenuItems.value[opt].push(value);
-          }
-        });
-      });
-    }
-
-    function toggleDatasets(show: unknown, datasets: Dataset[]) {
-      datasets.forEach(async (dataset) => {
-        // Ensure layer index is set
-        dataset.current_layer_index = dataset.current_layer_index || 0;
-        if (dataset.map_layers === undefined) {
-          dataset.map_layers = await getDatasetLayers(dataset.id);
-          availableDatasetLayers.value = [
-            ...availableDatasetLayers.value,
-            ...dataset.map_layers,
-          ];
-        }
-        let layer = undefined;
-        if (
-          dataset.map_layers !== undefined &&
-          dataset.current_layer_index !== undefined
-        ) {
-          layer = dataset.map_layers[dataset.current_layer_index];
-        }
-        if (show && !selectedIds.value.includes(dataset.id)) {
-          selectedDatasets.value.push(dataset);
-          if (layer) toggleDatasetLayer(layer);
-        } else if (!show && selectedIds.value.includes(dataset.id)) {
-          if (currentDataset.value?.id === dataset.id) {
-            currentDataset.value = undefined;
-          }
-          selectedDatasets.value = selectedDatasets.value.filter((d) => {
-            d.id != dataset.id;
-          });
-          if (layer) toggleDatasetLayer(layer);
-        }
-      });
+    function toggleDatasets(show: boolean | null, datasets: Dataset[]) {
+      emit("toggleDatasets", { show, datasets });
     }
 
     onMounted(fetchAllLayers);
-    onMounted(populateFilterMenu);
 
     return {
       groupByOptions,
@@ -125,7 +95,6 @@ export default {
       filterMenuItems,
       filters,
       datasetGroups,
-      selectedIds,
       searchText,
       toggleDatasets,
     };
@@ -134,8 +103,8 @@ export default {
 </script>
 
 <template>
-  <div class="px-1">
-    <div class="d-flex" style="align-items: center">
+  <div class="px-1" style="width: 100%">
+    <div class="d-flex position-sticky top-0" style="align-items: center">
       <v-text-field
         v-model="searchText"
         label="Search Datasets"
@@ -145,11 +114,15 @@ export default {
         append-inner-icon="mdi-magnify"
         hide-details
       />
-      <v-icon icon="mdi-filter" class="mx-1" id="filter-datasets" />
+      <v-icon
+        icon="mdi-filter"
+        class="mx-1"
+        :id="idPrefix + 'filter-datasets'"
+      />
       <v-menu
-        activator="#filter-datasets"
         open-on-hover
         :close-on-content-click="false"
+        :activator="'#' + idPrefix + 'filter-datasets'"
       >
         <v-card>
           <v-card-text style="background-color: lightgrey" class="py-2">
@@ -236,69 +209,74 @@ export default {
     <div
       v-for="groupName in Object.keys(datasetGroups)"
       :key="groupName"
-      class="group py-1"
+      class="group pa-2"
     >
       <v-checkbox
-        true-icon="mdi-eye-outline"
-        false-icon="mdi-eye-off-outline"
+        :true-icon="eyeIcon ? 'mdi-eye-outline' : undefined"
+        :false-icon="eyeIcon ? 'mdi-eye-off-outline' : undefined"
         style="display: inline-block"
         density="compact"
         hide-details
         :model-value="
           datasetGroups[groupName].every((d) => selectedIds.includes(d.id))
         "
-        @update:model-value="(v) => toggleDatasets(v, datasetGroups[groupName])"
+        @update:model-value="toggleDatasets($event, datasetGroups[groupName])"
       />
       <v-card-subtitle class="group-title capitalize text-caption px-1">
         {{ groupByKey[0].replace("_", " ") }}: {{ groupName.toLowerCase() }}
       </v-card-subtitle>
-      <div
-        v-for="dataset in datasetGroups[groupName]"
-        :key="dataset.id"
-        class="d-flex pb-3"
-        style="flex-direction: column"
-      >
-        <div class="d-flex" style="column-gap: 5px; align-items: center">
-          <v-checkbox
-            true-icon="mdi-eye-outline"
-            false-icon="mdi-eye-off-outline"
-            style="flex: initial"
-            density="compact"
-            hide-details
-            :model-value="selectedIds.includes(dataset.id)"
-            @update:model-value="(v) => toggleDatasets(v, [dataset])"
-          />
-          {{ dataset.name }}
-        </div>
-        <div
-          v-if="detail"
-          class="d-flex pl-7 pr-3"
-          style="column-gap: 5px; justify-content: space-between"
+      <v-expansion-panels multiple>
+        <v-expansion-panel
+          v-for="dataset in datasetGroups[groupName]"
+          :key="dataset.id"
+          elevation="0"
         >
-          <div>
-            <v-chip color="primary" size="x-small" class="mr-1 capitalize">
-              category: {{ dataset.category }}
-            </v-chip>
-            <v-chip color="primary" size="x-small" class="capitalize">
-              type: {{ dataset.dataset_type.toLowerCase() }}
-            </v-chip>
-          </div>
-          <span
-            v-if="dataset.map_layers"
-            class="text-caption"
-            style="color: grey"
-          >
-            <v-icon icon="mdi-layers-outline" size="small" />
-            {{ dataset.map_layers.length }}
-            <v-tooltip activator="parent" location="end">
-              Number of Layers
-            </v-tooltip>
-          </span>
-        </div>
-        <div v-if="detail" class="text-caption pl-8 pr-1" style="color: grey">
-          {{ dataset.description }}
-        </div>
-      </div>
+          <v-expansion-panel-title class="pa-0" style="column-gap: 5px">
+            <template v-slot:default="{}">
+              <v-checkbox
+                :true-icon="eyeIcon ? 'mdi-eye-outline' : undefined"
+                :false-icon="eyeIcon ? 'mdi-eye-off-outline' : undefined"
+                style="flex: initial"
+                density="compact"
+                hide-details
+                @click.stop
+                :model-value="selectedIds.includes(dataset.id)"
+                @update:model-value="toggleDatasets($event, [dataset])"
+              />
+              {{ dataset.name }}
+            </template>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <div
+              class="d-flex pl-7 pr-3"
+              style="column-gap: 5px; justify-content: space-between"
+            >
+              <div>
+                <v-chip color="primary" size="x-small" class="mr-1 capitalize">
+                  category: {{ dataset.category }}
+                </v-chip>
+                <v-chip color="primary" size="x-small" class="capitalize">
+                  type: {{ dataset.dataset_type.toLowerCase() }}
+                </v-chip>
+              </div>
+              <span
+                v-if="dataset.map_layers"
+                class="text-caption"
+                style="color: grey"
+              >
+                <v-icon icon="mdi-layers-outline" size="small" />
+                {{ dataset.map_layers.length }}
+                <v-tooltip activator="parent" location="end">
+                  Number of Layers
+                </v-tooltip>
+              </span>
+            </div>
+            <div class="text-caption pl-8 pr-1" style="color: grey">
+              {{ dataset.description }}
+            </div>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
     </div>
   </div>
 </template>
diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index cc9de39c..0c270439 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { ref, computed } from "vue";
-import { availableProjects, currentProject } from "@/store";
+import { availableProjects, currentProject, projectConfigMode } from "@/store";
 import ProjectContents from "./ProjectContents.vue";
 
 export default {
@@ -17,8 +17,7 @@ export default {
     });
 
     function openProjectConfig(create = false) {
-      // TODO: open project config
-      console.log("Open project config. create=", create);
+      projectConfigMode.value = create ? "new" : true;
     }
 
     return {
@@ -58,7 +57,12 @@ export default {
       </div>
       <div class="d-flex" style="justify-content: space-between">
         <v-card-subtitle>All Projects</v-card-subtitle>
-        <v-icon icon="mdi-cog" color="primary" id="open-config" />
+        <v-icon
+          icon="mdi-cog"
+          color="primary"
+          id="open-config"
+          @click="() => openProjectConfig(false)"
+        />
         <v-tooltip activator="#open-config" location="end">
           Configure Projects
         </v-tooltip>
@@ -76,6 +80,7 @@ export default {
         v-for="project in filteredProjects"
         :key="project.id"
         :value="project"
+        style="margin-bottom: 6px"
       >
         <v-expansion-panel-title color="grey-lighten-4">
           <div>
@@ -106,9 +111,6 @@ export default {
 </template>
 
 <style>
-.v-expansion-panel {
-  margin-bottom: 6px;
-}
 .v-expansion-panel-text__wrapper {
   padding: 0 !important;
 }
@@ -120,4 +122,12 @@ export default {
 .expand-icon {
   float: right;
 }
+
+.v-expansion-panel-title__overlay {
+  background-color: transparent !important;
+}
+
+.v-expansion-panel:not(:first-child)::after {
+  border-top-width: 0px !important;
+}
 </style>
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 107f24e7..0d038a2b 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -1,213 +1,348 @@
 <script lang="ts">
-import { ref, watch } from "vue";
-import { currentUser, currentProject, availableProjects } from "@/store";
-import { createProject, patchProject, deleteProject } from "@/api/rest";
-import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
+import { ref, Ref, computed, onMounted, ComputedRef } from "vue";
+import { availableProjects, projectConfigMode, currentProject } from "@/store";
+import DatasetList from "./DatasetList.vue";
+import {
+  getUsers,
+  getDatasets,
+  getProjectDatasets,
+  setProjectDatasets,
+} from "@/api/rest";
+import { User, Project, Dataset } from "@/types";
 
 export default {
+  components: { DatasetList },
   setup() {
-    const newProjectName = ref();
-    const savedPosition = ref(false);
-    const currentTab = ref(0);
-
-    function create() {
-      const { center, zoom } = getCurrentMapPosition();
-      createProject(newProjectName.value, center, zoom).then(() => {
-        newProjectName.value = undefined;
-        loadProjects();
+    const currentTab = ref();
+    const searchText = ref();
+    const filteredProjects = computed(() => {
+      return availableProjects.value.filter((proj) => {
+        return (
+          !searchText.value ||
+          proj.name.toLowerCase().includes(searchText.value.toLowerCase())
+        );
       });
+    });
+    const selectedProject: Ref<Project | undefined> = ref();
+    const allDatasets: Ref<Dataset[]> = ref([]);
+    const projDatasets: Ref<Dataset[]> = 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 allUsers: Ref<User[]> = ref([]);
+    const saving: Ref<boolean> = ref(false);
+
+    // const newProjectName = ref();
+    // const savedPosition = ref(false);
+
+    // function create() {
+    //   const { center, zoom } = getCurrentMapPosition();
+    //   createProject(newProjectName.value, center, zoom).then(() => {
+    //     newProjectName.value = undefined;
+    //     loadProjects();
+    //   });
+    // }
+
+    // function del() {
+    //   if (currentProject.value) {
+    //     deleteProject(currentProject.value.id).then(() => {
+    //       currentProject.value = undefined;
+    //       loadProjects();
+    //     });
+    //   }
+    // }
+
+    // function savePosition() {
+    //   if (currentProject.value) {
+    //     const { center, zoom } = getCurrentMapPosition();
+    //     patchProject(currentProject.value.id, {
+    //       default_map_center: center,
+    //       default_map_zoom: zoom,
+    //     }).then((proj) => {
+    //       if (proj) {
+    //         if (currentProject.value) {
+    //           currentProject.value.default_map_center = proj.default_map_center;
+    //           currentProject.value.default_map_zoom = proj.default_map_zoom;
+    //         }
+    //         savedPosition.value = true;
+    //       }
+    //     });
+    //   }
+    // }
+
+    // watch(currentProject, () => {
+    //   newProjectName.value = undefined;
+    //   savedPosition.value = false;
+    // });
+
+    function selectProject(v: Record<string, unknown>) {
+      getProjectDatasets(v.id as number).then((data) => {
+        projDatasets.value = data;
+      });
+      selectedProject.value = availableProjects.value.find((p) => p.id == v.id);
     }
 
-    function del() {
-      if (currentProject.value) {
-        deleteProject(currentProject.value.id).then(() => {
-          currentProject.value = undefined;
-          loadProjects();
-        });
-      }
+    function loadSelectedProject() {
+      currentProject.value = selectedProject.value;
+      projectConfigMode.value = false;
+    }
+
+    function toggleOtherDatasetSelection({
+      show,
+      datasets,
+    }: {
+      show: boolean;
+      datasets: Dataset[];
+    }) {
+      datasets.forEach((dataset: Dataset) => {
+        if (show && !otherSelectedDatasetIds.value.includes(dataset.id)) {
+          otherSelectedDatasetIds.value.push(dataset.id);
+        } else if (
+          !show &&
+          otherSelectedDatasetIds.value.includes(dataset.id)
+        ) {
+          otherSelectedDatasetIds.value = otherSelectedDatasetIds.value.filter(
+            (id) => id != dataset.id
+          );
+        }
+      });
+    }
+
+    function toggleProjDatasetSelection({
+      show,
+      datasets,
+    }: {
+      show: boolean;
+      datasets: Dataset[];
+    }) {
+      datasets.forEach((dataset: Dataset) => {
+        if (show && !projSelectedDatasetIds.value.includes(dataset.id)) {
+          projSelectedDatasetIds.value.push(dataset.id);
+        } else if (!show && projSelectedDatasetIds.value.includes(dataset.id)) {
+          projSelectedDatasetIds.value = projSelectedDatasetIds.value.filter(
+            (id) => id != dataset.id
+          );
+        }
+      });
+    }
+
+    function addAllSelectionToProject() {
+      saveDatasetsToProject([
+        ...projDatasets.value.map((d) => d.id),
+        ...otherSelectedDatasetIds.value,
+      ]);
+      otherSelectedDatasetIds.value = [];
     }
 
-    function savePosition() {
-      if (currentProject.value) {
-        const { center, zoom } = getCurrentMapPosition();
-        patchProject(currentProject.value.id, {
-          default_map_center: center,
-          default_map_zoom: zoom,
-        }).then((proj) => {
-          if (proj) {
-            if (currentProject.value) {
-              currentProject.value.default_map_center = proj.default_map_center;
-              currentProject.value.default_map_zoom = proj.default_map_zoom;
-            }
-            savedPosition.value = true;
-          }
+    function removeProjSelectionFromProject() {
+      saveDatasetsToProject(
+        projDatasets.value
+          .map((d) => d.id)
+          .filter((id) => !projSelectedDatasetIds.value.includes(id))
+      );
+      projSelectedDatasetIds.value = [];
+    }
+
+    function saveDatasetsToProject(ids: number[]) {
+      saving.value = true;
+      if (selectedProject.value) {
+        setProjectDatasets(selectedProject.value.id, ids).then((project) => {
+          projDatasets.value = project.datasets;
+          saving.value = false;
         });
       }
     }
 
-    watch(currentProject, () => {
-      newProjectName.value = undefined;
-      savedPosition.value = false;
+    onMounted(() => {
+      getUsers().then((data) => {
+        allUsers.value = data;
+      });
+      getDatasets().then((data) => {
+        allDatasets.value = data;
+      });
     });
 
     return {
-      currentUser,
-      currentProject,
-      availableProjects,
-      newProjectName,
-      savedPosition,
       currentTab,
-      create,
-      del,
-      savePosition,
+      projectConfigMode,
+      searchText,
+      filteredProjects,
+      selectedProject,
+      otherDatasets,
+      otherSelectedDatasetIds,
+      projDatasets,
+      projSelectedDatasetIds,
+      allUsers,
+      saving,
+      selectProject,
+      loadSelectedProject,
+      toggleOtherDatasetSelection,
+      toggleProjDatasetSelection,
+      addAllSelectionToProject,
+      removeProjSelectionFromProject,
+      // currentUser,
+      // availableProjects,
+      // newProjectName,
+      // savedPosition,
+      // currentTab,
+      // create,
+      // del,
+      // savePosition,
     };
   },
 };
 </script>
 
 <template>
-  <v-dialog max-width="70%" max-height="90%">
-    <template v-slot:activator="{ props: activatorProps }">
-      <v-btn v-bind="activatorProps" variant="flat" icon>
-        <v-icon>mdi-cog</v-icon>
+  <v-card flat class="config">
+    <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+      Projects Configuration
+      <v-btn
+        class="close-button transparent"
+        variant="flat"
+        icon
+        @click="projectConfigMode = false"
+      >
+        <v-icon>mdi-close</v-icon>
       </v-btn>
-    </template>
-
-    <template v-slot:default="{ isActive }">
-      <v-card title="Project Config">
+    </v-card-title>
+    <v-card-text class="d-flex pa-0" style="height: 100%">
+      <div class="bg-grey-lighten-4 sidebar">
+        <v-card
+          flat
+          class="position-sticky top-0 pa-3 bg-grey-lighten-4"
+          style="z-index: 2"
+        >
+          <v-text-field
+            v-model="searchText"
+            label="Search Projects"
+            variant="outlined"
+            density="compact"
+            append-inner-icon="mdi-magnify"
+            hide-details
+          />
+        </v-card>
+        <v-list
+          :items="filteredProjects"
+          item-title="name"
+          item-value="id"
+          class="transparent"
+          color="primary"
+          selectable
+          @click:select="selectProject"
+        />
         <v-btn
-          style="position: absolute; right: 0"
-          variant="flat"
-          icon
-          @click="isActive.value = false"
+          v-if="selectedProject"
+          class="options"
+          @click="loadSelectedProject"
+          color="primary"
         >
-          <v-icon>mdi-close</v-icon>
+          Load Project On Map
         </v-btn>
-
-        <div class="d-flex pa-2">
-          <div>
-            <v-tabs
-              v-model="currentProject"
-              v-if="availableProjects.length"
-              :mandatory="false"
-              direction="vertical"
-              prev-icon="mdi-menu-up"
-              next-icon="mdi-menu-down"
-              style="max-height: 60vh"
+      </div>
+      <div v-if="selectedProject" class="tab-content">
+        <v-tabs v-model="currentTab" color="primary">
+          <v-tab value="datasets" class="text-grey">Dataset Selection</v-tab>
+          <v-tab value="users" class="text-grey">Access Control</v-tab>
+          <v-tab value="map" class="text-grey">Default Map Position</v-tab>
+        </v-tabs>
+        <div
+          v-if="currentTab == 'datasets' && projDatasets.length"
+          class="py-3 px-6 d-flex"
+        >
+          <div style="width: 30%">
+            <v-card-text class="text-grey">Available Datasets</v-card-text>
+            <v-card class="pa-2 dataset-card">
+              <dataset-list
+                :datasets="otherDatasets"
+                :selected-ids="otherSelectedDatasetIds"
+                @toggle-datasets="toggleOtherDatasetSelection"
+                id-prefix="all"
+              />
+            </v-card>
+            <v-btn
+              color="primary"
+              @click="addAllSelectionToProject"
+              :disabled="saving || !otherSelectedDatasetIds.length"
+              class="mt-2"
             >
-              <v-tab
-                v-for="project in availableProjects"
-                :key="project.id"
-                :value="project"
-              >
-                {{ project.name }}
-              </v-tab>
-            </v-tabs>
-            <v-card-text v-else> You do not have any projects. </v-card-text>
-            <v-expansion-panels>
-              <v-expansion-panel title="Create New Project">
-                <v-expansion-panel-text>
-                  <v-form @submit.prevent="create">
-                    <v-text-field
-                      v-model="newProjectName"
-                      label="Name"
-                      :autofocus="true"
-                    ></v-text-field>
-                    <v-btn v-if="newProjectName" color="green" type="submit">
-                      Create
-                    </v-btn>
-                  </v-form>
-                </v-expansion-panel-text>
-              </v-expansion-panel>
-            </v-expansion-panels>
-          </div>
-
-          <div v-if="!currentProject" class="pa-3">
-            Select a Project from the list.
+              Add
+              <v-icon icon="mdi-chevron-double-right" />
+              <v-progress-circular
+                size="25"
+                indeterminate
+                v-if="saving"
+                class="ml-4"
+              />
+            </v-btn>
           </div>
-          <v-tabs-window
-            v-model="currentProject"
-            direction="vertical"
-            style="flex: 1; align-self: stretch"
-          >
-            <v-tabs-window-item
-              v-for="project in availableProjects"
-              :key="project.id"
-              :value="project"
-              class="fill"
+          <div class="ml-10" style="width: 30%">
+            <v-card-text class="text-grey">Project Datasets</v-card-text>
+            <v-card class="pa-2 dataset-card">
+              <dataset-list
+                :datasets="projDatasets"
+                :selected-ids="projSelectedDatasetIds"
+                @toggle-datasets="toggleProjDatasetSelection"
+                id-prefix="proj"
+              />
+            </v-card>
+            <v-btn
+              color="primary"
+              @click="removeProjSelectionFromProject"
+              :disabled="saving || !projSelectedDatasetIds.length"
+              class="mt-2"
             >
-              <v-card
-                variant="outlined"
-                :title="project.name"
-                class="fill pb-10"
-              >
-                <v-tabs v-model="currentTab">
-                  <v-tab value="0">Dataset Selection</v-tab>
-                  <v-tab value="1">Access Control</v-tab>
-                </v-tabs>
-                <v-tabs-window v-model="currentTab">
-                  <v-tabs-window-item value="0">
-                    <div class="pa-2">TODO</div>
-                  </v-tabs-window-item>
-                  <v-tabs-window-item value="1">
-                    <div class="pa-2">TODO</div>
-                  </v-tabs-window-item>
-                </v-tabs-window>
-
-                <div
-                  class="d-flex"
-                  style="
-                    position: absolute;
-                    bottom: 0;
-                    width: 100%;
-                    justify-content: space-between;
-                  "
-                >
-                  <v-btn
-                    v-if="!savedPosition"
-                    @click="savePosition"
-                    style="max-width: 50%"
-                  >
-                    Set current map position as project default
-                  </v-btn>
-                  <v-card-text v-else>Saved Default Map Position.</v-card-text>
-                  <v-btn v-if="currentUser?.is_superuser" color="red">
-                    Delete Project
-                    <v-dialog
-                      v-if="currentUser?.is_superuser"
-                      activator="parent"
-                      max-width="300"
-                    >
-                      <template v-slot:default="{ isActive }">
-                        <v-card class="pa-3">
-                          <v-card-title>
-                            Delete {{ currentProject?.name }}?
-                          </v-card-title>
-                          <v-btn
-                            @click="isActive.value = false"
-                            text="Cancel"
-                          />
-                          <v-btn @click="del" color="red" text="Confirm" />
-                        </v-card>
-                      </template>
-                    </v-dialog>
-                  </v-btn>
-                </div>
-              </v-card>
-            </v-tabs-window-item>
-          </v-tabs-window>
+              <v-icon icon="mdi-chevron-double-left" />
+              Remove
+              <v-progress-circular
+                size="25"
+                indeterminate
+                v-if="saving"
+                class="ml-4"
+              />
+            </v-btn>
+          </div>
         </div>
-      </v-card>
-    </template>
-  </v-dialog>
+        <div v-if="currentTab == 'users'" class="py-3 px-6">Users</div>
+        <div v-if="currentTab == 'map'" class="py-3 px-6">Map</div>
+      </div>
+    </v-card-text>
+  </v-card>
 </template>
 
 <style>
-.fill {
-  height: 100%;
+.config {
+  top: 65px;
+  height: calc(100% - 65px);
   width: 100%;
 }
-.v-window__container {
-  height: 100% !important;
+.transparent {
+  background-color: transparent !important;
+}
+.close-button {
+  position: absolute !important;
+  top: 5px;
+  right: 5px;
+}
+.sidebar {
+  width: 300px;
+  height: 100%;
+}
+.options {
+  position: absolute !important;
+  bottom: 0px;
+  width: inherit;
+}
+.tab-content {
+  width: calc(100% - 300px);
+  height: inherit;
+}
+.dataset-card {
+  max-height: calc(100vh - 300px);
+  overflow: auto !important;
 }
 </style>
diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index 5d897572..5f4f2f4b 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, Ref, PropType, watch } from "vue";
+import { ref, Ref, PropType, watch, computed } from "vue";
 import {
   Project,
   Dataset,
@@ -8,6 +8,7 @@ import {
   SimulationType,
 } from "../types";
 import {
+  getDatasetLayers,
   getProjectCharts,
   getProjectDatasets,
   getProjectDerivedRegions,
@@ -16,11 +17,14 @@ import {
 import DatasetList from "./DatasetList.vue";
 import {
   availableCharts,
+  availableDatasetLayers,
   availableDatasets,
   availableDerivedRegions,
   availableSimulationTypes,
   currentChart,
+  currentDataset,
   currentSimulationType,
+  selectedDatasets,
 } from "@/store";
 import { getDatasetLayerForDataObject, toggleDatasetLayer } from "@/layers";
 
@@ -61,6 +65,9 @@ export default {
     const projectContents: Ref<
       Record<string, Dataset[] | Chart[] | DerivedRegion[] | SimulationType[]>
     > = ref({});
+    const selectedDatasetIds = computed(() =>
+      selectedDatasets.value.map((d2) => d2.id)
+    );
 
     function selectItem(
       panelLabel: string,
@@ -77,6 +84,45 @@ export default {
       }
     }
 
+    function toggleDatasets({
+      show,
+      datasets,
+    }: {
+      show: boolean;
+      datasets: Dataset[];
+    }) {
+      datasets.forEach(async (dataset) => {
+        // Ensure layer index is set
+        dataset.current_layer_index = dataset.current_layer_index || 0;
+        if (dataset.map_layers === undefined) {
+          dataset.map_layers = await getDatasetLayers(dataset.id);
+          availableDatasetLayers.value = [
+            ...availableDatasetLayers.value,
+            ...dataset.map_layers,
+          ];
+        }
+        let layer = undefined;
+        if (
+          dataset.map_layers !== undefined &&
+          dataset.current_layer_index !== undefined
+        ) {
+          layer = dataset.map_layers[dataset.current_layer_index];
+        }
+        if (show && !selectedDatasetIds.value.includes(dataset.id)) {
+          selectedDatasets.value.push(dataset);
+          if (layer) toggleDatasetLayer(layer);
+        } else if (!show && selectedDatasetIds.value.includes(dataset.id)) {
+          if (currentDataset.value?.id === dataset.id) {
+            currentDataset.value = undefined;
+          }
+          selectedDatasets.value = selectedDatasets.value.filter((d) => {
+            d.id != dataset.id;
+          });
+          if (layer) toggleDatasetLayer(layer);
+        }
+      });
+    }
+
     watch(openPanels, () => {
       panels.forEach((panel) => {
         if (
@@ -95,7 +141,9 @@ export default {
       panels,
       openPanels,
       projectContents,
+      selectedDatasetIds,
       selectItem,
+      toggleDatasets,
     };
   },
 };
@@ -107,6 +155,7 @@ export default {
       v-for="panel in panels"
       :key="panel.label"
       :value="panel.label"
+      style="margin-bottom: 6px"
     >
       <v-expansion-panel-title>
         {{ panel.label }}
@@ -125,6 +174,9 @@ export default {
         <dataset-list
           v-else-if="panel.label == 'Datasets'"
           :datasets="projectContents['Datasets']"
+          :selected-ids="selectedDatasetIds"
+          :eye-icon="true"
+          @toggleDatasets="toggleDatasets"
         />
         <v-list v-else>
           <v-list-item
@@ -145,7 +197,7 @@ export default {
   </v-expansion-panels>
 </template>
 
-<style scoped>
+<style>
 .v-expansion-panel--active
   > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
   min-height: 30px;
diff --git a/web/src/store.ts b/web/src/store.ts
index 5f0fcb10..fd7af270 100644
--- a/web/src/store.ts
+++ b/web/src/store.ts
@@ -18,6 +18,7 @@ import { Map, Popup } from "maplibre-gl";
 // Project
 export const availableProjects = ref<Project[]>([]);
 export const currentProject = ref<Project>();
+export const projectConfigMode = ref<boolean | string>(false);
 
 // Datasets
 export const availableDatasets = ref<Dataset[]>();

From d91be555dd1a3ba7161775ff891dc26230a723ff Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 19 Sep 2024 20:34:50 +0000
Subject: [PATCH 11/40] feat: create/delete projects, edit project names and
 default map positions

---
 uvdat/core/rest/project.py                |  20 +-
 uvdat/core/rest/serializers.py            |   2 +-
 web/src/api/auth.js                       |   2 +-
 web/src/api/rest.ts                       |  13 +-
 web/src/components/DatasetList.vue        |   3 +
 web/src/components/MainDrawerContents.vue |  73 +++++-
 web/src/components/ProjectConfig.vue      | 273 ++++++++++++++++------
 web/src/components/ProjectContents.vue    |   2 +-
 web/src/components/map/Map.vue            |   2 +-
 web/src/storeFunctions.ts                 |  11 +-
 10 files changed, 292 insertions(+), 109 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 96de476b..f4479036 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -1,8 +1,8 @@
 from django.contrib.auth.models import User
 from django.http import HttpResponse
 from rest_framework.decorators import action
-from rest_framework.viewsets import ModelViewSet
 from rest_framework.response import Response
+from rest_framework.viewsets import ModelViewSet
 
 from uvdat.core.models import Dataset, Project
 from uvdat.core.rest.access_control import GuardianFilter, GuardianPermission
@@ -24,17 +24,17 @@ def perform_create(self, serializer):
 
     def partial_update(self, request, id):
         project = self.get_object()
-        project.datasets.set(
-            Dataset.objects.filter(
-                id__in=request.data.get('dataset_ids')
-            )
-        )
+        dataset_ids = request.data.pop('dataset_ids', None)
+        if dataset_ids is not None:
+            project.datasets.set(Dataset.objects.filter(id__in=dataset_ids))
+        serializer = ProjectSerializer(project, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
         project.save()
         response = ProjectSerializer(project).data
-        response.update(datasets=[
-            DatasetSerializer(dataset).data
-            for dataset in project.datasets.all()
-        ])
+        response.update(
+            datasets=[DatasetSerializer(dataset).data for dataset in project.datasets.all()]
+        )
         return Response(response, status=200)
 
     @action(detail=True, methods=['get'])
diff --git a/uvdat/core/rest/serializers.py b/uvdat/core/rest/serializers.py
index 9d1d0aea..55668815 100644
--- a/uvdat/core/rest/serializers.py
+++ b/uvdat/core/rest/serializers.py
@@ -58,7 +58,7 @@ def to_internal_value(self, data):
         center = data.get('default_map_center')
         data = super().to_internal_value(data)
         if isinstance(center, list):
-            data['default_map_center'] = Point(center[1], center[0])
+            data['default_map_center'] = Point(*center)
         return data
 
     class Meta:
diff --git a/web/src/api/auth.js b/web/src/api/auth.js
index 2c15abb6..9031b0c5 100644
--- a/web/src/api/auth.js
+++ b/web/src/api/auth.js
@@ -61,5 +61,5 @@ export const logout = async () => {
   currentUser.value = undefined;
   currentProject.value = undefined;
   clearState();
-  setMapCenter();
+  setMapCenter(undefined);
 };
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index f7c7fb5a..f38eb42e 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -39,7 +39,7 @@ export async function patchProject(
   projectId: number,
   data: object
 ): Promise<Project> {
-  return await apiClient.patch(`projects/${projectId}/`, data);
+  return (await apiClient.patch(`projects/${projectId}/`, data)).data;
 }
 
 export async function deleteProject(projectId: number): Promise<Project> {
@@ -52,17 +52,6 @@ export async function getProjectDatasets(
   return (await apiClient.get(`datasets?project=${projectId}`)).data.results;
 }
 
-export async function setProjectDatasets(
-  projectId: number,
-  datasetIds: number[]
-): Promise<Project> {
-  return (
-    await apiClient.patch(`projects/${projectId}/`, {
-      dataset_ids: datasetIds,
-    })
-  ).data;
-}
-
 export async function getProjectCharts(projectId: number): Promise<Chart[]> {
   return (await apiClient.get(`charts?project=${projectId}`)).data.results;
 }
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index b2d783dc..38a8f5b8 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -282,6 +282,9 @@ export default {
 </template>
 
 <style scoped>
+.v-list-item--active > * {
+  background: transparent !important;
+}
 .group {
   border-bottom: 1px solid lightgray;
 }
diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 0c270439..aa991f28 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -1,12 +1,16 @@
 <script lang="ts">
-import { ref, computed } from "vue";
+import { ref, Ref, computed } from "vue";
 import { availableProjects, currentProject, projectConfigMode } from "@/store";
 import ProjectContents from "./ProjectContents.vue";
+import { getCurrentMapPosition, resetMap } from "@/storeFunctions";
+import { Project } from "@/types";
+import { patchProject } from "@/api/rest";
 
 export default {
   components: { ProjectContents },
   setup() {
     const searchText = ref();
+    const saving: Ref<string | boolean> = ref(false);
     const filteredProjects = computed(() => {
       return availableProjects.value.filter((proj) => {
         return (
@@ -20,11 +24,33 @@ export default {
       projectConfigMode.value = create ? "new" : true;
     }
 
+    function saveProjectMapLocation(project: Project) {
+      const { center, zoom } = getCurrentMapPosition();
+      saving.value = true;
+      patchProject(project.id, {
+        default_map_center: center,
+        default_map_zoom: zoom,
+      }).then((project) => {
+        availableProjects.value = availableProjects.value.map((p) => {
+          if (p.id == project.id) {
+            p.default_map_center = project.default_map_center;
+            p.default_map_zoom = project.default_map_zoom;
+          }
+          return p;
+        });
+        resetMap(project);
+        saving.value = "done";
+      });
+    }
+
     return {
       filteredProjects,
       currentProject,
       searchText,
+      saving,
       openProjectConfig,
+      resetMap,
+      saveProjectMapLocation,
     };
   },
 };
@@ -96,6 +122,39 @@ export default {
               <span class="mr-3">{{ project.item_counts.simulations }}</span>
             </div>
           </div>
+          <div class="location-menu">
+            <v-icon icon="mdi-map-marker-right" size="small" color="primary" />
+            <v-menu
+              activator="parent"
+              location="end"
+              open-on-hover
+              :close-on-content-click="false"
+              @update:model-value="saving = false"
+            >
+              <v-card width="250">
+                <v-list selectable>
+                  <v-list-item @click="resetMap(project)">
+                    Go to project default map position
+                  </v-list-item>
+                  <v-list-item @click="saveProjectMapLocation(project)">
+                    Set current map position as project default
+                    <v-icon
+                      v-if="saving == 'done'"
+                      icon="mdi-check"
+                      color="green"
+                      style="float: right"
+                    />
+                    <v-progress-circular
+                      v-else-if="saving"
+                      size="15"
+                      indeterminate
+                      style="float: right"
+                    />
+                  </v-list-item>
+                </v-list>
+              </v-card>
+            </v-menu>
+          </div>
         </v-expansion-panel-title>
         <v-expansion-panel-text class="pa-0">
           <v-card rounded="0" flat color="grey-lighten-2" class="pa-2">
@@ -114,20 +173,24 @@ export default {
 .v-expansion-panel-text__wrapper {
   padding: 0 !important;
 }
-
 .v-checkbox .v-selection-control {
   max-width: 100%;
 }
-
 .expand-icon {
   float: right;
 }
-
 .v-expansion-panel-title__overlay {
   background-color: transparent !important;
 }
-
 .v-expansion-panel:not(:first-child)::after {
   border-top-width: 0px !important;
 }
+.v-expansion-panel-title__icon {
+  align-self: flex-start;
+}
+.location-menu {
+  position: absolute;
+  right: 25px;
+  bottom: 15px;
+}
 </style>
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 0d038a2b..f21f1235 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -1,14 +1,22 @@
 <script lang="ts">
-import { ref, Ref, computed, onMounted, ComputedRef } from "vue";
-import { availableProjects, projectConfigMode, currentProject } from "@/store";
+import { ref, Ref, computed, onMounted, ComputedRef, watch } from "vue";
+import {
+  availableProjects,
+  projectConfigMode,
+  currentProject,
+  currentUser,
+} from "@/store";
 import DatasetList from "./DatasetList.vue";
 import {
   getUsers,
   getDatasets,
   getProjectDatasets,
-  setProjectDatasets,
+  createProject,
+  deleteProject,
+  patchProject,
 } from "@/api/rest";
 import { User, Project, Dataset } from "@/types";
+import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
 
 export default {
   components: { DatasetList },
@@ -25,65 +33,81 @@ export default {
     });
     const selectedProject: Ref<Project | undefined> = ref();
     const allDatasets: Ref<Dataset[]> = ref([]);
-    const projDatasets: 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)
+        (d1) => !projDatasets.value?.map((d2) => d2.id).includes(d1.id)
       );
     });
     const otherSelectedDatasetIds: Ref<number[]> = ref([]);
     const allUsers: Ref<User[]> = ref([]);
+    const permissions = computed(() => {
+      const ret = Object.fromEntries(
+        availableProjects.value.map((p) => {
+          let perm = "view";
+          if (
+            p.owner?.id == currentUser.value?.id ||
+            currentUser.value?.is_superuser
+          ) {
+            perm = "own";
+          } else if (
+            currentUser.value &&
+            p.collaborators.map((u) => u.id).includes(currentUser.value.id)
+          ) {
+            perm = "edit";
+          }
+          return [p.id, perm];
+        })
+      );
+      return ret;
+    });
     const saving: Ref<boolean> = ref(false);
+    const newProjectName = ref();
+    const projectToEdit: Ref<Project | undefined> = ref();
+    const projectToDelete: Ref<Project | undefined> = ref();
 
-    // const newProjectName = ref();
-    // const savedPosition = ref(false);
-
-    // function create() {
-    //   const { center, zoom } = getCurrentMapPosition();
-    //   createProject(newProjectName.value, center, zoom).then(() => {
-    //     newProjectName.value = undefined;
-    //     loadProjects();
-    //   });
-    // }
-
-    // function del() {
-    //   if (currentProject.value) {
-    //     deleteProject(currentProject.value.id).then(() => {
-    //       currentProject.value = undefined;
-    //       loadProjects();
-    //     });
-    //   }
-    // }
+    function create() {
+      const { center, zoom } = getCurrentMapPosition();
+      createProject(newProjectName.value, center, zoom).then(() => {
+        newProjectName.value = undefined;
+        projectConfigMode.value = true;
+        loadProjects();
+      });
+    }
 
-    // function savePosition() {
-    //   if (currentProject.value) {
-    //     const { center, zoom } = getCurrentMapPosition();
-    //     patchProject(currentProject.value.id, {
-    //       default_map_center: center,
-    //       default_map_zoom: zoom,
-    //     }).then((proj) => {
-    //       if (proj) {
-    //         if (currentProject.value) {
-    //           currentProject.value.default_map_center = proj.default_map_center;
-    //           currentProject.value.default_map_zoom = proj.default_map_zoom;
-    //         }
-    //         savedPosition.value = true;
-    //       }
-    //     });
-    //   }
-    // }
+    function del() {
+      if (projectToDelete.value) {
+        deleteProject(projectToDelete.value.id).then(() => {
+          projectToDelete.value = undefined;
+          loadProjects();
+        });
+      }
+    }
 
-    // watch(currentProject, () => {
-    //   newProjectName.value = undefined;
-    //   savedPosition.value = false;
-    // });
+    function saveProjectName() {
+      saving.value = true;
+      if (projectToEdit.value) {
+        patchProject(projectToEdit.value.id, {
+          name: newProjectName.value,
+        }).then(() => {
+          projectToEdit.value = undefined;
+          newProjectName.value = undefined;
+          saving.value = false;
+          loadProjects();
+        });
+      }
+    }
 
     function selectProject(v: Record<string, unknown>) {
-      getProjectDatasets(v.id as number).then((data) => {
-        projDatasets.value = data;
-      });
-      selectedProject.value = availableProjects.value.find((p) => p.id == v.id);
+      if (selectedProject.value?.id != v.id) {
+        getProjectDatasets(v.id as number).then((data) => {
+          projDatasets.value = data;
+        });
+        selectedProject.value = availableProjects.value.find(
+          (p) => p.id == v.id
+        );
+      }
     }
 
     function loadSelectedProject() {
@@ -131,32 +155,45 @@ export default {
     }
 
     function addAllSelectionToProject() {
-      saveDatasetsToProject([
-        ...projDatasets.value.map((d) => d.id),
-        ...otherSelectedDatasetIds.value,
-      ]);
-      otherSelectedDatasetIds.value = [];
+      if (projDatasets.value) {
+        saveDatasetsToProject([
+          ...projDatasets.value.map((d) => d.id),
+          ...otherSelectedDatasetIds.value,
+        ]);
+        otherSelectedDatasetIds.value = [];
+      }
     }
 
     function removeProjSelectionFromProject() {
-      saveDatasetsToProject(
-        projDatasets.value
-          .map((d) => d.id)
-          .filter((id) => !projSelectedDatasetIds.value.includes(id))
-      );
-      projSelectedDatasetIds.value = [];
+      if (projDatasets.value) {
+        saveDatasetsToProject(
+          projDatasets.value
+            .map((d) => d.id)
+            .filter((id) => !projSelectedDatasetIds.value.includes(id))
+        );
+        projSelectedDatasetIds.value = [];
+      }
     }
 
     function saveDatasetsToProject(ids: number[]) {
       saving.value = true;
       if (selectedProject.value) {
-        setProjectDatasets(selectedProject.value.id, ids).then((project) => {
+        patchProject(selectedProject.value.id, {
+          dataset_ids: ids,
+        }).then((project) => {
           projDatasets.value = project.datasets;
           saving.value = false;
         });
       }
     }
 
+    watch(selectedProject, () => {
+      projectConfigMode.value = true;
+      newProjectName.value = undefined;
+      projectToDelete.value = undefined;
+      projectToEdit.value = undefined;
+    });
+
     onMounted(() => {
       getUsers().then((data) => {
         allUsers.value = data;
@@ -177,21 +214,20 @@ export default {
       projDatasets,
       projSelectedDatasetIds,
       allUsers,
+      permissions,
       saving,
+      newProjectName,
+      projectToEdit,
+      projectToDelete,
+      create,
+      del,
+      saveProjectName,
       selectProject,
       loadSelectedProject,
       toggleOtherDatasetSelection,
       toggleProjDatasetSelection,
       addAllSelectionToProject,
       removeProjSelectionFromProject,
-      // currentUser,
-      // availableProjects,
-      // newProjectName,
-      // savedPosition,
-      // currentTab,
-      // create,
-      // del,
-      // savePosition,
     };
   },
 };
@@ -234,7 +270,72 @@ export default {
           color="primary"
           selectable
           @click:select="selectProject"
-        />
+        >
+          <template v-slot:title="{ title, item }">
+            <v-text-field
+              v-if="projectToEdit?.id == item.id"
+              v-model="newProjectName"
+              :placeholder="item.name"
+              label="Project Name"
+              density="compact"
+              hide-details
+              autofocus
+              @keydown.stop
+              @keydown.enter="saveProjectName"
+            />
+            <span v-else>{{ title }}</span>
+          </template>
+          <template v-slot:append="{ item }">
+            <div
+              v-if="['own', 'edit'].includes(permissions[item.id])"
+              class="text-grey-darken-1"
+            >
+              <v-icon
+                icon="mdi-pencil"
+                v-if="!projectToEdit && !projectToDelete"
+                @click.stop="projectToEdit = item"
+              />
+              <v-btn
+                v-else-if="projectToEdit?.id == item.id"
+                color="primary"
+                variant="flat"
+                style="min-width: 40px; min-height: 40px"
+                :disabled="!newProjectName"
+                @click="saveProjectName"
+              >
+                <v-icon icon="mdi-content-save" />
+              </v-btn>
+            </div>
+            <div
+              v-if="['own'].includes(permissions[item.id])"
+              class="text-grey-darken-1"
+            >
+              <v-icon
+                icon="mdi-trash-can"
+                v-if="!projectToEdit && !projectToDelete"
+                @click.stop="projectToDelete = item"
+              />
+            </div>
+          </template>
+        </v-list>
+        <div class="pa-2 d-flex" v-if="projectConfigMode == 'new'">
+          <v-text-field
+            v-model="newProjectName"
+            label="Project Name"
+            density="compact"
+            autofocus
+            @keydown.enter="create"
+          />
+          <v-btn
+            color="primary"
+            variant="flat"
+            style="min-width: 40px; min-height: 40px"
+            :disabled="!newProjectName"
+            @click="create"
+          >
+            <v-icon icon="mdi-arrow-right" />
+          </v-btn>
+        </div>
         <v-btn
           v-if="selectedProject"
           class="options"
@@ -248,10 +349,9 @@ export default {
         <v-tabs v-model="currentTab" color="primary">
           <v-tab value="datasets" class="text-grey">Dataset Selection</v-tab>
           <v-tab value="users" class="text-grey">Access Control</v-tab>
-          <v-tab value="map" class="text-grey">Default Map Position</v-tab>
         </v-tabs>
         <div
-          v-if="currentTab == 'datasets' && projDatasets.length"
+          v-if="currentTab == 'datasets' && projDatasets"
           class="py-3 px-6 d-flex"
         >
           <div style="width: 30%">
@@ -308,9 +408,36 @@ export default {
           </div>
         </div>
         <div v-if="currentTab == 'users'" class="py-3 px-6">Users</div>
-        <div v-if="currentTab == 'map'" class="py-3 px-6">Map</div>
       </div>
     </v-card-text>
+    <v-dialog :model-value="!!projectToDelete" width="300">
+      <v-card v-if="projectToDelete">
+        <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+          Delete project
+          <v-btn
+            class="close-button transparent"
+            variant="flat"
+            icon
+            @click="projectToDelete = undefined"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text>
+          Are you sure you want to delete "{{ projectToDelete.name }}"?
+        </v-card-text>
+        <v-card-actions class="d-flex" style="justify-content: space-evenly">
+          <v-btn color="red" @click="del">Delete</v-btn>
+          <v-btn
+            color="primary"
+            @click="projectToDelete = undefined"
+            variant="tonal"
+          >
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
 
diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index 5f4f2f4b..0944aabb 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -197,7 +197,7 @@ export default {
   </v-expansion-panels>
 </template>
 
-<style>
+<style scoped>
 .v-expansion-panel--active
   > .v-expansion-panel-title:not(.v-expansion-panel-title--static) {
   min-height: 30px;
diff --git a/web/src/components/map/Map.vue b/web/src/components/map/Map.vue
index b6069f3c..bf6bf233 100644
--- a/web/src/components/map/Map.vue
+++ b/web/src/components/map/Map.vue
@@ -152,7 +152,7 @@ export default {
 
     onMounted(() => {
       createMap();
-      setMapCenter();
+      setMapCenter(undefined);
     });
 
     return {
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index 5761aca6..58d0290f 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -38,6 +38,7 @@ import {
   styleNetworkVectorTileLayer,
   updateBaseLayer,
 } from "./layers";
+import { Project } from "./types";
 
 export function clearState() {
   availableDatasets.value = undefined;
@@ -86,12 +87,12 @@ export function loadProjects() {
   });
 }
 
-export function setMapCenter() {
+export function setMapCenter(project: Project | undefined) {
   let center: [number, number] = [0, 30];
   let zoom = 1;
-  if (currentProject.value) {
-    center = currentProject.value.default_map_center;
-    zoom = currentProject.value.default_map_zoom;
+  if (project) {
+    center = project.default_map_center;
+    zoom = project.default_map_zoom;
   }
   const map = getMap();
   map.jumpTo({ center, zoom });
@@ -165,7 +166,7 @@ export function clearCurrentNetwork() {
 
 watch(currentProject, () => {
   clearState();
-  setMapCenter();
+  setMapCenter(currentProject.value);
   clearMapLayers();
 });
 watch(currentDataset, () => {

From dba0516f343641da615aaa9912c828a880f0a591 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Fri, 20 Sep 2024 19:40:19 +0000
Subject: [PATCH 12/40] feat: add Access Control interface

---
 uvdat/core/rest/project.py           |   9 +
 web/src/App.vue                      |   1 +
 web/src/components/AccessControl.vue | 375 +++++++++++++++++++++++++++
 web/src/components/DatasetList.vue   |  17 +-
 web/src/components/ProjectConfig.vue |  47 +++-
 5 files changed, 436 insertions(+), 13 deletions(-)
 create mode 100644 web/src/components/AccessControl.vue

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index f4479036..8fd11419 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -25,8 +25,17 @@ def perform_create(self, serializer):
     def partial_update(self, request, id):
         project = self.get_object()
         dataset_ids = request.data.pop('dataset_ids', None)
+        owner_id = request.data.pop('owner', None)
+        collaborator_ids = request.data.pop('collaborators', None)
+        follower_ids = request.data.pop('followers', None)
         if dataset_ids is not None:
             project.datasets.set(Dataset.objects.filter(id__in=dataset_ids))
+        if owner_id is not None:
+            project.owner = User.objects.get(id=owner_id)
+        if collaborator_ids is not None:
+            project.collaborators.set(User.objects.filter(id__in=collaborator_ids))
+        if follower_ids is not None:
+            project.followers.set(User.objects.filter(id__in=follower_ids))
         serializer = ProjectSerializer(project, data=request.data, partial=True)
         if serializer.is_valid():
             serializer.save()
diff --git a/web/src/App.vue b/web/src/App.vue
index 75a93fc2..1fbf6a93 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -44,6 +44,7 @@ export default defineComponent({
 
     onMounted(onReady);
     watch(currentUser, onReady);
+    watch(projectConfigMode, loadProjects);
 
     return {
       login,
diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
new file mode 100644
index 00000000..cd63f3e3
--- /dev/null
+++ b/web/src/components/AccessControl.vue
@@ -0,0 +1,375 @@
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { onMounted, ref, Ref } from "vue";
+import { User } from "@/types";
+import { getUsers, patchProject } from "@/api/rest";
+
+export default {
+  props: {
+    project: {
+      required: true,
+      type: Object,
+    },
+    permissions: {
+      required: true,
+      type: Object,
+    },
+  },
+  emits: ["updateSelectedProject"],
+  setup(props: any, { emit }: any) {
+    const allUsers: Ref<User[]> = ref([]);
+    const showUserSelectDialog: Ref<boolean> = ref(false);
+    const userSelectDialogMode: Ref<string> = ref("add");
+    const selectedUsers: Ref<User[]> = ref([]);
+    const selectedPermissionLevel: Ref<string> = ref("follower");
+    const permissionLevels = ["follower", "collaborator"];
+    const userToRemove: Ref<User | undefined> = ref();
+
+    function savePermissions() {
+      const newPermissions = {
+        owner: props.project.owner?.id,
+        collaborators: props.project.collaborators.map((u: User) => u.id),
+        followers: props.project.followers.map((u: User) => u.id),
+      };
+      if (userToRemove.value) {
+        newPermissions.collaborators = newPermissions.collaborators.filter(
+          (uid: number) => uid != userToRemove.value?.id
+        );
+        newPermissions.followers = newPermissions.followers.filter(
+          (uid: number) => uid != userToRemove.value?.id
+        );
+      } else if (
+        ["transfer", "claim"].includes(userSelectDialogMode.value) &&
+        selectedUsers.value.length == 1
+      ) {
+        if (!newPermissions.collaborators.includes(newPermissions.owner)) {
+          newPermissions.collaborators.push(newPermissions.owner);
+        }
+        if (newPermissions.collaborators.includes(selectedUsers.value[0].id)) {
+          newPermissions.collaborators = newPermissions.collaborators.filter(
+            (uid: number) => uid != selectedUsers.value[0].id
+          );
+        }
+        if (newPermissions.followers.includes(selectedUsers.value[0].id)) {
+          newPermissions.followers = newPermissions.followers.filter(
+            (uid: number) => uid != selectedUsers.value[0].id
+          );
+        }
+        newPermissions.owner = selectedUsers.value[0].id;
+      } else if (selectedPermissionLevel.value == "collaborator") {
+        selectedUsers.value.forEach((u: User) => {
+          if (!newPermissions.collaborators.includes(u.id)) {
+            newPermissions.collaborators.push(u.id);
+          }
+        });
+      } else if (selectedPermissionLevel.value == "follower") {
+        selectedUsers.value.forEach((u: User) => {
+          if (!newPermissions.followers.includes(u.id)) {
+            newPermissions.followers.push(u.id);
+          }
+        });
+      }
+      patchProject(props.project.id, newPermissions).then((project) => {
+        emit("updateSelectedProject", project);
+        selectedUsers.value = [];
+        selectedPermissionLevel.value = "follower";
+        showUserSelectDialog.value = false;
+        userToRemove.value = undefined;
+      });
+    }
+
+    onMounted(() => {
+      getUsers().then((data) => {
+        allUsers.value = data;
+      });
+    });
+
+    return {
+      allUsers,
+      showUserSelectDialog,
+      userSelectDialogMode,
+      selectedUsers,
+      selectedPermissionLevel,
+      permissionLevels,
+      userToRemove,
+      savePermissions,
+    };
+  },
+};
+</script>
+
+<template>
+  <div style="max-width: 500px">
+    <v-list>
+      <v-list-subheader>
+        Owner
+        <v-tooltip activator="parent" location="end">
+          Permissions: Read, Write, Delete, Access Control
+        </v-tooltip>
+      </v-list-subheader>
+      <v-list-item
+        v-if="project.owner"
+        :title="
+          project.owner.first_name && project.owner.last_name
+            ? project.owner.first_name + ' ' + project.owner.last_name
+            : project.owner.username
+        "
+        :subtitle="project.owner.email"
+      >
+        <template v-slot:prepend>
+          <v-btn
+            flat
+            icon
+            color="primary"
+            size="small"
+            class="mx-3 user-circle"
+            :ripple="false"
+          >
+            {{ project.owner.first_name[0] }}
+            {{ project.owner.last_name[0] }}
+            <v-tooltip activator="parent" location="end">
+              {{ project.owner.first_name }}
+              {{ project.owner.last_name }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-pencil"
+            @click="
+              showUserSelectDialog = true;
+              userSelectDialogMode = 'transfer';
+            "
+          />
+        </template>
+      </v-list-item>
+      <v-list-item v-else class="mx-4" subtitle="No owner">
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-pencil"
+            @click="
+              showUserSelectDialog = true;
+              userSelectDialogMode = 'claim';
+            "
+          />
+        </template>
+      </v-list-item>
+      <v-list-subheader>
+        Collaborators
+        <v-tooltip activator="parent" location="end">
+          Permissions: Read, Write
+        </v-tooltip>
+      </v-list-subheader>
+      <v-list-item
+        v-for="collaborator in project.collaborators"
+        :key="collaborator.id"
+        :title="
+          collaborator.first_name && collaborator.last_name
+            ? collaborator.first_name + ' ' + collaborator.last_name
+            : collaborator.username
+        "
+        :subtitle="collaborator.email"
+      >
+        <template v-slot:prepend>
+          <v-btn
+            flat
+            icon
+            color="primary"
+            size="small"
+            class="mx-3 user-circle"
+            :ripple="false"
+          >
+            {{ collaborator.first_name[0] }}
+            {{ collaborator.last_name[0] }}
+            <v-tooltip activator="parent" location="end">
+              {{ collaborator.first_name }}
+              {{ collaborator.last_name }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-trash-can"
+            @click="userToRemove = collaborator"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item
+        v-if="!project.collaborators.length"
+        subtitle="No collaborators"
+        class="mx-4"
+      />
+      <v-list-subheader>
+        Followers
+        <v-tooltip activator="parent" location="end">
+          Permissions: Read, Write
+        </v-tooltip>
+      </v-list-subheader>
+      <v-list-item
+        v-for="follower in project.followers"
+        :key="follower.id"
+        :title="
+          follower.first_name && follower.last_name
+            ? follower.first_name + ' ' + follower.last_name
+            : follower.username
+        "
+        :subtitle="follower.email"
+      >
+        <template v-slot:prepend>
+          <v-btn
+            flat
+            icon
+            color="primary"
+            size="small"
+            class="mx-3 user-circle"
+            :ripple="false"
+          >
+            {{ follower.first_name[0] }}
+            {{ follower.last_name[0] }}
+            <v-tooltip activator="parent" location="end">
+              {{ follower.first_name }}
+              {{ follower.last_name }}
+            </v-tooltip>
+          </v-btn>
+        </template>
+        <template v-slot:append>
+          <v-icon
+            v-if="permissions[project.id] == 'own'"
+            icon="mdi-trash-can"
+            @click="userToRemove = follower"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item
+        v-if="!project.followers.length"
+        subtitle="No followers"
+        class="mx-4"
+      />
+    </v-list>
+    <v-btn
+      v-if="permissions[project.id] == 'own'"
+      color="primary"
+      @click="
+        showUserSelectDialog = true;
+        userSelectDialogMode = 'add';
+      "
+    >
+      Add Users
+    </v-btn>
+    <v-dialog v-model="showUserSelectDialog" width="500">
+      <v-card>
+        <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+          {{ userSelectDialogMode == "add" ? "Add Users" : "Select New Owner" }}
+          <v-btn
+            class="close-button transparent"
+            variant="flat"
+            icon
+            @click="showUserSelectDialog = false"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-messages
+          color="red"
+          :active="userSelectDialogMode == 'transfer'"
+          :messages="[
+            'Warning: After transferring ownership to another user, you will no \
+            longer be able to make changes to permissions or delete the project. \
+            You will be added as a collaborator with read/write permissions.',
+          ]"
+          class="pa-3"
+        />
+        <v-card-text>
+          <v-select
+            v-model="selectedUsers"
+            :items="allUsers"
+            :label="
+              userSelectDialogMode == 'add'
+                ? 'Users to add'
+                : 'New project owner'
+            "
+            item-title="username"
+            :rules="[
+              (v) =>
+                !(
+                  ['transfer', 'claim'].includes(userSelectDialogMode) &&
+                  v.length > 1
+                ) || 'Must select one new owner',
+            ]"
+            return-object
+            multiple
+            clearable
+            chips
+            closable-chips
+          >
+            <template v-slot:item="{ props, item }">
+              <v-list-item
+                v-bind="props"
+                :title="
+                  item.raw.first_name && item.raw.last_name
+                    ? item.raw.first_name + ' ' + item.raw.last_name
+                    : item.raw.username
+                "
+                :subtitle="item.raw.email"
+              ></v-list-item>
+            </template>
+          </v-select>
+          <v-select
+            v-if="userSelectDialogMode == 'add'"
+            v-model="selectedPermissionLevel"
+            :items="permissionLevels"
+            label="Permission Level"
+          />
+          <v-card-actions>
+            <v-btn
+              color="primary"
+              @click="savePermissions"
+              :disabled="!selectedUsers.length"
+            >
+              Submit
+            </v-btn>
+          </v-card-actions>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    <v-dialog :model-value="!!userToRemove" width="500">
+      <v-card>
+        <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
+          Remove User
+          <v-btn
+            class="close-button transparent"
+            variant="flat"
+            icon
+            @click="userToRemove = undefined"
+          >
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-card-text v-if="userToRemove">
+          Are you sure you want to remove {{ userToRemove.username }} from this
+          project?
+        </v-card-text>
+        <v-card-actions class="d-flex" style="justify-content: space-evenly">
+          <v-btn color="red" @click="savePermissions">Delete</v-btn>
+          <v-btn
+            color="primary"
+            @click="userToRemove = undefined"
+            variant="tonal"
+          >
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<style scoped>
+.user-circle {
+  letter-spacing: -2px;
+  font-weight: bold;
+}
+</style>
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index 38a8f5b8..fdd24cfa 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { onMounted, ref, Ref, computed, ComputedRef } from "vue";
+import { onMounted, ref, Ref, computed, ComputedRef, watch } from "vue";
 import { Dataset } from "@/types";
 import { getDatasetLayers } from "@/api/rest";
 
@@ -27,6 +27,7 @@ export default {
   setup(props: any, { emit }: any) {
     const groupByOptions = ["category", "dataset_type"];
     const groupByKey = ref(["category"]);
+    const numDatasets = computed(() => props.datasets.length);
     const filterMenuItems: ComputedRef<Record<string, string[]>> = computed(
       () => {
         const menuItems: Record<string, string[]> = Object.fromEntries(
@@ -87,6 +88,12 @@ export default {
       emit("toggleDatasets", { show, datasets });
     }
 
+    watch(numDatasets, () => {
+      filters.value = Object.fromEntries(
+        groupByOptions.map((opt) => [opt, []])
+      );
+    });
+
     onMounted(fetchAllLayers);
 
     return {
@@ -104,7 +111,11 @@ export default {
 
 <template>
   <div class="px-1" style="width: 100%">
-    <div class="d-flex position-sticky top-0" style="align-items: center">
+    <v-card
+      flat
+      class="d-flex position-sticky top-0 pa-2"
+      style="align-items: center; z-index: 2"
+    >
       <v-text-field
         v-model="searchText"
         label="Search Datasets"
@@ -205,7 +216,7 @@ export default {
           </v-list>
         </v-card>
       </v-menu>
-    </div>
+    </v-card>
     <div
       v-for="groupName in Object.keys(datasetGroups)"
       :key="groupName"
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index f21f1235..201cc3e1 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -7,19 +7,19 @@ import {
   currentUser,
 } from "@/store";
 import DatasetList from "./DatasetList.vue";
+import AccessControl from "./AccessControl.vue";
 import {
-  getUsers,
   getDatasets,
   getProjectDatasets,
   createProject,
   deleteProject,
   patchProject,
 } from "@/api/rest";
-import { User, Project, Dataset } from "@/types";
+import { Project, Dataset } from "@/types";
 import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
 
 export default {
-  components: { DatasetList },
+  components: { AccessControl, DatasetList },
   setup() {
     const currentTab = ref();
     const searchText = ref();
@@ -41,11 +41,14 @@ export default {
       );
     });
     const otherSelectedDatasetIds: Ref<number[]> = ref([]);
-    const allUsers: Ref<User[]> = ref([]);
+
     const permissions = computed(() => {
       const ret = Object.fromEntries(
         availableProjects.value.map((p) => {
           let perm = "view";
+          if (p.id == selectedProject.value?.id) {
+            p = selectedProject.value;
+          }
           if (
             p.owner?.id == currentUser.value?.id ||
             currentUser.value?.is_superuser
@@ -79,13 +82,20 @@ export default {
     function del() {
       if (projectToDelete.value) {
         deleteProject(projectToDelete.value.id).then(() => {
-          projectToDelete.value = undefined;
           loadProjects();
+          if (selectedProject.value?.id == projectToDelete.value?.id) {
+            selectedProject.value = undefined;
+          }
+          projectToDelete.value = undefined;
         });
       }
     }
 
     function saveProjectName() {
+      if (!newProjectName.value) {
+        projectToEdit.value = undefined;
+        return;
+      }
       saving.value = true;
       if (projectToEdit.value) {
         patchProject(projectToEdit.value.id, {
@@ -187,6 +197,11 @@ export default {
       }
     }
 
+    function updateSelectedProject(newProjectData: Project) {
+      loadProjects();
+      selectedProject.value = newProjectData;
+    }
+
     watch(selectedProject, () => {
       projectConfigMode.value = true;
       newProjectName.value = undefined;
@@ -195,9 +210,6 @@ export default {
     });
 
     onMounted(() => {
-      getUsers().then((data) => {
-        allUsers.value = data;
-      });
       getDatasets().then((data) => {
         allDatasets.value = data;
       });
@@ -213,7 +225,6 @@ export default {
       otherSelectedDatasetIds,
       projDatasets,
       projSelectedDatasetIds,
-      allUsers,
       permissions,
       saving,
       newProjectName,
@@ -228,6 +239,7 @@ export default {
       toggleProjDatasetSelection,
       addAllSelectionToProject,
       removeProjSelectionFromProject,
+      updateSelectedProject,
     };
   },
 };
@@ -325,6 +337,7 @@ export default {
             density="compact"
             autofocus
             @keydown.enter="create"
+            @keydown.esc="projectConfigMode = true"
           />
           <v-btn
             color="primary"
@@ -336,6 +349,13 @@ export default {
             <v-icon icon="mdi-arrow-right" />
           </v-btn>
         </div>
+        <v-btn
+          v-else
+          variant="tonal"
+          width="100%"
+          @click="projectConfigMode = 'new'"
+          >+ New</v-btn
+        >
         <v-btn
           v-if="selectedProject"
           class="options"
@@ -407,7 +427,13 @@ export default {
             </v-btn>
           </div>
         </div>
-        <div v-if="currentTab == 'users'" class="py-3 px-6">Users</div>
+        <div v-if="currentTab == 'users'" class="py-3 px-6">
+          <access-control
+            :project="selectedProject"
+            :permissions="permissions"
+            @updateSelectedProject="updateSelectedProject"
+          />
+        </div>
       </div>
     </v-card-text>
     <v-dialog :model-value="!!projectToDelete" width="300">
@@ -462,6 +488,7 @@ export default {
 .options {
   position: absolute !important;
   bottom: 0px;
+  left: 0px;
   width: inherit;
 }
 .tab-content {

From b933d2f842f8d4401fd1a3febc0713020e0422a5 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 25 Sep 2024 21:14:55 +0000
Subject: [PATCH 13/40] fix: Change groupBy control to radio buttons

---
 web/src/components/DatasetList.vue | 33 ++++++++----------------------
 1 file changed, 9 insertions(+), 24 deletions(-)

diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index fdd24cfa..0a36f09e 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -26,7 +26,7 @@ export default {
   emits: ["toggleDatasets"],
   setup(props: any, { emit }: any) {
     const groupByOptions = ["category", "dataset_type"];
-    const groupByKey = ref(["category"]);
+    const groupByKey = ref("category");
     const numDatasets = computed(() => props.datasets.length);
     const filterMenuItems: ComputedRef<Record<string, string[]>> = computed(
       () => {
@@ -69,7 +69,7 @@ export default {
     const datasetGroups = computed(() => {
       const groups: Record<string, Dataset[]> = {};
       filteredDatasets.value.forEach((dataset: any) => {
-        const groupName = dataset[groupByKey.value[0]];
+        const groupName = dataset[groupByKey.value];
         if (!groups[groupName]) {
           groups[groupName] = [];
         }
@@ -139,32 +139,17 @@ export default {
           <v-card-text style="background-color: lightgrey" class="py-2">
             Group by
           </v-card-text>
-          <v-list
-            density="compact"
-            selectable
-            mandatory
-            select-strategy="single-leaf"
-            v-model:selected="groupByKey"
-          >
-            <v-list-item
+          <v-radio-group v-model="groupByKey">
+            <v-radio
               v-for="option in groupByOptions"
               :key="option"
               :value="option"
             >
-              <v-list-item-title class="capitalize">
-                {{ option.replace("_", " ") }}
-              </v-list-item-title>
-              <template v-slot:append="{ isSelected }">
-                <v-checkbox
-                  :model-value="isSelected"
-                  density="compact"
-                  class="ml-4"
-                  style="vertical-align: bottom"
-                  hide-details
-                />
+              <template v-slot:label>
+                <span class="capitalize">{{ option.replace("_", " ") }}</span>
               </template>
-            </v-list-item>
-          </v-list>
+            </v-radio>
+          </v-radio-group>
           <v-card-text style="background-color: lightgrey" class="py-2">
             Filter by
           </v-card-text>
@@ -234,7 +219,7 @@ export default {
         @update:model-value="toggleDatasets($event, datasetGroups[groupName])"
       />
       <v-card-subtitle class="group-title capitalize text-caption px-1">
-        {{ groupByKey[0].replace("_", " ") }}: {{ groupName.toLowerCase() }}
+        {{ groupByKey.replace("_", " ") }}: {{ groupName.toLowerCase() }}
       </v-card-subtitle>
       <v-expansion-panels multiple>
         <v-expansion-panel

From a070f833b9027742e17e405a7d2612a4975c2d91 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Wed, 25 Sep 2024 21:17:56 +0000
Subject: [PATCH 14/40] style: Adjust vertical alignment of object counts,
 flush with icons

---
 web/src/components/MainDrawerContents.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index aa991f28..99b39f37 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -113,13 +113,21 @@ export default {
             {{ project.name }}
             <div style="color: grey" class="mt-2">
               <v-icon icon="mdi-database-outline" size="small" />
-              <span class="mr-3">{{ project.item_counts.datasets }}</span>
+              <span class="mr-3" style="vertical-align: text-bottom">
+                {{ project.item_counts.datasets }}
+              </span>
               <v-icon icon="mdi-border-none-variant" size="small" />
-              <span class="mr-3">{{ project.item_counts.regions }}</span>
+              <span class="mr-3" style="vertical-align: text-bottom">
+                {{ project.item_counts.regions }}
+              </span>
               <v-icon icon="mdi-chart-bar" size="small" />
-              <span class="mr-3">{{ project.item_counts.charts }}</span>
+              <span class="mr-3" style="vertical-align: text-bottom">
+                {{ project.item_counts.charts }}
+              </span>
               <v-icon icon="mdi-earth" size="small" />
-              <span class="mr-3">{{ project.item_counts.simulations }}</span>
+              <span class="mr-3" style="vertical-align: text-bottom">
+                {{ project.item_counts.simulations }}
+              </span>
             </div>
           </div>
           <div class="location-menu">

From 3a71b3aa0a302002c0096535849c6ae175e598ff Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 30 Sep 2024 22:47:14 +0000
Subject: [PATCH 15/40] fix: add `item_counts` to `ProjectSerializer` for new
 sidebar design

---
 uvdat/core/rest/serializers.py | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/uvdat/core/rest/serializers.py b/uvdat/core/rest/serializers.py
index 55668815..7544c0c6 100644
--- a/uvdat/core/rest/serializers.py
+++ b/uvdat/core/rest/serializers.py
@@ -33,6 +33,7 @@ class ProjectSerializer(serializers.ModelSerializer):
     owner = serializers.SerializerMethodField('get_owner')
     collaborators = serializers.SerializerMethodField('get_collaborators')
     followers = serializers.SerializerMethodField('get_followers')
+    item_counts = serializers.SerializerMethodField('get_item_counts')
 
     def get_center(self, obj):
         # Web client expects Lon, Lat
@@ -54,6 +55,14 @@ def get_followers(self, obj):
         users = get_users_with_perms(obj, only_with_perms_in=['follower'])
         return [UserSerializer(user).data for user in users.all()]
 
+    def get_item_counts(self, obj):
+        return {
+            'datasets': obj.datasets.count(),
+            'regions': obj.derived_regions.count(),
+            'charts': obj.charts.count(),
+            'simulations': obj.simulation_results.count(),
+        }
+
     def to_internal_value(self, data):
         center = data.get('default_map_center')
         data = super().to_internal_value(data)

From 294ab3c69841db3b8a2ea18bff11c3731e997e72 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 30 Sep 2024 22:47:47 +0000
Subject: [PATCH 16/40] fix: update setting permissions in Project
 `partial_update`

---
 uvdat/core/rest/project.py | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 8fd11419..b1ab01f7 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -25,17 +25,16 @@ def perform_create(self, serializer):
     def partial_update(self, request, id):
         project = self.get_object()
         dataset_ids = request.data.pop('dataset_ids', None)
-        owner_id = request.data.pop('owner', None)
-        collaborator_ids = request.data.pop('collaborators', None)
-        follower_ids = request.data.pop('followers', None)
         if dataset_ids is not None:
             project.datasets.set(Dataset.objects.filter(id__in=dataset_ids))
-        if owner_id is not None:
-            project.owner = User.objects.get(id=owner_id)
-        if collaborator_ids is not None:
-            project.collaborators.set(User.objects.filter(id__in=collaborator_ids))
-        if follower_ids is not None:
-            project.followers.set(User.objects.filter(id__in=follower_ids))
+        owner_id = request.data.pop('owner', None)
+        collaborator_ids = request.data.pop('collaborators', [])
+        follower_ids = request.data.pop('followers', [])
+        project.set_permissions(
+            owner=User.objects.filter(id=owner_id),
+            collaborator=User.objects.filter(id__in=collaborator_ids),
+            follower=User.objects.filter(id__in=follower_ids),
+        )
         serializer = ProjectSerializer(project, data=request.data, partial=True)
         if serializer.is_valid():
             serializer.save()

From 513959a1408d3c0eedcc4b89da82bb641826b2e7 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Mon, 30 Sep 2024 22:48:45 +0000
Subject: [PATCH 17/40] fix: update references to `resetMap` -> `setMapCenter`

---
 web/src/components/MainDrawerContents.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 99b39f37..e3cccc87 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -2,7 +2,7 @@
 import { ref, Ref, computed } from "vue";
 import { availableProjects, currentProject, projectConfigMode } from "@/store";
 import ProjectContents from "./ProjectContents.vue";
-import { getCurrentMapPosition, resetMap } from "@/storeFunctions";
+import { getCurrentMapPosition, setMapCenter } from "@/storeFunctions";
 import { Project } from "@/types";
 import { patchProject } from "@/api/rest";
 
@@ -38,7 +38,7 @@ export default {
           }
           return p;
         });
-        resetMap(project);
+        setMapCenter(project);
         saving.value = "done";
       });
     }
@@ -49,7 +49,7 @@ export default {
       searchText,
       saving,
       openProjectConfig,
-      resetMap,
+      setMapCenter,
       saveProjectMapLocation,
     };
   },
@@ -141,7 +141,7 @@ export default {
             >
               <v-card width="250">
                 <v-list selectable>
-                  <v-list-item @click="resetMap(project)">
+                  <v-list-item @click="setMapCenter(project)">
                     Go to project default map position
                   </v-list-item>
                   <v-list-item @click="saveProjectMapLocation(project)">

From 744e12452331f7f382f1e48e6aa32d924bf4890a Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 1 Oct 2024 00:00:47 +0000
Subject: [PATCH 18/40] fix: reverse map coord ordering in API

---
 uvdat/core/rest/serializers.py | 2 +-
 web/src/storeFunctions.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/uvdat/core/rest/serializers.py b/uvdat/core/rest/serializers.py
index 7544c0c6..bf4a438a 100644
--- a/uvdat/core/rest/serializers.py
+++ b/uvdat/core/rest/serializers.py
@@ -67,7 +67,7 @@ def to_internal_value(self, data):
         center = data.get('default_map_center')
         data = super().to_internal_value(data)
         if isinstance(center, list):
-            data['default_map_center'] = Point(*center)
+            data['default_map_center'] = Point(center[1], center[0])
         return data
 
     class Meta:
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index 58d0290f..8b324d25 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -103,7 +103,7 @@ export function getCurrentMapPosition() {
   let center = [0, 0];
   let zoom = map.getZoom();
   const centerLngLat = map.getCenter();
-  if (centerLngLat) center = [centerLngLat.lat, centerLngLat.lng];
+  if (centerLngLat) center = [centerLngLat.lng, centerLngLat.lat];
   if (zoom) zoom = Math.floor(zoom);
   else zoom = 1;
   return { center, zoom };

From 99bee913574e2b04cf113e6d1a4985d6885a32f0 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 1 Oct 2024 21:21:21 +0000
Subject: [PATCH 19/40] fix: update `set_permissions` call in
 `ProjectViewSet.partial_update`

---
 uvdat/core/rest/project.py | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index b1ab01f7..00074627 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -30,11 +30,12 @@ def partial_update(self, request, id):
         owner_id = request.data.pop('owner', None)
         collaborator_ids = request.data.pop('collaborators', [])
         follower_ids = request.data.pop('followers', [])
-        project.set_permissions(
-            owner=User.objects.filter(id=owner_id),
-            collaborator=User.objects.filter(id__in=collaborator_ids),
-            follower=User.objects.filter(id__in=follower_ids),
-        )
+        if owner_id is not None:
+            project.set_permissions(
+                owner=User.objects.get(id=owner_id),
+                collaborator=User.objects.filter(id__in=collaborator_ids),
+                follower=User.objects.filter(id__in=follower_ids),
+            )
         serializer = ProjectSerializer(project, data=request.data, partial=True)
         if serializer.is_valid():
             serializer.save()

From cff13c4cdadaf97b27d3e1588ee93930aa90af81 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 1 Oct 2024 17:41:15 -0400
Subject: [PATCH 20/40] refactor: update web/src/storeFunctions.ts

Co-authored-by: Jacob Nesbitt <jjnesbitt2@gmail.com>
---
 web/src/storeFunctions.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index 8b324d25..cca9df5c 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -100,13 +100,11 @@ export function setMapCenter(project: Project | undefined) {
 
 export function getCurrentMapPosition() {
   const map = getMap();
-  let center = [0, 0];
-  let zoom = map.getZoom();
-  const centerLngLat = map.getCenter();
-  if (centerLngLat) center = [centerLngLat.lng, centerLngLat.lat];
-  if (zoom) zoom = Math.floor(zoom);
-  else zoom = 1;
-  return { center, zoom };
+  const { lat, lng } = map.getCenter();
+  return {
+    center: [lng, lat],
+    zoom: map.getZoom(),
+  };
 }
 
 export async function loadDerivedRegions() {

From d2bffde373e24062094136fdfeaf3fd6a46934d8 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 20:55:39 +0000
Subject: [PATCH 21/40] refactor: separate Project update endpoints, don't
 override `partial_update`

---
 uvdat/core/rest/project.py           | 46 +++++++++----------
 uvdat/core/rest/serializers.py       |  6 +++
 web/src/api/rest.ts                  | 11 ++++-
 web/src/components/AccessControl.vue | 68 ++++++++++++++++------------
 web/src/components/ProjectConfig.vue |  8 ++--
 web/src/types.ts                     | 13 ++++++
 6 files changed, 95 insertions(+), 57 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 00074627..2a4fefef 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -1,12 +1,20 @@
+from typing import Any
+
 from django.contrib.auth.models import User
 from django.http import HttpResponse
+from drf_yasg.utils import swagger_auto_schema
 from rest_framework.decorators import action
+from rest_framework.request import Request
 from rest_framework.response import Response
 from rest_framework.viewsets import ModelViewSet
 
 from uvdat.core.models import Dataset, Project
 from uvdat.core.rest.access_control import GuardianFilter, GuardianPermission
-from uvdat.core.rest.serializers import DatasetSerializer, ProjectSerializer
+from uvdat.core.rest.serializers import (
+    DatasetSerializer,
+    ProjectPermissionsSerializer,
+    ProjectSerializer,
+)
 from uvdat.core.tasks.osmnx import load_roads
 
 
@@ -22,29 +30,21 @@ def perform_create(self, serializer):
         user: User = self.request.user
         project.set_permissions(owner=user)
 
-    def partial_update(self, request, id):
-        project = self.get_object()
-        dataset_ids = request.data.pop('dataset_ids', None)
-        if dataset_ids is not None:
-            project.datasets.set(Dataset.objects.filter(id__in=dataset_ids))
-        owner_id = request.data.pop('owner', None)
-        collaborator_ids = request.data.pop('collaborators', [])
-        follower_ids = request.data.pop('followers', [])
-        if owner_id is not None:
-            project.set_permissions(
-                owner=User.objects.get(id=owner_id),
-                collaborator=User.objects.filter(id__in=collaborator_ids),
-                follower=User.objects.filter(id__in=follower_ids),
-            )
-        serializer = ProjectSerializer(project, data=request.data, partial=True)
-        if serializer.is_valid():
-            serializer.save()
-        project.save()
-        response = ProjectSerializer(project).data
-        response.update(
-            datasets=[DatasetSerializer(dataset).data for dataset in project.datasets.all()]
+    @swagger_auto_schema(method='PUT', request_body=ProjectPermissionsSerializer)
+    @action(detail=True, methods=['PUT'])
+    def permissions(self, request: Request, *args: Any, **kwargs: Any):
+        serializer = ProjectPermissionsSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        data = serializer.validated_data
+        project: Project = self.get_object()
+        project.set_permissions(
+            owner=User.objects.get(id=data['owner_id']),
+            collaborator=list(User.objects.filter(id__in=data['collaborator_ids'])),
+            follower=list(User.objects.filter(id__in=data['follower_ids'])),
         )
-        return Response(response, status=200)
+
+        return Response(ProjectSerializer(project).data, status=200)
 
     @action(detail=True, methods=['get'])
     def regions(self, request, **kwargs):
diff --git a/uvdat/core/rest/serializers.py b/uvdat/core/rest/serializers.py
index bf4a438a..48f1e851 100644
--- a/uvdat/core/rest/serializers.py
+++ b/uvdat/core/rest/serializers.py
@@ -28,6 +28,12 @@ class Meta:
         fields = ['id', 'username', 'email', 'first_name', 'last_name', 'is_superuser']
 
 
+class ProjectPermissionsSerializer(serializers.Serializer):
+    owner_id = serializers.IntegerField()
+    collaborator_ids = serializers.ListField(child=serializers.IntegerField())
+    follower_ids = serializers.ListField(child=serializers.IntegerField())
+
+
 class ProjectSerializer(serializers.ModelSerializer):
     default_map_center = serializers.SerializerMethodField('get_center')
     owner = serializers.SerializerMethodField('get_owner')
diff --git a/web/src/api/rest.ts b/web/src/api/rest.ts
index f38eb42e..59298a7a 100644
--- a/web/src/api/rest.ts
+++ b/web/src/api/rest.ts
@@ -2,6 +2,8 @@ import { apiClient } from "./auth";
 import {
   User,
   Project,
+  ProjectPatch,
+  ProjectPermissions,
   Dataset,
   NetworkNode,
   RasterData,
@@ -37,11 +39,18 @@ export async function createProject(
 
 export async function patchProject(
   projectId: number,
-  data: object
+  data: ProjectPatch
 ): Promise<Project> {
   return (await apiClient.patch(`projects/${projectId}/`, data)).data;
 }
 
+export async function updateProjectPermissions(
+  projectId: number,
+  data: ProjectPermissions
+): Promise<Project> {
+  return (await apiClient.put(`projects/${projectId}/permissions/`, data)).data;
+}
+
 export async function deleteProject(projectId: number): Promise<Project> {
   return await apiClient.delete(`projects/${projectId}/`).data;
 }
diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index cd63f3e3..68458d2e 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { onMounted, ref, Ref } from "vue";
-import { User } from "@/types";
-import { getUsers, patchProject } from "@/api/rest";
+import { ProjectPermissions, User } from "@/types";
+import { getUsers, updateProjectPermissions } from "@/api/rest";
 
 export default {
   props: {
@@ -26,56 +26,64 @@ export default {
     const userToRemove: Ref<User | undefined> = ref();
 
     function savePermissions() {
-      const newPermissions = {
-        owner: props.project.owner?.id,
-        collaborators: props.project.collaborators.map((u: User) => u.id),
-        followers: props.project.followers.map((u: User) => u.id),
+      const newPermissions: ProjectPermissions = {
+        owner_id: props.project.owner?.id,
+        collaborator_ids: props.project.collaborators.map((u: User) => u.id),
+        follower_ids: props.project.followers.map((u: User) => u.id),
       };
       if (userToRemove.value) {
-        newPermissions.collaborators = newPermissions.collaborators.filter(
-          (uid: number) => uid != userToRemove.value?.id
-        );
-        newPermissions.followers = newPermissions.followers.filter(
+        newPermissions.collaborator_ids =
+          newPermissions.collaborator_ids.filter(
+            (uid: number) => uid != userToRemove.value?.id
+          );
+        newPermissions.follower_ids = newPermissions.follower_ids.filter(
           (uid: number) => uid != userToRemove.value?.id
         );
       } else if (
         ["transfer", "claim"].includes(userSelectDialogMode.value) &&
         selectedUsers.value.length == 1
       ) {
-        if (!newPermissions.collaborators.includes(newPermissions.owner)) {
-          newPermissions.collaborators.push(newPermissions.owner);
+        if (
+          !newPermissions.collaborator_ids.includes(newPermissions.owner_id)
+        ) {
+          newPermissions.collaborator_ids.push(newPermissions.owner_id);
         }
-        if (newPermissions.collaborators.includes(selectedUsers.value[0].id)) {
-          newPermissions.collaborators = newPermissions.collaborators.filter(
-            (uid: number) => uid != selectedUsers.value[0].id
-          );
+        if (
+          newPermissions.collaborator_ids.includes(selectedUsers.value[0].id)
+        ) {
+          newPermissions.collaborator_ids =
+            newPermissions.collaborator_ids.filter(
+              (uid: number) => uid != selectedUsers.value[0].id
+            );
         }
-        if (newPermissions.followers.includes(selectedUsers.value[0].id)) {
-          newPermissions.followers = newPermissions.followers.filter(
+        if (newPermissions.follower_ids.includes(selectedUsers.value[0].id)) {
+          newPermissions.follower_ids = newPermissions.follower_ids.filter(
             (uid: number) => uid != selectedUsers.value[0].id
           );
         }
-        newPermissions.owner = selectedUsers.value[0].id;
+        newPermissions.owner_id = selectedUsers.value[0].id;
       } else if (selectedPermissionLevel.value == "collaborator") {
         selectedUsers.value.forEach((u: User) => {
-          if (!newPermissions.collaborators.includes(u.id)) {
-            newPermissions.collaborators.push(u.id);
+          if (!newPermissions.collaborator_ids.includes(u.id)) {
+            newPermissions.collaborator_ids.push(u.id);
           }
         });
       } else if (selectedPermissionLevel.value == "follower") {
         selectedUsers.value.forEach((u: User) => {
-          if (!newPermissions.followers.includes(u.id)) {
-            newPermissions.followers.push(u.id);
+          if (!newPermissions.follower_ids.includes(u.id)) {
+            newPermissions.follower_ids.push(u.id);
           }
         });
       }
-      patchProject(props.project.id, newPermissions).then((project) => {
-        emit("updateSelectedProject", project);
-        selectedUsers.value = [];
-        selectedPermissionLevel.value = "follower";
-        showUserSelectDialog.value = false;
-        userToRemove.value = undefined;
-      });
+      updateProjectPermissions(props.project.id, newPermissions).then(
+        (project) => {
+          emit("updateSelectedProject", project);
+          selectedUsers.value = [];
+          selectedPermissionLevel.value = "follower";
+          showUserSelectDialog.value = false;
+          userToRemove.value = undefined;
+        }
+      );
     }
 
     onMounted(() => {
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 201cc3e1..db822e46 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -189,10 +189,12 @@ export default {
       saving.value = true;
       if (selectedProject.value) {
         patchProject(selectedProject.value.id, {
-          dataset_ids: ids,
+          datasets: ids,
         }).then((project) => {
-          projDatasets.value = project.datasets;
-          saving.value = false;
+          getProjectDatasets(project.id).then((datasets) => {
+            projDatasets.value = datasets;
+            saving.value = false;
+          });
         });
       }
     }
diff --git a/web/src/types.ts b/web/src/types.ts
index e18cbc87..1cf5e746 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -71,6 +71,19 @@ export interface Project {
   };
 }
 
+export interface ProjectPatch {
+  name?: string;
+  datasets?: number[];
+  default_map_center?: number[];
+  default_map_zoom?: number;
+}
+
+export interface ProjectPermissions {
+  owner_id: number;
+  collaborator_ids: number[];
+  follower_ids: number[];
+}
+
 export interface Feature {
   type: string;
   geometry: {

From 07f1a9de4b60b9b078dd9829648b171ceb594339 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 21:03:05 +0000
Subject: [PATCH 22/40] style: remove unused imports

---
 uvdat/core/rest/project.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 2a4fefef..270bbe79 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -8,13 +8,9 @@
 from rest_framework.response import Response
 from rest_framework.viewsets import ModelViewSet
 
-from uvdat.core.models import Dataset, Project
+from uvdat.core.models import Project
 from uvdat.core.rest.access_control import GuardianFilter, GuardianPermission
-from uvdat.core.rest.serializers import (
-    DatasetSerializer,
-    ProjectPermissionsSerializer,
-    ProjectSerializer,
-)
+from uvdat.core.rest.serializers import ProjectPermissionsSerializer, ProjectSerializer
 from uvdat.core.tasks.osmnx import load_roads
 
 

From ccb3e39786a591c939434b2cb8eccfda8ef25073 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 21:07:10 +0000
Subject: [PATCH 23/40] refactor:  `setMapCenter` implicit undefined argument

---
 web/src/api/auth.js            | 2 +-
 web/src/components/map/Map.vue | 2 +-
 web/src/storeFunctions.ts      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/api/auth.js b/web/src/api/auth.js
index 9031b0c5..2c15abb6 100644
--- a/web/src/api/auth.js
+++ b/web/src/api/auth.js
@@ -61,5 +61,5 @@ export const logout = async () => {
   currentUser.value = undefined;
   currentProject.value = undefined;
   clearState();
-  setMapCenter(undefined);
+  setMapCenter();
 };
diff --git a/web/src/components/map/Map.vue b/web/src/components/map/Map.vue
index bf6bf233..b6069f3c 100644
--- a/web/src/components/map/Map.vue
+++ b/web/src/components/map/Map.vue
@@ -152,7 +152,7 @@ export default {
 
     onMounted(() => {
       createMap();
-      setMapCenter(undefined);
+      setMapCenter();
     });
 
     return {
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index cca9df5c..087c0cc0 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -87,7 +87,7 @@ export function loadProjects() {
   });
 }
 
-export function setMapCenter(project: Project | undefined) {
+export function setMapCenter(project: Project | undefined = undefined) {
   let center: [number, number] = [0, 30];
   let zoom = 1;
   if (project) {

From 6ce1e6f43bb1e17533acab52aab858ce7c4afd5f Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 21:12:06 +0000
Subject: [PATCH 24/40] refactor: explicitly define acceptable values for
 `projectConfigMode`

---
 web/src/components/MainDrawerContents.vue |  2 +-
 web/src/components/ProjectConfig.vue      | 10 +++++-----
 web/src/store.ts                          |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index e3cccc87..88e8cbc8 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -21,7 +21,7 @@ export default {
     });
 
     function openProjectConfig(create = false) {
-      projectConfigMode.value = create ? "new" : true;
+      projectConfigMode.value = create ? "new" : "existing";
     }
 
     function saveProjectMapLocation(project: Project) {
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index db822e46..3492bd16 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -74,7 +74,7 @@ export default {
       const { center, zoom } = getCurrentMapPosition();
       createProject(newProjectName.value, center, zoom).then(() => {
         newProjectName.value = undefined;
-        projectConfigMode.value = true;
+        projectConfigMode.value = "existing";
         loadProjects();
       });
     }
@@ -122,7 +122,7 @@ export default {
 
     function loadSelectedProject() {
       currentProject.value = selectedProject.value;
-      projectConfigMode.value = false;
+      projectConfigMode.value = undefined;
     }
 
     function toggleOtherDatasetSelection({
@@ -205,7 +205,7 @@ export default {
     }
 
     watch(selectedProject, () => {
-      projectConfigMode.value = true;
+      projectConfigMode.value = "existing";
       newProjectName.value = undefined;
       projectToDelete.value = undefined;
       projectToEdit.value = undefined;
@@ -255,7 +255,7 @@ export default {
         class="close-button transparent"
         variant="flat"
         icon
-        @click="projectConfigMode = false"
+        @click="projectConfigMode = undefined"
       >
         <v-icon>mdi-close</v-icon>
       </v-btn>
@@ -339,7 +339,7 @@ export default {
             density="compact"
             autofocus
             @keydown.enter="create"
-            @keydown.esc="projectConfigMode = true"
+            @keydown.esc="projectConfigMode = 'existing'"
           />
           <v-btn
             color="primary"
diff --git a/web/src/store.ts b/web/src/store.ts
index fd7af270..b41da764 100644
--- a/web/src/store.ts
+++ b/web/src/store.ts
@@ -18,7 +18,7 @@ import { Map, Popup } from "maplibre-gl";
 // Project
 export const availableProjects = ref<Project[]>([]);
 export const currentProject = ref<Project>();
-export const projectConfigMode = ref<boolean | string>(false);
+export const projectConfigMode = ref<"new" | "existing">();
 
 // Datasets
 export const availableDatasets = ref<Dataset[]>();

From 80fe54eca12635cc9bc16a234fe1ba68ab329c06 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 21:15:33 +0000
Subject: [PATCH 25/40] fix: order Project queryset by name

---
 uvdat/core/rest/project.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/uvdat/core/rest/project.py b/uvdat/core/rest/project.py
index 270bbe79..c1a790f9 100644
--- a/uvdat/core/rest/project.py
+++ b/uvdat/core/rest/project.py
@@ -15,7 +15,7 @@
 
 
 class ProjectViewSet(ModelViewSet):
-    queryset = Project.objects.all()
+    queryset = Project.objects.all().order_by('name')
     serializer_class = ProjectSerializer
     permission_classes = [GuardianPermission]
     filter_backends = [GuardianFilter]

From d2ad11919dcb63a82e7e29e69709dbeac670cb39 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 21:19:31 +0000
Subject: [PATCH 26/40] fix: improve map location menu hover/click behavior

---
 web/src/components/MainDrawerContents.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 88e8cbc8..914bc8a4 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -131,11 +131,17 @@ export default {
             </div>
           </div>
           <div class="location-menu">
-            <v-icon icon="mdi-map-marker-right" size="small" color="primary" />
+            <v-icon
+              icon="mdi-map-marker-right"
+              size="small"
+              color="primary"
+              @click.stop
+            />
             <v-menu
               activator="parent"
               location="end"
               open-on-hover
+              open-delay="150"
               :close-on-content-click="false"
               @update:model-value="saving = false"
             >

From 38d2cc91200a0e723a6147f7caf67ec0cb4a40a5 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 3 Oct 2024 21:40:40 +0000
Subject: [PATCH 27/40] refactor: explicitly define acceptable values for
 `saving`

---
 web/src/components/MainDrawerContents.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 914bc8a4..71475210 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { ref, Ref, computed } from "vue";
+import { ref, computed } from "vue";
 import { availableProjects, currentProject, projectConfigMode } from "@/store";
 import ProjectContents from "./ProjectContents.vue";
 import { getCurrentMapPosition, setMapCenter } from "@/storeFunctions";
@@ -10,7 +10,7 @@ export default {
   components: { ProjectContents },
   setup() {
     const searchText = ref();
-    const saving: Ref<string | boolean> = ref(false);
+    const saving = ref<"waiting" | "done">();
     const filteredProjects = computed(() => {
       return availableProjects.value.filter((proj) => {
         return (
@@ -26,7 +26,7 @@ export default {
 
     function saveProjectMapLocation(project: Project) {
       const { center, zoom } = getCurrentMapPosition();
-      saving.value = true;
+      saving.value = "waiting";
       patchProject(project.id, {
         default_map_center: center,
         default_map_zoom: zoom,
@@ -143,7 +143,7 @@ export default {
               open-on-hover
               open-delay="150"
               :close-on-content-click="false"
-              @update:model-value="saving = false"
+              @update:model-value="saving = undefined"
             >
               <v-card width="250">
                 <v-list selectable>

From 33f53f363f5e0b3d2d4d629258f1d407b75cf816 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Tue, 8 Oct 2024 16:51:01 -0400
Subject: [PATCH 28/40] Reset project name text fields if focus is lossed

---
 web/src/components/ProjectConfig.vue | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 3492bd16..d768a3ab 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -205,10 +205,7 @@ export default {
     }
 
     watch(selectedProject, () => {
-      projectConfigMode.value = "existing";
-      newProjectName.value = undefined;
-      projectToDelete.value = undefined;
-      projectToEdit.value = undefined;
+      resetProjectEdit();
     });
 
     onMounted(() => {
@@ -217,6 +214,19 @@ export default {
       });
     });
 
+    function resetProjectEdit() {
+      projectConfigMode.value = "existing";
+      newProjectName.value = undefined;
+      projectToDelete.value = undefined;
+      projectToEdit.value = undefined;
+    }
+
+    function handleEditFocus(focused: boolean) {
+      if (!focused) {
+        resetProjectEdit();
+      }
+    }
+
     return {
       currentTab,
       projectConfigMode,
@@ -242,6 +252,8 @@ export default {
       addAllSelectionToProject,
       removeProjSelectionFromProject,
       updateSelectedProject,
+      handleEditFocus,
+      resetProjectEdit,
     };
   },
 };
@@ -295,7 +307,9 @@ export default {
               hide-details
               autofocus
               @keydown.stop
+              @keydown.esc="resetProjectEdit"
               @keydown.enter="saveProjectName"
+              @update:focused="handleEditFocus"
             />
             <span v-else>{{ title }}</span>
           </template>
@@ -339,7 +353,8 @@ export default {
             density="compact"
             autofocus
             @keydown.enter="create"
-            @keydown.esc="projectConfigMode = 'existing'"
+            @keydown.esc="resetProjectEdit"
+            @update:focused="handleEditFocus"
           />
           <v-btn
             color="primary"

From 7eb640c9114e88c2e944ba0698c9707b077e3ae1 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 8 Oct 2024 21:33:15 +0000
Subject: [PATCH 29/40] refactor: Use Vue `script setup` syntax on new/modified
 components

---
 web/src/components/AccessControl.vue      | 167 ++++-----
 web/src/components/DatasetList.vue        | 180 +++++-----
 web/src/components/MainDrawerContents.vue |  79 ++---
 web/src/components/ProjectConfig.vue      | 401 ++++++++++------------
 web/src/components/ProjectContents.vue    | 226 ++++++------
 5 files changed, 478 insertions(+), 575 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index 68458d2e..cab92f21 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -1,109 +1,80 @@
-<script lang="ts">
+<script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { onMounted, ref, Ref } from "vue";
-import { ProjectPermissions, User } from "@/types";
+import { onMounted, ref, Ref, defineProps, defineEmits } from "vue";
+import { Project, ProjectPermissions, User } from "@/types";
 import { getUsers, updateProjectPermissions } from "@/api/rest";
 
-export default {
-  props: {
-    project: {
-      required: true,
-      type: Object,
-    },
-    permissions: {
-      required: true,
-      type: Object,
-    },
-  },
-  emits: ["updateSelectedProject"],
-  setup(props: any, { emit }: any) {
-    const allUsers: Ref<User[]> = ref([]);
-    const showUserSelectDialog: Ref<boolean> = ref(false);
-    const userSelectDialogMode: Ref<string> = ref("add");
-    const selectedUsers: Ref<User[]> = ref([]);
-    const selectedPermissionLevel: Ref<string> = ref("follower");
-    const permissionLevels = ["follower", "collaborator"];
-    const userToRemove: Ref<User | undefined> = ref();
+const props = defineProps<{
+  project: Project;
+  permissions: Record<number, string>;
+}>();
+const emit = defineEmits(["updateSelectedProject"]);
+const allUsers: Ref<User[]> = ref([]);
+const showUserSelectDialog: Ref<boolean> = ref(false);
+const userSelectDialogMode: Ref<string> = ref("add");
+const selectedUsers: Ref<User[]> = ref([]);
+const selectedPermissionLevel: Ref<string> = ref("follower");
+const permissionLevels = ["follower", "collaborator"];
+const userToRemove: Ref<User | undefined> = ref();
 
-    function savePermissions() {
-      const newPermissions: ProjectPermissions = {
-        owner_id: props.project.owner?.id,
-        collaborator_ids: props.project.collaborators.map((u: User) => u.id),
-        follower_ids: props.project.followers.map((u: User) => u.id),
-      };
-      if (userToRemove.value) {
-        newPermissions.collaborator_ids =
-          newPermissions.collaborator_ids.filter(
-            (uid: number) => uid != userToRemove.value?.id
-          );
-        newPermissions.follower_ids = newPermissions.follower_ids.filter(
-          (uid: number) => uid != userToRemove.value?.id
-        );
-      } else if (
-        ["transfer", "claim"].includes(userSelectDialogMode.value) &&
-        selectedUsers.value.length == 1
-      ) {
-        if (
-          !newPermissions.collaborator_ids.includes(newPermissions.owner_id)
-        ) {
-          newPermissions.collaborator_ids.push(newPermissions.owner_id);
-        }
-        if (
-          newPermissions.collaborator_ids.includes(selectedUsers.value[0].id)
-        ) {
-          newPermissions.collaborator_ids =
-            newPermissions.collaborator_ids.filter(
-              (uid: number) => uid != selectedUsers.value[0].id
-            );
-        }
-        if (newPermissions.follower_ids.includes(selectedUsers.value[0].id)) {
-          newPermissions.follower_ids = newPermissions.follower_ids.filter(
-            (uid: number) => uid != selectedUsers.value[0].id
-          );
-        }
-        newPermissions.owner_id = selectedUsers.value[0].id;
-      } else if (selectedPermissionLevel.value == "collaborator") {
-        selectedUsers.value.forEach((u: User) => {
-          if (!newPermissions.collaborator_ids.includes(u.id)) {
-            newPermissions.collaborator_ids.push(u.id);
-          }
-        });
-      } else if (selectedPermissionLevel.value == "follower") {
-        selectedUsers.value.forEach((u: User) => {
-          if (!newPermissions.follower_ids.includes(u.id)) {
-            newPermissions.follower_ids.push(u.id);
-          }
-        });
-      }
-      updateProjectPermissions(props.project.id, newPermissions).then(
-        (project) => {
-          emit("updateSelectedProject", project);
-          selectedUsers.value = [];
-          selectedPermissionLevel.value = "follower";
-          showUserSelectDialog.value = false;
-          userToRemove.value = undefined;
-        }
+function savePermissions() {
+  const newPermissions: ProjectPermissions = {
+    owner_id: props.project.owner?.id,
+    collaborator_ids: props.project.collaborators.map((u: User) => u.id),
+    follower_ids: props.project.followers.map((u: User) => u.id),
+  };
+  if (userToRemove.value) {
+    newPermissions.collaborator_ids = newPermissions.collaborator_ids.filter(
+      (uid: number) => uid != userToRemove.value?.id
+    );
+    newPermissions.follower_ids = newPermissions.follower_ids.filter(
+      (uid: number) => uid != userToRemove.value?.id
+    );
+  } else if (
+    ["transfer", "claim"].includes(userSelectDialogMode.value) &&
+    selectedUsers.value.length == 1
+  ) {
+    if (!newPermissions.collaborator_ids.includes(newPermissions.owner_id)) {
+      newPermissions.collaborator_ids.push(newPermissions.owner_id);
+    }
+    if (newPermissions.collaborator_ids.includes(selectedUsers.value[0].id)) {
+      newPermissions.collaborator_ids = newPermissions.collaborator_ids.filter(
+        (uid: number) => uid != selectedUsers.value[0].id
       );
     }
-
-    onMounted(() => {
-      getUsers().then((data) => {
-        allUsers.value = data;
-      });
+    if (newPermissions.follower_ids.includes(selectedUsers.value[0].id)) {
+      newPermissions.follower_ids = newPermissions.follower_ids.filter(
+        (uid: number) => uid != selectedUsers.value[0].id
+      );
+    }
+    newPermissions.owner_id = selectedUsers.value[0].id;
+  } else if (selectedPermissionLevel.value == "collaborator") {
+    selectedUsers.value.forEach((u: User) => {
+      if (!newPermissions.collaborator_ids.includes(u.id)) {
+        newPermissions.collaborator_ids.push(u.id);
+      }
+    });
+  } else if (selectedPermissionLevel.value == "follower") {
+    selectedUsers.value.forEach((u: User) => {
+      if (!newPermissions.follower_ids.includes(u.id)) {
+        newPermissions.follower_ids.push(u.id);
+      }
     });
+  }
+  updateProjectPermissions(props.project.id, newPermissions).then((project) => {
+    emit("updateSelectedProject", project);
+    selectedUsers.value = [];
+    selectedPermissionLevel.value = "follower";
+    showUserSelectDialog.value = false;
+    userToRemove.value = undefined;
+  });
+}
 
-    return {
-      allUsers,
-      showUserSelectDialog,
-      userSelectDialogMode,
-      selectedUsers,
-      selectedPermissionLevel,
-      permissionLevels,
-      userToRemove,
-      savePermissions,
-    };
-  },
-};
+onMounted(() => {
+  getUsers().then((data) => {
+    allUsers.value = data;
+  });
+});
 </script>
 
 <template>
diff --git a/web/src/components/DatasetList.vue b/web/src/components/DatasetList.vue
index 0a36f09e..494ea42d 100644
--- a/web/src/components/DatasetList.vue
+++ b/web/src/components/DatasetList.vue
@@ -1,112 +1,98 @@
-<script lang="ts">
+<script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { onMounted, ref, Ref, computed, ComputedRef, watch } from "vue";
+import {
+  onMounted,
+  ref,
+  Ref,
+  computed,
+  ComputedRef,
+  watch,
+  defineProps,
+  defineEmits,
+  withDefaults,
+} from "vue";
 import { Dataset } from "@/types";
 import { getDatasetLayers } from "@/api/rest";
 
-export default {
-  props: {
-    datasets: {
-      required: true,
-      type: Array,
-    },
-    selectedIds: {
-      required: true,
-      type: Array,
-    },
-    eyeIcon: {
-      default: false,
-      type: Boolean,
-    },
-    idPrefix: {
-      default: "",
-      type: String,
-    },
-  },
-  emits: ["toggleDatasets"],
-  setup(props: any, { emit }: any) {
-    const groupByOptions = ["category", "dataset_type"];
-    const groupByKey = ref("category");
-    const numDatasets = computed(() => props.datasets.length);
-    const filterMenuItems: ComputedRef<Record<string, string[]>> = computed(
-      () => {
-        const menuItems: Record<string, string[]> = Object.fromEntries(
-          groupByOptions.map((opt) => [opt, []])
+const props = withDefaults(
+  defineProps<{
+    datasets: Dataset[];
+    selectedIds: number[];
+    eyeIcon?: boolean;
+    idPrefix?: string;
+  }>(),
+  {
+    eyeIcon: false,
+    idPrefix: "",
+  }
+);
+const emit = defineEmits(["toggleDatasets"]);
+const groupByOptions = ["category", "dataset_type"];
+const groupByKey = ref("category");
+const numDatasets = computed(() => props.datasets.length);
+const filterMenuItems: ComputedRef<Record<string, string[]>> = computed(() => {
+  const menuItems: Record<string, string[]> = Object.fromEntries(
+    groupByOptions.map((opt) => [opt, []])
+  );
+  props.datasets.forEach((dataset: any) => {
+    groupByOptions.forEach((opt) => {
+      const value = dataset[opt].toLowerCase();
+      if (!menuItems[opt].includes(value)) {
+        menuItems[opt].push(value);
+      }
+    });
+  });
+  return menuItems;
+});
+const filters: Ref<Record<string, string[]>> = ref(
+  Object.fromEntries(groupByOptions.map((opt) => [opt, []]))
+);
+const searchText = ref();
+const filteredDatasets = computed(() => {
+  return props.datasets.filter((dataset: any) => {
+    const searchMatch =
+      !searchText.value ||
+      dataset.name.toLowerCase().includes(searchText.value.toLowerCase());
+    const filterMatch = Object.entries(filters.value).every(
+      ([filter_type, values]) => {
+        return (
+          !values.length ||
+          values
+            .map((v) => v.toLowerCase())
+            .includes(dataset[filter_type].toLowerCase())
         );
-        props.datasets.forEach((dataset: any) => {
-          groupByOptions.forEach((opt) => {
-            const value = dataset[opt].toLowerCase();
-            if (!menuItems[opt].includes(value)) {
-              menuItems[opt].push(value);
-            }
-          });
-        });
-        return menuItems;
       }
     );
-    const filters: Ref<Record<string, string[]>> = ref(
-      Object.fromEntries(groupByOptions.map((opt) => [opt, []]))
-    );
-    const searchText = ref();
-    const filteredDatasets = computed(() => {
-      return props.datasets.filter((dataset: any) => {
-        const searchMatch =
-          !searchText.value ||
-          dataset.name.toLowerCase().includes(searchText.value.toLowerCase());
-        const filterMatch = Object.entries(filters.value).every(
-          ([filter_type, values]) => {
-            return (
-              !values.length ||
-              values
-                .map((v) => v.toLowerCase())
-                .includes(dataset[filter_type].toLowerCase())
-            );
-          }
-        );
-        return searchMatch && filterMatch;
-      });
-    });
-    const datasetGroups = computed(() => {
-      const groups: Record<string, Dataset[]> = {};
-      filteredDatasets.value.forEach((dataset: any) => {
-        const groupName = dataset[groupByKey.value];
-        if (!groups[groupName]) {
-          groups[groupName] = [];
-        }
-        groups[groupName].push(dataset);
-      });
-      return groups;
-    });
-
-    function fetchAllLayers() {
-      props.datasets.forEach(async (dataset: Dataset) => {
-        dataset.map_layers = await getDatasetLayers(dataset.id);
-      });
+    return searchMatch && filterMatch;
+  });
+});
+const datasetGroups = computed(() => {
+  const groups: Record<string, Dataset[]> = {};
+  filteredDatasets.value.forEach((dataset: any) => {
+    const groupName = dataset[groupByKey.value];
+    if (!groups[groupName]) {
+      groups[groupName] = [];
     }
+    groups[groupName].push(dataset);
+  });
+  return groups;
+});
 
-    function toggleDatasets(show: boolean | null, datasets: Dataset[]) {
-      emit("toggleDatasets", { show, datasets });
-    }
+function fetchAllLayers() {
+  props.datasets.forEach(async (dataset: Dataset) => {
+    dataset.map_layers = await getDatasetLayers(dataset.id);
+  });
+}
 
-    watch(numDatasets, () => {
-      filters.value = Object.fromEntries(
-        groupByOptions.map((opt) => [opt, []])
-      );
-    });
+function toggleDatasets(show: boolean | null, datasets: Dataset[]) {
+  emit("toggleDatasets", { show, datasets });
+}
 
-    onMounted(fetchAllLayers);
+watch(numDatasets, () => {
+  filters.value = Object.fromEntries(groupByOptions.map((opt) => [opt, []]));
+});
 
-    return {
-      groupByOptions,
-      groupByKey,
-      filterMenuItems,
-      filters,
-      datasetGroups,
-      searchText,
-      toggleDatasets,
-    };
-  },
-};
+onMounted(fetchAllLayers);
 </script>
 
 <template>
diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 71475210..42bbad13 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 import { ref, computed } from "vue";
 import { availableProjects, currentProject, projectConfigMode } from "@/store";
 import ProjectContents from "./ProjectContents.vue";
@@ -6,54 +6,39 @@ import { getCurrentMapPosition, setMapCenter } from "@/storeFunctions";
 import { Project } from "@/types";
 import { patchProject } from "@/api/rest";
 
-export default {
-  components: { ProjectContents },
-  setup() {
-    const searchText = ref();
-    const saving = ref<"waiting" | "done">();
-    const filteredProjects = computed(() => {
-      return availableProjects.value.filter((proj) => {
-        return (
-          !searchText.value ||
-          proj.name.toLowerCase().includes(searchText.value.toLowerCase())
-        );
-      });
-    });
-
-    function openProjectConfig(create = false) {
-      projectConfigMode.value = create ? "new" : "existing";
-    }
+const searchText = ref();
+const saving = ref<"waiting" | "done">();
+const filteredProjects = computed(() => {
+  return availableProjects.value.filter((proj) => {
+    return (
+      !searchText.value ||
+      proj.name.toLowerCase().includes(searchText.value.toLowerCase())
+    );
+  });
+});
 
-    function saveProjectMapLocation(project: Project) {
-      const { center, zoom } = getCurrentMapPosition();
-      saving.value = "waiting";
-      patchProject(project.id, {
-        default_map_center: center,
-        default_map_zoom: zoom,
-      }).then((project) => {
-        availableProjects.value = availableProjects.value.map((p) => {
-          if (p.id == project.id) {
-            p.default_map_center = project.default_map_center;
-            p.default_map_zoom = project.default_map_zoom;
-          }
-          return p;
-        });
-        setMapCenter(project);
-        saving.value = "done";
-      });
-    }
+function openProjectConfig(create = false) {
+  projectConfigMode.value = create ? "new" : "existing";
+}
 
-    return {
-      filteredProjects,
-      currentProject,
-      searchText,
-      saving,
-      openProjectConfig,
-      setMapCenter,
-      saveProjectMapLocation,
-    };
-  },
-};
+function saveProjectMapLocation(project: Project) {
+  const { center, zoom } = getCurrentMapPosition();
+  saving.value = "waiting";
+  patchProject(project.id, {
+    default_map_center: center,
+    default_map_zoom: zoom,
+  }).then((project) => {
+    availableProjects.value = availableProjects.value.map((p) => {
+      if (p.id == project.id) {
+        p.default_map_center = project.default_map_center;
+        p.default_map_zoom = project.default_map_zoom;
+      }
+      return p;
+    });
+    setMapCenter(project);
+    saving.value = "done";
+  });
+}
 </script>
 
 <template>
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index d768a3ab..3462949c 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 import { ref, Ref, computed, onMounted, ComputedRef, watch } from "vue";
 import {
   availableProjects,
@@ -18,245 +18,206 @@ import {
 import { Project, Dataset } from "@/types";
 import { getCurrentMapPosition, loadProjects } from "@/storeFunctions";
 
-export default {
-  components: { AccessControl, DatasetList },
-  setup() {
-    const currentTab = ref();
-    const searchText = ref();
-    const filteredProjects = computed(() => {
-      return availableProjects.value.filter((proj) => {
-        return (
-          !searchText.value ||
-          proj.name.toLowerCase().includes(searchText.value.toLowerCase())
-        );
-      });
-    });
-    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 currentTab = ref();
+const searchText = ref();
+const filteredProjects = computed(() => {
+  return availableProjects.value.filter((proj) => {
+    return (
+      !searchText.value ||
+      proj.name.toLowerCase().includes(searchText.value.toLowerCase())
+    );
+  });
+});
+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(
-        availableProjects.value.map((p) => {
-          let perm = "view";
-          if (p.id == selectedProject.value?.id) {
-            p = selectedProject.value;
-          }
-          if (
-            p.owner?.id == currentUser.value?.id ||
-            currentUser.value?.is_superuser
-          ) {
-            perm = "own";
-          } else if (
-            currentUser.value &&
-            p.collaborators.map((u) => u.id).includes(currentUser.value.id)
-          ) {
-            perm = "edit";
-          }
-          return [p.id, perm];
-        })
-      );
-      return ret;
-    });
-    const saving: Ref<boolean> = ref(false);
-    const newProjectName = ref();
-    const projectToEdit: Ref<Project | undefined> = ref();
-    const projectToDelete: Ref<Project | undefined> = ref();
-
-    function create() {
-      const { center, zoom } = getCurrentMapPosition();
-      createProject(newProjectName.value, center, zoom).then(() => {
-        newProjectName.value = undefined;
-        projectConfigMode.value = "existing";
-        loadProjects();
-      });
-    }
-
-    function del() {
-      if (projectToDelete.value) {
-        deleteProject(projectToDelete.value.id).then(() => {
-          loadProjects();
-          if (selectedProject.value?.id == projectToDelete.value?.id) {
-            selectedProject.value = undefined;
-          }
-          projectToDelete.value = undefined;
-        });
+const permissions = computed(() => {
+  const ret = Object.fromEntries(
+    availableProjects.value.map((p) => {
+      let perm = "view";
+      if (p.id == selectedProject.value?.id) {
+        p = selectedProject.value;
       }
-    }
-
-    function saveProjectName() {
-      if (!newProjectName.value) {
-        projectToEdit.value = undefined;
-        return;
+      if (
+        p.owner?.id == currentUser.value?.id ||
+        currentUser.value?.is_superuser
+      ) {
+        perm = "own";
+      } else if (
+        currentUser.value &&
+        p.collaborators.map((u) => u.id).includes(currentUser.value.id)
+      ) {
+        perm = "edit";
       }
-      saving.value = true;
-      if (projectToEdit.value) {
-        patchProject(projectToEdit.value.id, {
-          name: newProjectName.value,
-        }).then(() => {
-          projectToEdit.value = undefined;
-          newProjectName.value = undefined;
-          saving.value = false;
-          loadProjects();
-        });
-      }
-    }
+      return [p.id, perm];
+    })
+  );
+  return ret;
+});
+const saving: Ref<boolean> = ref(false);
+const newProjectName = ref();
+const projectToEdit: Ref<Project | undefined> = ref();
+const projectToDelete: Ref<Project | undefined> = ref();
 
-    function selectProject(v: Record<string, unknown>) {
-      if (selectedProject.value?.id != v.id) {
-        getProjectDatasets(v.id as number).then((data) => {
-          projDatasets.value = data;
-        });
-        selectedProject.value = availableProjects.value.find(
-          (p) => p.id == v.id
-        );
-      }
-    }
+function create() {
+  const { center, zoom } = getCurrentMapPosition();
+  createProject(newProjectName.value, center, zoom).then(() => {
+    newProjectName.value = undefined;
+    projectConfigMode.value = "existing";
+    loadProjects();
+  });
+}
 
-    function loadSelectedProject() {
-      currentProject.value = selectedProject.value;
-      projectConfigMode.value = undefined;
-    }
+function del() {
+  if (projectToDelete.value) {
+    deleteProject(projectToDelete.value.id).then(() => {
+      loadProjects();
+      if (selectedProject.value?.id == projectToDelete.value?.id) {
+        selectedProject.value = undefined;
+      }
+      projectToDelete.value = undefined;
+    });
+  }
+}
 
-    function toggleOtherDatasetSelection({
-      show,
-      datasets,
-    }: {
-      show: boolean;
-      datasets: Dataset[];
-    }) {
-      datasets.forEach((dataset: Dataset) => {
-        if (show && !otherSelectedDatasetIds.value.includes(dataset.id)) {
-          otherSelectedDatasetIds.value.push(dataset.id);
-        } else if (
-          !show &&
-          otherSelectedDatasetIds.value.includes(dataset.id)
-        ) {
-          otherSelectedDatasetIds.value = otherSelectedDatasetIds.value.filter(
-            (id) => id != dataset.id
-          );
-        }
-      });
-    }
+function saveProjectName() {
+  if (!newProjectName.value) {
+    projectToEdit.value = undefined;
+    return;
+  }
+  saving.value = true;
+  if (projectToEdit.value) {
+    patchProject(projectToEdit.value.id, {
+      name: newProjectName.value,
+    }).then(() => {
+      projectToEdit.value = undefined;
+      newProjectName.value = undefined;
+      saving.value = false;
+      loadProjects();
+    });
+  }
+}
 
-    function toggleProjDatasetSelection({
-      show,
-      datasets,
-    }: {
-      show: boolean;
-      datasets: Dataset[];
-    }) {
-      datasets.forEach((dataset: Dataset) => {
-        if (show && !projSelectedDatasetIds.value.includes(dataset.id)) {
-          projSelectedDatasetIds.value.push(dataset.id);
-        } else if (!show && projSelectedDatasetIds.value.includes(dataset.id)) {
-          projSelectedDatasetIds.value = projSelectedDatasetIds.value.filter(
-            (id) => id != dataset.id
-          );
-        }
-      });
-    }
+function selectProject(v: Record<string, unknown>) {
+  if (selectedProject.value?.id != v.id) {
+    getProjectDatasets(v.id as number).then((data) => {
+      projDatasets.value = data;
+    });
+    selectedProject.value = availableProjects.value.find((p) => p.id == v.id);
+  }
+}
 
-    function addAllSelectionToProject() {
-      if (projDatasets.value) {
-        saveDatasetsToProject([
-          ...projDatasets.value.map((d) => d.id),
-          ...otherSelectedDatasetIds.value,
-        ]);
-        otherSelectedDatasetIds.value = [];
-      }
-    }
+function loadSelectedProject() {
+  currentProject.value = selectedProject.value;
+  projectConfigMode.value = undefined;
+}
 
-    function removeProjSelectionFromProject() {
-      if (projDatasets.value) {
-        saveDatasetsToProject(
-          projDatasets.value
-            .map((d) => d.id)
-            .filter((id) => !projSelectedDatasetIds.value.includes(id))
-        );
-        projSelectedDatasetIds.value = [];
-      }
+function toggleOtherDatasetSelection({
+  show,
+  datasets,
+}: {
+  show: boolean;
+  datasets: Dataset[];
+}) {
+  datasets.forEach((dataset: Dataset) => {
+    if (show && !otherSelectedDatasetIds.value.includes(dataset.id)) {
+      otherSelectedDatasetIds.value.push(dataset.id);
+    } else if (!show && otherSelectedDatasetIds.value.includes(dataset.id)) {
+      otherSelectedDatasetIds.value = otherSelectedDatasetIds.value.filter(
+        (id) => id != dataset.id
+      );
     }
+  });
+}
 
-    function saveDatasetsToProject(ids: number[]) {
-      saving.value = true;
-      if (selectedProject.value) {
-        patchProject(selectedProject.value.id, {
-          datasets: ids,
-        }).then((project) => {
-          getProjectDatasets(project.id).then((datasets) => {
-            projDatasets.value = datasets;
-            saving.value = false;
-          });
-        });
-      }
+function toggleProjDatasetSelection({
+  show,
+  datasets,
+}: {
+  show: boolean;
+  datasets: Dataset[];
+}) {
+  datasets.forEach((dataset: Dataset) => {
+    if (show && !projSelectedDatasetIds.value.includes(dataset.id)) {
+      projSelectedDatasetIds.value.push(dataset.id);
+    } else if (!show && projSelectedDatasetIds.value.includes(dataset.id)) {
+      projSelectedDatasetIds.value = projSelectedDatasetIds.value.filter(
+        (id) => id != dataset.id
+      );
     }
+  });
+}
 
-    function updateSelectedProject(newProjectData: Project) {
-      loadProjects();
-      selectedProject.value = newProjectData;
-    }
+function addAllSelectionToProject() {
+  if (projDatasets.value) {
+    saveDatasetsToProject([
+      ...projDatasets.value.map((d) => d.id),
+      ...otherSelectedDatasetIds.value,
+    ]);
+    otherSelectedDatasetIds.value = [];
+  }
+}
 
-    watch(selectedProject, () => {
-      resetProjectEdit();
-    });
+function removeProjSelectionFromProject() {
+  if (projDatasets.value) {
+    saveDatasetsToProject(
+      projDatasets.value
+        .map((d) => d.id)
+        .filter((id) => !projSelectedDatasetIds.value.includes(id))
+    );
+    projSelectedDatasetIds.value = [];
+  }
+}
 
-    onMounted(() => {
-      getDatasets().then((data) => {
-        allDatasets.value = data;
+function saveDatasetsToProject(ids: number[]) {
+  saving.value = true;
+  if (selectedProject.value) {
+    patchProject(selectedProject.value.id, {
+      datasets: ids,
+    }).then((project) => {
+      getProjectDatasets(project.id).then((datasets) => {
+        projDatasets.value = datasets;
+        saving.value = false;
       });
     });
+  }
+}
 
-    function resetProjectEdit() {
-      projectConfigMode.value = "existing";
-      newProjectName.value = undefined;
-      projectToDelete.value = undefined;
-      projectToEdit.value = undefined;
-    }
+function updateSelectedProject(newProjectData: Project) {
+  loadProjects();
+  selectedProject.value = newProjectData;
+}
 
-    function handleEditFocus(focused: boolean) {
-      if (!focused) {
-        resetProjectEdit();
-      }
-    }
+watch(selectedProject, () => {
+  resetProjectEdit();
+});
+
+onMounted(() => {
+  getDatasets().then((data) => {
+    allDatasets.value = data;
+  });
+});
 
-    return {
-      currentTab,
-      projectConfigMode,
-      searchText,
-      filteredProjects,
-      selectedProject,
-      otherDatasets,
-      otherSelectedDatasetIds,
-      projDatasets,
-      projSelectedDatasetIds,
-      permissions,
-      saving,
-      newProjectName,
-      projectToEdit,
-      projectToDelete,
-      create,
-      del,
-      saveProjectName,
-      selectProject,
-      loadSelectedProject,
-      toggleOtherDatasetSelection,
-      toggleProjDatasetSelection,
-      addAllSelectionToProject,
-      removeProjSelectionFromProject,
-      updateSelectedProject,
-      handleEditFocus,
-      resetProjectEdit,
-    };
-  },
-};
+function resetProjectEdit() {
+  projectConfigMode.value = "existing";
+  newProjectName.value = undefined;
+  projectToDelete.value = undefined;
+  projectToEdit.value = undefined;
+}
+
+function handleEditFocus(focused: boolean) {
+  if (!focused) {
+    resetProjectEdit();
+  }
+}
 </script>
 
 <template>
diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index 0944aabb..e5625322 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -1,5 +1,5 @@
-<script lang="ts">
-import { ref, Ref, PropType, watch, computed } from "vue";
+<script setup lang="ts">
+import { ref, Ref, watch, computed, defineProps } from "vue";
 import {
   Project,
   Dataset,
@@ -28,125 +28,125 @@ import {
 } from "@/store";
 import { getDatasetLayerForDataObject, toggleDatasetLayer } from "@/layers";
 
-export default {
-  components: { DatasetList },
-  props: {
-    project: {
-      required: true,
-      type: Object as PropType<Project>,
-    },
+const props = defineProps<{
+  project: Project;
+}>();
+
+const panels: {
+  label: "Datasets" | "Regions" | "Charts" | "Simulations";
+  loadFunction: (
+    projectId: number
+  ) => Promise<Dataset[] | DerivedRegion[] | Chart[] | SimulationType[]>;
+  storeVar: Ref;
+}[] = [
+  {
+    label: "Datasets",
+    loadFunction: getProjectDatasets,
+    storeVar: availableDatasets,
+  },
+  {
+    label: "Regions",
+    loadFunction: getProjectDerivedRegions,
+    storeVar: availableDerivedRegions,
+  },
+  {
+    label: "Charts",
+    loadFunction: getProjectCharts,
+    storeVar: availableCharts,
   },
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setup(props: any) {
-    const panels = [
-      {
-        label: "Datasets",
-        loadFunction: getProjectDatasets,
-        storeVar: availableDatasets,
-      },
-      {
-        label: "Regions",
-        loadFunction: getProjectDerivedRegions,
-        storeVar: availableDerivedRegions,
-      },
-      {
-        label: "Charts",
-        loadFunction: getProjectCharts,
-        storeVar: availableCharts,
-      },
-      {
-        label: "Simulations",
-        loadFunction: getProjectSimulationTypes,
-        storeVar: availableSimulationTypes,
-      },
-    ];
+  {
+    label: "Simulations",
+    loadFunction: getProjectSimulationTypes,
+    storeVar: availableSimulationTypes,
+  },
+];
+
+const openPanels: Ref<string[]> = ref([]);
+const projectContents: Ref<{
+  Datasets?: Dataset[];
+  Regions?: DerivedRegion[];
+  Simulations?: SimulationType[];
+  Charts?: Chart[];
+}> = ref({});
+const selectedDatasetIds = computed(() =>
+  selectedDatasets.value.map((d2) => d2.id)
+);
 
-    const openPanels: Ref<string[]> = ref([]);
-    const projectContents: Ref<
-      Record<string, Dataset[] | Chart[] | DerivedRegion[] | SimulationType[]>
-    > = ref({});
-    const selectedDatasetIds = computed(() =>
-      selectedDatasets.value.map((d2) => d2.id)
-    );
+function selectItem(
+  panelLabel: string,
+  item: Dataset | DerivedRegion | Chart | SimulationType
+) {
+  if (panelLabel == "Regions") {
+    getDatasetLayerForDataObject(item as DerivedRegion).then((layer) => {
+      toggleDatasetLayer(layer);
+    });
+  } else if (panelLabel == "Charts") {
+    currentChart.value = item as Chart;
+  } else if (panelLabel == "Simulations") {
+    currentSimulationType.value = item as SimulationType;
+  }
+}
 
-    function selectItem(
-      panelLabel: string,
-      item: Dataset | DerivedRegion | Chart | SimulationType
+function toggleDatasets({
+  show,
+  datasets,
+}: {
+  show: boolean;
+  datasets: Dataset[];
+}) {
+  datasets.forEach(async (dataset) => {
+    // Ensure layer index is set
+    dataset.current_layer_index = dataset.current_layer_index || 0;
+    if (dataset.map_layers === undefined) {
+      dataset.map_layers = await getDatasetLayers(dataset.id);
+      availableDatasetLayers.value = [
+        ...availableDatasetLayers.value,
+        ...dataset.map_layers,
+      ];
+    }
+    let layer = undefined;
+    if (
+      dataset.map_layers !== undefined &&
+      dataset.current_layer_index !== undefined
     ) {
-      if (panelLabel == "Regions") {
-        getDatasetLayerForDataObject(item as DerivedRegion).then((layer) => {
-          toggleDatasetLayer(layer);
-        });
-      } else if (panelLabel == "Charts") {
-        currentChart.value = item as Chart;
-      } else if (panelLabel == "Simulations") {
-        currentSimulationType.value = item as SimulationType;
-      }
+      layer = dataset.map_layers[dataset.current_layer_index];
     }
-
-    function toggleDatasets({
-      show,
-      datasets,
-    }: {
-      show: boolean;
-      datasets: Dataset[];
-    }) {
-      datasets.forEach(async (dataset) => {
-        // Ensure layer index is set
-        dataset.current_layer_index = dataset.current_layer_index || 0;
-        if (dataset.map_layers === undefined) {
-          dataset.map_layers = await getDatasetLayers(dataset.id);
-          availableDatasetLayers.value = [
-            ...availableDatasetLayers.value,
-            ...dataset.map_layers,
-          ];
-        }
-        let layer = undefined;
-        if (
-          dataset.map_layers !== undefined &&
-          dataset.current_layer_index !== undefined
-        ) {
-          layer = dataset.map_layers[dataset.current_layer_index];
-        }
-        if (show && !selectedDatasetIds.value.includes(dataset.id)) {
-          selectedDatasets.value.push(dataset);
-          if (layer) toggleDatasetLayer(layer);
-        } else if (!show && selectedDatasetIds.value.includes(dataset.id)) {
-          if (currentDataset.value?.id === dataset.id) {
-            currentDataset.value = undefined;
-          }
-          selectedDatasets.value = selectedDatasets.value.filter((d) => {
-            d.id != dataset.id;
-          });
-          if (layer) toggleDatasetLayer(layer);
-        }
+    if (show && !selectedDatasetIds.value.includes(dataset.id)) {
+      selectedDatasets.value.push(dataset);
+      if (layer) toggleDatasetLayer(layer);
+    } else if (!show && selectedDatasetIds.value.includes(dataset.id)) {
+      if (currentDataset.value?.id === dataset.id) {
+        currentDataset.value = undefined;
+      }
+      selectedDatasets.value = selectedDatasets.value.filter((d) => {
+        d.id != dataset.id;
       });
+      if (layer) toggleDatasetLayer(layer);
     }
+  });
+}
 
-    watch(openPanels, () => {
-      panels.forEach((panel) => {
-        if (
-          openPanels.value.includes(panel.label) &&
-          !projectContents.value[panel.label]?.length
-        ) {
-          panel.loadFunction(props.project.id).then((data) => {
-            projectContents.value[panel.label] = data;
-            panel.storeVar.value = data;
-          });
+watch(openPanels, () => {
+  panels.forEach((panel) => {
+    if (
+      openPanels.value.includes(panel.label) &&
+      !projectContents.value[panel.label]?.length
+    ) {
+      panel.loadFunction(props.project.id).then((data) => {
+        if (panel.label === "Datasets") {
+          projectContents.value["Datasets"] = data as Dataset[];
+        } else if (panel.label === "Charts") {
+          projectContents.value["Charts"] = data as Chart[];
+        } else if (panel.label === "Regions") {
+          projectContents.value["Regions"] = data as DerivedRegion[];
+        } else if (panel.label === "Simulations") {
+          projectContents.value["Simulations"] = data as SimulationType[];
         }
+        panel.storeVar.value = data;
       });
-    });
-
-    return {
-      panels,
-      openPanels,
-      projectContents,
-      selectedDatasetIds,
-      selectItem,
-      toggleDatasets,
-    };
-  },
-};
+    }
+  });
+});
 </script>
 
 <template>
@@ -164,7 +164,7 @@ export default {
         <div
           v-if="
             !projectContents[panel.label] ||
-            !projectContents[panel.label].length
+            !projectContents[panel.label]?.length
           "
           style="color: grey"
           class="my-2 mx-6 text-caption"
@@ -172,7 +172,7 @@ export default {
           No Available {{ panel.label }}.
         </div>
         <dataset-list
-          v-else-if="panel.label == 'Datasets'"
+          v-else-if="panel.label == 'Datasets' && projectContents['Datasets']"
           :datasets="projectContents['Datasets']"
           :selected-ids="selectedDatasetIds"
           :eye-icon="true"

From ce3308061dbaec28c955cea79d996319c95579f6 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Tue, 8 Oct 2024 22:01:28 +0000
Subject: [PATCH 30/40] feat: default to `flyTo` when setting map center

---
 web/src/components/map/Map.vue |  2 +-
 web/src/storeFunctions.ts      | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/components/map/Map.vue b/web/src/components/map/Map.vue
index b6069f3c..c7e5ca65 100644
--- a/web/src/components/map/Map.vue
+++ b/web/src/components/map/Map.vue
@@ -152,7 +152,7 @@ export default {
 
     onMounted(() => {
       createMap();
-      setMapCenter();
+      setMapCenter(undefined, true);
     });
 
     return {
diff --git a/web/src/storeFunctions.ts b/web/src/storeFunctions.ts
index 087c0cc0..a196ee9d 100644
--- a/web/src/storeFunctions.ts
+++ b/web/src/storeFunctions.ts
@@ -87,15 +87,23 @@ export function loadProjects() {
   });
 }
 
-export function setMapCenter(project: Project | undefined = undefined) {
+export function setMapCenter(
+  project: Project | undefined = undefined,
+  jump = false
+) {
   let center: [number, number] = [0, 30];
   let zoom = 1;
   if (project) {
     center = project.default_map_center;
     zoom = project.default_map_zoom;
   }
+
   const map = getMap();
-  map.jumpTo({ center, zoom });
+  if (jump) {
+    map.jumpTo({ center, zoom });
+  } else {
+    map.flyTo({ center, zoom, duration: 2000 });
+  }
 }
 
 export function getCurrentMapPosition() {

From 754d1beb89fd984a8097c1429a31e4ab311a2b05 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 15:08:49 +0000
Subject: [PATCH 31/40] refactor: Apply suggestion to `toggleDatasets` function
 in `ProjectContents`

---
 web/src/components/ProjectContents.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index e5625322..ebfba4fc 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -104,25 +104,23 @@ function toggleDatasets({
         ...dataset.map_layers,
       ];
     }
-    let layer = undefined;
-    if (
-      dataset.map_layers !== undefined &&
-      dataset.current_layer_index !== undefined
-    ) {
-      layer = dataset.map_layers[dataset.current_layer_index];
-    }
-    if (show && !selectedDatasetIds.value.includes(dataset.id)) {
+    // Ensure show and selected match
+    const selected = selectedDatasetIds.value.includes(dataset.id);
+    if (show && !selected) {
       selectedDatasets.value.push(dataset);
-      if (layer) toggleDatasetLayer(layer);
-    } else if (!show && selectedDatasetIds.value.includes(dataset.id)) {
+    } else if (!show && selected) {
+      // Ensure dataset isn't current dataset and is filtered out from selected datasets
       if (currentDataset.value?.id === dataset.id) {
         currentDataset.value = undefined;
       }
       selectedDatasets.value = selectedDatasets.value.filter((d) => {
         d.id != dataset.id;
       });
-      if (layer) toggleDatasetLayer(layer);
     }
+    // Toggle dataset layer. This *must* be called after the above code,
+    // as it relies on the above changes to function correctly.
+    const layer = dataset.map_layers[dataset.current_layer_index];
+    if (layer) toggleDatasetLayer(layer);
   });
 }
 

From 245871b2f7b0861443b2a7d619fc43c2b34f028e Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 16:45:33 +0000
Subject: [PATCH 32/40] style: replace double equals with triple equals

---
 web/src/components/AccessControl.vue      | 34 ++++++++++++-----------
 web/src/components/MainDrawerContents.vue |  6 ++--
 web/src/components/ProjectConfig.vue      | 24 ++++++++--------
 web/src/components/ProjectContents.vue    | 10 +++----
 web/src/components/SimulationsPanel.vue   |  6 ++--
 web/src/layers.ts                         |  2 +-
 6 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index cab92f21..8ad7a8b4 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -25,36 +25,36 @@ function savePermissions() {
   };
   if (userToRemove.value) {
     newPermissions.collaborator_ids = newPermissions.collaborator_ids.filter(
-      (uid: number) => uid != userToRemove.value?.id
+      (uid: number) => uid !== userToRemove.value?.id
     );
     newPermissions.follower_ids = newPermissions.follower_ids.filter(
-      (uid: number) => uid != userToRemove.value?.id
+      (uid: number) => uid !== userToRemove.value?.id
     );
   } else if (
     ["transfer", "claim"].includes(userSelectDialogMode.value) &&
-    selectedUsers.value.length == 1
+    selectedUsers.value.length === 1
   ) {
     if (!newPermissions.collaborator_ids.includes(newPermissions.owner_id)) {
       newPermissions.collaborator_ids.push(newPermissions.owner_id);
     }
     if (newPermissions.collaborator_ids.includes(selectedUsers.value[0].id)) {
       newPermissions.collaborator_ids = newPermissions.collaborator_ids.filter(
-        (uid: number) => uid != selectedUsers.value[0].id
+        (uid: number) => uid !== selectedUsers.value[0].id
       );
     }
     if (newPermissions.follower_ids.includes(selectedUsers.value[0].id)) {
       newPermissions.follower_ids = newPermissions.follower_ids.filter(
-        (uid: number) => uid != selectedUsers.value[0].id
+        (uid: number) => uid !== selectedUsers.value[0].id
       );
     }
     newPermissions.owner_id = selectedUsers.value[0].id;
-  } else if (selectedPermissionLevel.value == "collaborator") {
+  } else if (selectedPermissionLevel.value === "collaborator") {
     selectedUsers.value.forEach((u: User) => {
       if (!newPermissions.collaborator_ids.includes(u.id)) {
         newPermissions.collaborator_ids.push(u.id);
       }
     });
-  } else if (selectedPermissionLevel.value == "follower") {
+  } else if (selectedPermissionLevel.value === "follower") {
     selectedUsers.value.forEach((u: User) => {
       if (!newPermissions.follower_ids.includes(u.id)) {
         newPermissions.follower_ids.push(u.id);
@@ -114,7 +114,7 @@ onMounted(() => {
         </template>
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] == 'own'"
+            v-if="permissions[project.id] === 'own'"
             icon="mdi-pencil"
             @click="
               showUserSelectDialog = true;
@@ -126,7 +126,7 @@ onMounted(() => {
       <v-list-item v-else class="mx-4" subtitle="No owner">
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] == 'own'"
+            v-if="permissions[project.id] === 'own'"
             icon="mdi-pencil"
             @click="
               showUserSelectDialog = true;
@@ -170,7 +170,7 @@ onMounted(() => {
         </template>
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] == 'own'"
+            v-if="permissions[project.id] === 'own'"
             icon="mdi-trash-can"
             @click="userToRemove = collaborator"
           />
@@ -216,7 +216,7 @@ onMounted(() => {
         </template>
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] == 'own'"
+            v-if="permissions[project.id] === 'own'"
             icon="mdi-trash-can"
             @click="userToRemove = follower"
           />
@@ -229,7 +229,7 @@ onMounted(() => {
       />
     </v-list>
     <v-btn
-      v-if="permissions[project.id] == 'own'"
+      v-if="permissions[project.id] === 'own'"
       color="primary"
       @click="
         showUserSelectDialog = true;
@@ -241,7 +241,9 @@ onMounted(() => {
     <v-dialog v-model="showUserSelectDialog" width="500">
       <v-card>
         <v-card-title class="pa-3 bg-grey-lighten-2 text-grey-darken-2">
-          {{ userSelectDialogMode == "add" ? "Add Users" : "Select New Owner" }}
+          {{
+            userSelectDialogMode === "add" ? "Add Users" : "Select New Owner"
+          }}
           <v-btn
             class="close-button transparent"
             variant="flat"
@@ -253,7 +255,7 @@ onMounted(() => {
         </v-card-title>
         <v-messages
           color="red"
-          :active="userSelectDialogMode == 'transfer'"
+          :active="userSelectDialogMode === 'transfer'"
           :messages="[
             'Warning: After transferring ownership to another user, you will no \
             longer be able to make changes to permissions or delete the project. \
@@ -266,7 +268,7 @@ onMounted(() => {
             v-model="selectedUsers"
             :items="allUsers"
             :label="
-              userSelectDialogMode == 'add'
+              userSelectDialogMode === 'add'
                 ? 'Users to add'
                 : 'New project owner'
             "
@@ -297,7 +299,7 @@ onMounted(() => {
             </template>
           </v-select>
           <v-select
-            v-if="userSelectDialogMode == 'add'"
+            v-if="userSelectDialogMode === 'add'"
             v-model="selectedPermissionLevel"
             :items="permissionLevels"
             label="Permission Level"
diff --git a/web/src/components/MainDrawerContents.vue b/web/src/components/MainDrawerContents.vue
index 42bbad13..dfdbf602 100644
--- a/web/src/components/MainDrawerContents.vue
+++ b/web/src/components/MainDrawerContents.vue
@@ -29,7 +29,7 @@ function saveProjectMapLocation(project: Project) {
     default_map_zoom: zoom,
   }).then((project) => {
     availableProjects.value = availableProjects.value.map((p) => {
-      if (p.id == project.id) {
+      if (p.id === project.id) {
         p.default_map_center = project.default_map_center;
         p.default_map_zoom = project.default_map_zoom;
       }
@@ -138,7 +138,7 @@ function saveProjectMapLocation(project: Project) {
                   <v-list-item @click="saveProjectMapLocation(project)">
                     Set current map position as project default
                     <v-icon
-                      v-if="saving == 'done'"
+                      v-if="saving === 'done'"
                       icon="mdi-check"
                       color="green"
                       style="float: right"
@@ -158,7 +158,7 @@ function saveProjectMapLocation(project: Project) {
         <v-expansion-panel-text class="pa-0">
           <v-card rounded="0" flat color="grey-lighten-2" class="pa-2">
             <project-contents
-              v-if="project == currentProject"
+              v-if="project === currentProject"
               :project="project"
             />
           </v-card>
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 3462949c..3418726f 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -43,11 +43,11 @@ const permissions = computed(() => {
   const ret = Object.fromEntries(
     availableProjects.value.map((p) => {
       let perm = "view";
-      if (p.id == selectedProject.value?.id) {
+      if (p.id === selectedProject.value?.id) {
         p = selectedProject.value;
       }
       if (
-        p.owner?.id == currentUser.value?.id ||
+        p.owner?.id === currentUser.value?.id ||
         currentUser.value?.is_superuser
       ) {
         perm = "own";
@@ -80,7 +80,7 @@ function del() {
   if (projectToDelete.value) {
     deleteProject(projectToDelete.value.id).then(() => {
       loadProjects();
-      if (selectedProject.value?.id == projectToDelete.value?.id) {
+      if (selectedProject.value?.id === projectToDelete.value?.id) {
         selectedProject.value = undefined;
       }
       projectToDelete.value = undefined;
@@ -107,11 +107,11 @@ function saveProjectName() {
 }
 
 function selectProject(v: Record<string, unknown>) {
-  if (selectedProject.value?.id != v.id) {
+  if (selectedProject.value?.id !== v.id) {
     getProjectDatasets(v.id as number).then((data) => {
       projDatasets.value = data;
     });
-    selectedProject.value = availableProjects.value.find((p) => p.id == v.id);
+    selectedProject.value = availableProjects.value.find((p) => p.id === v.id);
   }
 }
 
@@ -132,7 +132,7 @@ function toggleOtherDatasetSelection({
       otherSelectedDatasetIds.value.push(dataset.id);
     } else if (!show && otherSelectedDatasetIds.value.includes(dataset.id)) {
       otherSelectedDatasetIds.value = otherSelectedDatasetIds.value.filter(
-        (id) => id != dataset.id
+        (id) => id !== dataset.id
       );
     }
   });
@@ -150,7 +150,7 @@ function toggleProjDatasetSelection({
       projSelectedDatasetIds.value.push(dataset.id);
     } else if (!show && projSelectedDatasetIds.value.includes(dataset.id)) {
       projSelectedDatasetIds.value = projSelectedDatasetIds.value.filter(
-        (id) => id != dataset.id
+        (id) => id !== dataset.id
       );
     }
   });
@@ -260,7 +260,7 @@ function handleEditFocus(focused: boolean) {
         >
           <template v-slot:title="{ title, item }">
             <v-text-field
-              v-if="projectToEdit?.id == item.id"
+              v-if="projectToEdit?.id === item.id"
               v-model="newProjectName"
               :placeholder="item.name"
               label="Project Name"
@@ -285,7 +285,7 @@ function handleEditFocus(focused: boolean) {
                 @click.stop="projectToEdit = item"
               />
               <v-btn
-                v-else-if="projectToEdit?.id == item.id"
+                v-else-if="projectToEdit?.id === item.id"
                 color="primary"
                 variant="flat"
                 style="min-width: 40px; min-height: 40px"
@@ -307,7 +307,7 @@ function handleEditFocus(focused: boolean) {
             </div>
           </template>
         </v-list>
-        <div class="pa-2 d-flex" v-if="projectConfigMode == 'new'">
+        <div class="pa-2 d-flex" v-if="projectConfigMode === 'new'">
           <v-text-field
             v-model="newProjectName"
             label="Project Name"
@@ -349,7 +349,7 @@ function handleEditFocus(focused: boolean) {
           <v-tab value="users" class="text-grey">Access Control</v-tab>
         </v-tabs>
         <div
-          v-if="currentTab == 'datasets' && projDatasets"
+          v-if="currentTab === 'datasets' && projDatasets"
           class="py-3 px-6 d-flex"
         >
           <div style="width: 30%">
@@ -405,7 +405,7 @@ function handleEditFocus(focused: boolean) {
             </v-btn>
           </div>
         </div>
-        <div v-if="currentTab == 'users'" class="py-3 px-6">
+        <div v-if="currentTab === 'users'" class="py-3 px-6">
           <access-control
             :project="selectedProject"
             :permissions="permissions"
diff --git a/web/src/components/ProjectContents.vue b/web/src/components/ProjectContents.vue
index ebfba4fc..012e3a64 100644
--- a/web/src/components/ProjectContents.vue
+++ b/web/src/components/ProjectContents.vue
@@ -76,13 +76,13 @@ function selectItem(
   panelLabel: string,
   item: Dataset | DerivedRegion | Chart | SimulationType
 ) {
-  if (panelLabel == "Regions") {
+  if (panelLabel === "Regions") {
     getDatasetLayerForDataObject(item as DerivedRegion).then((layer) => {
       toggleDatasetLayer(layer);
     });
-  } else if (panelLabel == "Charts") {
+  } else if (panelLabel === "Charts") {
     currentChart.value = item as Chart;
-  } else if (panelLabel == "Simulations") {
+  } else if (panelLabel === "Simulations") {
     currentSimulationType.value = item as SimulationType;
   }
 }
@@ -114,7 +114,7 @@ function toggleDatasets({
         currentDataset.value = undefined;
       }
       selectedDatasets.value = selectedDatasets.value.filter((d) => {
-        d.id != dataset.id;
+        d.id !== dataset.id;
       });
     }
     // Toggle dataset layer. This *must* be called after the above code,
@@ -170,7 +170,7 @@ watch(openPanels, () => {
           No Available {{ panel.label }}.
         </div>
         <dataset-list
-          v-else-if="panel.label == 'Datasets' && projectContents['Datasets']"
+          v-else-if="panel.label === 'Datasets' && projectContents['Datasets']"
           :datasets="projectContents['Datasets']"
           :selected-ids="selectedDatasetIds"
           :eye-icon="true"
diff --git a/web/src/components/SimulationsPanel.vue b/web/src/components/SimulationsPanel.vue
index 964f3352..cd39ae75 100644
--- a/web/src/components/SimulationsPanel.vue
+++ b/web/src/components/SimulationsPanel.vue
@@ -64,7 +64,7 @@ export default {
         availableResults.value = results;
         if (activeResult.value) {
           activeResult.value = availableResults.value.find(
-            (r) => r.id == activeResult.value?.id
+            (r) => r.id === activeResult.value?.id
           );
         }
       });
@@ -126,7 +126,7 @@ export default {
       }
       const targetResult: SimulationResult | undefined =
         availableResults.value.find(
-          (r: { id: number }) => r.id == activeResult.value?.id
+          (r: { id: number }) => r.id === activeResult.value?.id
         );
       if (
         targetResult &&
@@ -276,7 +276,7 @@ export default {
               <div v-else-if="result.output_data">
                 <v-card-title>Results</v-card-title>
                 <div
-                  v-if="currentSimulationType.output_type == 'node_animation'"
+                  v-if="currentSimulationType.output_type === 'node_animation'"
                   class="pa-5"
                 >
                   <div v-if="result.output_data.node_failures?.length === 0">
diff --git a/web/src/layers.ts b/web/src/layers.ts
index 0c944e7e..a5492af5 100644
--- a/web/src/layers.ts
+++ b/web/src/layers.ts
@@ -520,7 +520,7 @@ export function styleRasterDatasetLayer(
   if (colormapPalette) {
     tileParams.palette = colormapPalette;
   }
-  if (Array.isArray(colormapRange) && colormapRange?.length == 2) {
+  if (Array.isArray(colormapRange) && colormapRange?.length === 2) {
     tileParams.min = colormapRange[0];
     tileParams.max = colormapRange[1];
   }

From ba7fbcfb1e3ac4eb8f6ea22aa5ae6783739ba7b6 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 16:46:39 +0000
Subject: [PATCH 33/40] style: use title case for component tag

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

diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 3418726f..441ec0dc 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -406,7 +406,7 @@ function handleEditFocus(focused: boolean) {
           </div>
         </div>
         <div v-if="currentTab === 'users'" class="py-3 px-6">
-          <access-control
+          <AccessControl
             :project="selectedProject"
             :permissions="permissions"
             @updateSelectedProject="updateSelectedProject"

From 816dd2518bd5e5c98049242b5668a068d220a4c1 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 16:53:15 +0000
Subject: [PATCH 34/40] refactor: Remove ownership claim mode

---
 web/src/components/AccessControl.vue | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index 8ad7a8b4..c772d4b4 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
 const emit = defineEmits(["updateSelectedProject"]);
 const allUsers: Ref<User[]> = ref([]);
 const showUserSelectDialog: Ref<boolean> = ref(false);
-const userSelectDialogMode: Ref<string> = ref("add");
+const userSelectDialogMode: Ref<"add" | "transfer"> = ref("add");
 const selectedUsers: Ref<User[]> = ref([]);
 const selectedPermissionLevel: Ref<string> = ref("follower");
 const permissionLevels = ["follower", "collaborator"];
@@ -31,7 +31,7 @@ function savePermissions() {
       (uid: number) => uid !== userToRemove.value?.id
     );
   } else if (
-    ["transfer", "claim"].includes(userSelectDialogMode.value) &&
+    userSelectDialogMode.value === "transfer" &&
     selectedUsers.value.length === 1
   ) {
     if (!newPermissions.collaborator_ids.includes(newPermissions.owner_id)) {
@@ -123,18 +123,6 @@ onMounted(() => {
           />
         </template>
       </v-list-item>
-      <v-list-item v-else class="mx-4" subtitle="No owner">
-        <template v-slot:append>
-          <v-icon
-            v-if="permissions[project.id] === 'own'"
-            icon="mdi-pencil"
-            @click="
-              showUserSelectDialog = true;
-              userSelectDialogMode = 'claim';
-            "
-          />
-        </template>
-      </v-list-item>
       <v-list-subheader>
         Collaborators
         <v-tooltip activator="parent" location="end">
@@ -275,10 +263,8 @@ onMounted(() => {
             item-title="username"
             :rules="[
               (v) =>
-                !(
-                  ['transfer', 'claim'].includes(userSelectDialogMode) &&
-                  v.length > 1
-                ) || 'Must select one new owner',
+                !(userSelectDialogMode === 'transfer' && v.length > 1) ||
+                'Must select one new owner',
             ]"
             return-object
             multiple

From f5bc7ad65e11b246d01661931323f68c51cf1269 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 16:56:41 +0000
Subject: [PATCH 35/40] refactor: Apply suggestion to use sets in
 `savePermissions`

---
 web/src/components/AccessControl.vue | 61 +++++++++++-----------------
 1 file changed, 23 insertions(+), 38 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index c772d4b4..f445d7e5 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -18,49 +18,34 @@ const permissionLevels = ["follower", "collaborator"];
 const userToRemove: Ref<User | undefined> = ref();
 
 function savePermissions() {
-  const newPermissions: ProjectPermissions = {
-    owner_id: props.project.owner?.id,
-    collaborator_ids: props.project.collaborators.map((u: User) => u.id),
-    follower_ids: props.project.followers.map((u: User) => u.id),
-  };
+  let owner: number = props.project.owner.id;
+  const collaborators = new Set(
+    props.project.collaborators.map((u: User) => u.id)
+  );
+  const followers = new Set(props.project.followers.map((u: User) => u.id));
   if (userToRemove.value) {
-    newPermissions.collaborator_ids = newPermissions.collaborator_ids.filter(
-      (uid: number) => uid !== userToRemove.value?.id
-    );
-    newPermissions.follower_ids = newPermissions.follower_ids.filter(
-      (uid: number) => uid !== userToRemove.value?.id
-    );
+    collaborators.delete(userToRemove.value.id);
+    followers.delete(userToRemove.value.id);
   } else if (
-    userSelectDialogMode.value === "transfer" &&
+    ["transfer", "claim"].includes(userSelectDialogMode.value) &&
     selectedUsers.value.length === 1
   ) {
-    if (!newPermissions.collaborator_ids.includes(newPermissions.owner_id)) {
-      newPermissions.collaborator_ids.push(newPermissions.owner_id);
-    }
-    if (newPermissions.collaborator_ids.includes(selectedUsers.value[0].id)) {
-      newPermissions.collaborator_ids = newPermissions.collaborator_ids.filter(
-        (uid: number) => uid !== selectedUsers.value[0].id
-      );
-    }
-    if (newPermissions.follower_ids.includes(selectedUsers.value[0].id)) {
-      newPermissions.follower_ids = newPermissions.follower_ids.filter(
-        (uid: number) => uid !== selectedUsers.value[0].id
-      );
-    }
-    newPermissions.owner_id = selectedUsers.value[0].id;
-  } else if (selectedPermissionLevel.value === "collaborator") {
-    selectedUsers.value.forEach((u: User) => {
-      if (!newPermissions.collaborator_ids.includes(u.id)) {
-        newPermissions.collaborator_ids.push(u.id);
-      }
-    });
-  } else if (selectedPermissionLevel.value === "follower") {
-    selectedUsers.value.forEach((u: User) => {
-      if (!newPermissions.follower_ids.includes(u.id)) {
-        newPermissions.follower_ids.push(u.id);
-      }
-    });
+    // Transfer ownership to new owner, demoting current owner to collaborator
+    const newOwner = selectedUsers.value[0].id;
+    followers.delete(newOwner);
+    collaborators.delete(newOwner);
+    collaborators.add(owner);
+    owner = newOwner;
+  } else if (selectedPermissionLevel.value == "collaborator") {
+    selectedUsers.value.forEach((u: User) => collaborators.add(u.id));
+  } else if (selectedPermissionLevel.value == "follower") {
+    selectedUsers.value.forEach((u: User) => followers.add(u.id));
   }
+  const newPermissions: ProjectPermissions = {
+    owner_id: owner,
+    collaborator_ids: Array.from(collaborators),
+    follower_ids: Array.from(followers),
+  };
   updateProjectPermissions(props.project.id, newPermissions).then((project) => {
     emit("updateSelectedProject", project);
     selectedUsers.value = [];

From 44640331966c2e936e3c4ba21427d87229002f12 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 13:01:32 -0400
Subject: [PATCH 36/40] Apply suggestion to typing in AccessControl.vue

Co-authored-by: Jacob Nesbitt <jjnesbitt2@gmail.com>
---
 web/src/components/AccessControl.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index f445d7e5..05b73d97 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -13,8 +13,9 @@ const allUsers: Ref<User[]> = ref([]);
 const showUserSelectDialog: Ref<boolean> = ref(false);
 const userSelectDialogMode: Ref<"add" | "transfer"> = ref("add");
 const selectedUsers: Ref<User[]> = ref([]);
-const selectedPermissionLevel: Ref<string> = ref("follower");
-const permissionLevels = ["follower", "collaborator"];
+type PermissionLevel = "follower" | "collaborator";
+const permissionLevels: PermissionLevel[] = ["follower", "collaborator"];
+const selectedPermissionLevel: Ref<PermissionLevel> = ref("follower");
 const userToRemove: Ref<User | undefined> = ref();
 
 function savePermissions() {

From a843439b046ea507f20806c631c89f8d6cac720c Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 17:35:48 +0000
Subject: [PATCH 37/40] refactor: enforce consistent naming of permission
 levels

---
 web/src/components/AccessControl.vue | 27 ++++++++++++++-------------
 web/src/components/ProjectConfig.vue | 10 +++++-----
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index 05b73d97..1c489498 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -100,7 +100,7 @@ onMounted(() => {
         </template>
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] === 'own'"
+            v-if="permissions[project.id] === 'owner'"
             icon="mdi-pencil"
             @click="
               showUserSelectDialog = true;
@@ -144,7 +144,7 @@ onMounted(() => {
         </template>
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] === 'own'"
+            v-if="permissions[project.id] === 'owner'"
             icon="mdi-trash-can"
             @click="userToRemove = collaborator"
           />
@@ -190,7 +190,7 @@ onMounted(() => {
         </template>
         <template v-slot:append>
           <v-icon
-            v-if="permissions[project.id] === 'own'"
+            v-if="permissions[project.id] === 'owner'"
             icon="mdi-trash-can"
             @click="userToRemove = follower"
           />
@@ -203,7 +203,7 @@ onMounted(() => {
       />
     </v-list>
     <v-btn
-      v-if="permissions[project.id] === 'own'"
+      v-if="permissions[project.id] === 'owner'"
       color="primary"
       @click="
         showUserSelectDialog = true;
@@ -247,16 +247,17 @@ onMounted(() => {
                 : 'New project owner'
             "
             item-title="username"
-            :rules="[
-              (v) =>
-                !(userSelectDialogMode === 'transfer' && v.length > 1) ||
-                'Must select one new owner',
-            ]"
             return-object
-            multiple
-            clearable
-            chips
-            closable-chips
+            :multiple="userSelectDialogMode === 'add'"
+            :clearable="userSelectDialogMode === 'add'"
+            :chips="userSelectDialogMode === 'add'"
+            :closable-chips="userSelectDialogMode === 'add'"
+            @update:model-value="
+              (v: User | User[]) => {
+                if (Array.isArray(v)) selectedUsers = v;
+                else selectedUsers = [v];
+              }
+            "
           >
             <template v-slot:item="{ props, item }">
               <v-list-item
diff --git a/web/src/components/ProjectConfig.vue b/web/src/components/ProjectConfig.vue
index 441ec0dc..409ed267 100644
--- a/web/src/components/ProjectConfig.vue
+++ b/web/src/components/ProjectConfig.vue
@@ -42,7 +42,7 @@ const otherSelectedDatasetIds: Ref<number[]> = ref([]);
 const permissions = computed(() => {
   const ret = Object.fromEntries(
     availableProjects.value.map((p) => {
-      let perm = "view";
+      let perm = "follower";
       if (p.id === selectedProject.value?.id) {
         p = selectedProject.value;
       }
@@ -50,12 +50,12 @@ const permissions = computed(() => {
         p.owner?.id === currentUser.value?.id ||
         currentUser.value?.is_superuser
       ) {
-        perm = "own";
+        perm = "owner";
       } else if (
         currentUser.value &&
         p.collaborators.map((u) => u.id).includes(currentUser.value.id)
       ) {
-        perm = "edit";
+        perm = "collaborator";
       }
       return [p.id, perm];
     })
@@ -276,7 +276,7 @@ function handleEditFocus(focused: boolean) {
           </template>
           <template v-slot:append="{ item }">
             <div
-              v-if="['own', 'edit'].includes(permissions[item.id])"
+              v-if="['owner', 'collaborator'].includes(permissions[item.id])"
               class="text-grey-darken-1"
             >
               <v-icon
@@ -296,7 +296,7 @@ function handleEditFocus(focused: boolean) {
               </v-btn>
             </div>
             <div
-              v-if="['own'].includes(permissions[item.id])"
+              v-if="['owner'].includes(permissions[item.id])"
               class="text-grey-darken-1"
             >
               <v-icon

From 16e61409b11fec074c7cec673b99c34548323306 Mon Sep 17 00:00:00 2001
From: Jacob Nesbitt <jjnesbitt2@gmail.com>
Date: Thu, 10 Oct 2024 14:30:40 -0400
Subject: [PATCH 38/40] fix: Prevent multiple permissions for single user in
 project

---
 uvdat/core/rest/serializers.py | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/uvdat/core/rest/serializers.py b/uvdat/core/rest/serializers.py
index 48f1e851..d4e0c715 100644
--- a/uvdat/core/rest/serializers.py
+++ b/uvdat/core/rest/serializers.py
@@ -33,6 +33,18 @@ class ProjectPermissionsSerializer(serializers.Serializer):
     collaborator_ids = serializers.ListField(child=serializers.IntegerField())
     follower_ids = serializers.ListField(child=serializers.IntegerField())
 
+    def validate(self, attrs):
+        collaborators = set(attrs['collaborator_ids'])
+        followers = set(attrs['follower_ids'])
+        owner = attrs['owner_id']
+
+        if collaborators & followers or owner in (collaborators | followers):
+            raise serializers.ValidationError(
+                'A user cannot have multiple permissions on a single project'
+            )
+
+        return super().validate(attrs)
+
 
 class ProjectSerializer(serializers.ModelSerializer):
     default_map_center = serializers.SerializerMethodField('get_center')

From 1c83360df559c9eb41bde1a0cfb9c336b4b63658 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 20:10:00 +0000
Subject: [PATCH 39/40] fix: modify `savePermissions` to move users between
 followers and collaborators lists

---
 web/src/components/AccessControl.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index 1c489498..f0ec46b3 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -28,7 +28,7 @@ function savePermissions() {
     collaborators.delete(userToRemove.value.id);
     followers.delete(userToRemove.value.id);
   } else if (
-    ["transfer", "claim"].includes(userSelectDialogMode.value) &&
+    userSelectDialogMode.value === "transfer" &&
     selectedUsers.value.length === 1
   ) {
     // Transfer ownership to new owner, demoting current owner to collaborator
@@ -39,8 +39,10 @@ function savePermissions() {
     owner = newOwner;
   } else if (selectedPermissionLevel.value == "collaborator") {
     selectedUsers.value.forEach((u: User) => collaborators.add(u.id));
+    selectedUsers.value.forEach((u: User) => followers.delete(u.id));
   } else if (selectedPermissionLevel.value == "follower") {
     selectedUsers.value.forEach((u: User) => followers.add(u.id));
+    selectedUsers.value.forEach((u: User) => collaborators.delete(u.id));
   }
   const newPermissions: ProjectPermissions = {
     owner_id: owner,
@@ -48,11 +50,13 @@ function savePermissions() {
     follower_ids: Array.from(followers),
   };
   updateProjectPermissions(props.project.id, newPermissions).then((project) => {
-    emit("updateSelectedProject", project);
-    selectedUsers.value = [];
-    selectedPermissionLevel.value = "follower";
-    showUserSelectDialog.value = false;
-    userToRemove.value = undefined;
+    if (project) {
+      emit("updateSelectedProject", project);
+      selectedUsers.value = [];
+      selectedPermissionLevel.value = "follower";
+      showUserSelectDialog.value = false;
+      userToRemove.value = undefined;
+    }
   });
 }
 

From 7051ab43be0fbaa66eed735b4f3b5b4a675bed74 Mon Sep 17 00:00:00 2001
From: Anne Haley <anne.haley@kitware.com>
Date: Thu, 10 Oct 2024 20:41:22 +0000
Subject: [PATCH 40/40] fix: Remove current project owner from users list

---
 web/src/components/AccessControl.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/AccessControl.vue b/web/src/components/AccessControl.vue
index f0ec46b3..a747a6c9 100644
--- a/web/src/components/AccessControl.vue
+++ b/web/src/components/AccessControl.vue
@@ -56,13 +56,16 @@ function savePermissions() {
       selectedPermissionLevel.value = "follower";
       showUserSelectDialog.value = false;
       userToRemove.value = undefined;
+      getUsers().then((data) => {
+        allUsers.value = data.filter((user) => user.id !== project.owner.id);
+      });
     }
   });
 }
 
 onMounted(() => {
   getUsers().then((data) => {
-    allUsers.value = data;
+    allUsers.value = data.filter((user) => user.id !== props.project.owner.id);
   });
 });
 </script>