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] 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[]>();