fix: Miscellaneous appearance and behavior fixes

web/src/components/AccessControl.vue

@@ -98,7 +98,7 @@ onMounted(() => {
             class="mx-3 user-circle"
             :ripple="false"
           >
-            <span v-if="project.owner.first_name || project.owner.lastname">
+            <span v-if="project.owner.first_name || project.owner.last_name">
               {{ project.owner.first_name[0] }}
               {{ project.owner.last_name[0] }}
               <v-tooltip activator="parent" location="end">
@@ -226,7 +226,7 @@ onMounted(() => {
       Add Users
     </v-btn>
     <v-dialog v-model="showUserSelectDialog" width="500">
-      <v-card>
+      <v-card color="background">
         <v-card-title class="pa-3">
           {{
             userSelectDialogMode === "add" ? "Add Users" : "Select New Owner"

web/src/components/ChartsPanel.vue

@@ -48,7 +48,6 @@ const currentXStart = ref(0);
 const currentXRange = ref(500);
 const downloadButton = ref();
 
-watch(currentChart, console.log)
 const options = computed(() => {
   if (!currentChart.value) {
     return defaultOptions;

web/src/components/DatasetsPanel.vue

@@ -129,7 +129,7 @@ watch(filteredDatasets, expandAllDatasets)
                     <v-checkbox-btn
                       v-else-if="item.layers && props.selectedIds"
                       :model-value="props.selectedIds.includes(item.id)"
-                      @click="() => toggleSelected([item])"
+                      @click.stop="() => toggleSelected([item])"
                       style="display: inline"
                     />
                     {{ title }}

web/src/components/FloatingPanel.vue

@@ -193,7 +193,7 @@ function panelUpdated() {
 }
 .panel-content-inner {
   padding: 0px !important;
-  overflow: auto;
+  overflow: auto !important;
   height: 100%;
   background-color: rgb(var(--v-theme-background)) !important;
 }

web/src/components/LayersPanel.vue

@@ -36,6 +36,10 @@ function updateFrame(layer: Layer, value: number) {
     })
 }
 
+function getLayerMaxFrames(layer: Layer) {
+    return [...new Set(layer.frames.map((f) => f.index))].length
+}
+
 function getFrameInputWidth(layer: Layer) {
     // With a minimum of 40 pixels, add 10 pixels for each digit shown in the input
     let width = 40;
@@ -97,7 +101,7 @@ function getFrameInputWidth(layer: Layer) {
                                 {{ element.name }}
                                 <template v-slot:append>
                                     <v-checkbox
-                                        v-if="element.frames.length > 1"
+                                        v-if="getLayerMaxFrames(element) > 1"
                                         true-icon="mdi-menu-down"
                                         false-icon="mdi-menu-up"
                                         class="layer-menu-toggle"
@@ -118,10 +122,10 @@ function getFrameInputWidth(layer: Layer) {
                                     <v-icon icon="mdi-drag-horizontal" size="small" class="ml-2" />
                                 </template>
                             </v-list-item>
-                            <div v-if="element.frames.length > 1 && !element.hideFrameMenu" class="frame-menu">
+                            <div v-if="getLayerMaxFrames(element) > 1 && !element.hideFrameMenu" class="frame-menu">
                                 <v-slider
                                     :model-value="element.current_frame + 1"
-                                    :max="element.frames.length"
+                                    :max="getLayerMaxFrames(element)"
                                     min="1"
                                     color="primary"
                                     show-ticks="always"
@@ -136,7 +140,7 @@ function getFrameInputWidth(layer: Layer) {
                                 <template v-slot:append>
                                     <v-text-field
                                         :model-value="element.current_frame + 1"
-                                        :max="element.frames.length"
+                                        :max="getLayerMaxFrames(element)"
                                         min="1"
                                         density="compact"
                                         class="frame-input"
@@ -147,7 +151,7 @@ function getFrameInputWidth(layer: Layer) {
                                         @update:modelValue="(value: string) => updateFrame(element, parseInt(value))"
                                     >
                                         <template v-slot:default>
-                                            {{ element.current_frame + 1 }}/{{ element.frames.length }}
+                                            {{ element.current_frame + 1 }}/{{ getLayerMaxFrames(element) }}
                                         </template>
                                     </v-text-field>
                                     </template>

web/src/components/ProjectConfig.vue

@@ -79,10 +79,11 @@ function openProjectConfig(create = false) {
 
 function create() {
   const { center, zoom } = getCurrentMapPosition();
-  createProject(newProjectName.value, center, zoom).then(() => {
+  createProject(newProjectName.value, center, zoom).then((project) => {
     newProjectName.value = undefined;
     projectConfigMode.value = "existing";
     loadProjects();
+    selectProject(project);
   });
 }
 
@@ -134,6 +135,10 @@ function saveProjectMapLocation(project: Project | undefined) {
         }
         return p;
       });
+      if (currentProject.value) {
+        currentProject.value.default_map_center = project.default_map_center
+        currentProject.value.default_map_zoom = project.default_map_zoom
+      }
       setMapCenter(project);
       saving.value = "done";
       setTimeout(() => {
@@ -145,7 +150,7 @@ function saveProjectMapLocation(project: Project | undefined) {
 
 function selectProject(project: Project) {
   if (selectedProject.value?.id !== project.id) {
-    selectedProject.value = availableProjects.value.find((p) => p.id === project.id);
+    selectedProject.value = project;
     loadingDatasets.value = true;
     getDatasets().then(async (datasets) => {
       allDatasets.value = await Promise.all(datasets.map(async (dataset: Dataset) => {
@@ -270,7 +275,12 @@ watch(otherDatasets, () => {
 })
 
 watch(projectConfigMode, () => {
-  if (currentProject.value) selectProject(currentProject.value)
+  if (currentProject.value) {
+    if (projectConfigMode.value) selectProject(currentProject.value)
+    else currentProject.value = availableProjects.value.find(
+      (p) => p.id === currentProject.value?.id
+    )  // trigger project reload
+  }
 })
 </script>
 
@@ -280,6 +290,7 @@ watch(projectConfigMode, () => {
       <v-select
         label="Current Project"
         placeholder="Select a Project"
+        no-data-text="No available projects."
         :items="availableProjects"
         :autofocus="!currentProject"
         v-model="currentProject"
@@ -315,6 +326,14 @@ watch(projectConfigMode, () => {
         </v-tooltip>
       </v-btn>
     </div>
+    <v-card
+      v-if="availableProjects.length === 0"
+      class="tutorial-popup"
+    >
+      <v-card-text>
+        To get started, create a project and add datasets to it.
+      </v-card-text>
+    </v-card>
     <div class="project-row" v-if="currentProject">
       <span>
         <v-icon icon="mdi-database-outline" v-tooltip="'Datasets'"></v-icon>
@@ -610,6 +629,12 @@ watch(projectConfigMode, () => {
   align-items: center;
   justify-content: space-between;
 }
+.tutorial-popup {
+  position: absolute !important;
+  z-index: 1 !important;
+  left: 280px;
+  width: 150px;
+}
 .config {
   top: 0px;
   margin: 0px;

web/src/components/SideBars.vue

@@ -34,9 +34,9 @@ function toggleSidebar(sidebar: "left" | "right") {
   }
 }
 
-function togglePanelVisibility(panel: FloatingPanelConfig) {
+function togglePanelVisibility(id: string) {
   panelArrangement.value = panelArrangement.value.map((p) => {
-    if (p.id == panel.id) p.visible = !p.visible;
+    if (p.id == id) p.visible = !p.visible;
     return p;
   });
 }
@@ -196,14 +196,15 @@ watch(darkMode, () => {
             item-value="id"
             selectable
             :selected="panelArrangement.filter((p) => p.visible)"
+            @click:select="(item) => togglePanelVisibility(item.id as string)"
             select-strategy="leaf"
             return-object
           >
             <template v-slot:prepend="{ item, isSelected }">
               <v-list-item-action start>
                 <v-checkbox-btn
                   :model-value="isSelected"
-                  @change="togglePanelVisibility(item)"
+                  @change="togglePanelVisibility(item.id)"
                 ></v-checkbox-btn>
               </v-list-item-action>
             </template>
@@ -245,6 +246,7 @@ watch(darkMode, () => {
 }
 .toolbar > .v-toolbar__content {
   display: flex;
+  height: 50px !important;
   justify-content: space-between;
 }
 .sidebar.closed > .v-navigation-drawer__content > .toolbar {

web/src/storeFunctions.ts

@@ -50,13 +50,6 @@ export function clearState() {
       visible: true,
       closeable: false,
     },
-    {
-      id: "legend",
-      label: "Legend",
-      visible: true,
-      closeable: true,
-      right: true,
-    },
     {
       id: "charts",
       label: "Charts",