Hide spectrogram controls in modals (#260)

* Make icons similar sizes visually

* Make modal component for other user annotations

* Made modal component for color scheme selection

Author: naglepuff

client/src/components/ColorSchemeDialog.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import useState from '@use/useState';
+import ColorSchemeSelect from './ColorSchemeSelect.vue';
+import ColorPickerMenu from './ColorPickerMenu.vue';
+
+const {
+  configuration,
+  colorSchemes,
+  colorScheme,
+  backgroundColor,
+} = useState();
+
+onMounted(() => {
+  const localBackgroundColor = localStorage.getItem('spectrogramBackgroundColor');
+  if (localBackgroundColor) {
+    backgroundColor.value = localBackgroundColor;
+  } else {
+    backgroundColor.value = configuration.value.default_spectrogram_background_color || 'rgb(0, 0, 0)';
+  }
+  const localColorScheme = localStorage.getItem('spectrogramColorScheme');
+  if (localColorScheme) {
+    colorScheme.value = colorSchemes.find((scheme) => scheme.value === localColorScheme) || colorSchemes[0];
+  } else if (configuration.value.default_color_scheme) {
+    colorScheme.value = colorSchemes.find((scheme) => scheme.value === configuration.value.default_color_scheme) || colorSchemes[0];
+  }
+});
+
+watch(backgroundColor, () => {
+  localStorage.setItem('spectrogramBackgroundColor', backgroundColor.value);
+});
+watch(colorScheme, () => {
+  localStorage.setItem('spectrogramColorScheme', colorScheme.value.value);
+});
+</script>
+
+<template>
+  <v-dialog max-width="300">
+    <template #activator="{ props: modalProps }">
+      <v-tooltip>
+        <template #activator="{ props: tooltipProps }">
+          <v-icon
+            v-bind="{ ...modalProps, ...tooltipProps }"
+            size="25"
+          >
+            mdi-palette
+          </v-icon>
+        </template>
+        View spectrogram color options
+      </v-tooltip>
+    </template>
+    <template #default="{ isActive }">
+      <v-card>
+        <v-card-title>
+          Spectrogram Color Options
+        </v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col cols="8">
+              <color-scheme-select
+                v-model="colorScheme"
+                label="Color Scheme"
+                :color-schemes="colorSchemes"
+                class="pt-3"
+              />
+            </v-col>
+            <v-col cols="4">
+              <color-picker-menu
+                v-model="backgroundColor"
+                tooltip-text="Spectrogram background color"
+              />
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            text="Close"
+            @click="isActive.value = false"
+          />
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>

client/src/components/OtherUserAnnotationsDialog.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, Ref, watch } from 'vue';
+import { ScaleOrdinal } from 'd3';
+import useState from '@use/useState';
+
+const props = defineProps<{
+  colorScale: ScaleOrdinal<string, string, never>,
+  otherUsers: string[],
+  userEmails: string[],
+}>();
+const { createColorScale, setSelectedUsers } = useState();
+
+const colorScale = props.colorScale ?? createColorScale(props.userEmails);
+
+const selectedUsers: Ref<string[]> = ref([]);
+
+const deleteChip = (item: string) => {
+  const newSelectedUsers = selectedUsers.value.filter((user: string) => user !== item);
+  selectedUsers.value = newSelectedUsers;
+  setSelectedUsers(selectedUsers.value);
+};
+
+watch(selectedUsers, () => {
+  setSelectedUsers(selectedUsers.value);
+});
+</script>
+
+<template>
+  <v-dialog max-width="500">
+    <template #activator="{ props: modalProps }">
+      <v-tooltip>
+        <template #activator="{ props: tooltipProps }">
+          <v-icon
+            v-bind="{ ...modalProps, ...tooltipProps }"
+            size="25"
+            :color="selectedUsers.length === 0 ? '' : 'blue'"
+          >
+            mdi-account-group
+          </v-icon>
+        </template>
+        Select users to display their annotations
+      </v-tooltip>
+    </template>
+    <template #default="{ isActive }">
+      <v-card>
+        <v-card-title>
+          Other Users
+        </v-card-title>
+        <v-card-text>
+          <v-select
+            v-model="selectedUsers"
+            :items="otherUsers"
+            density="compact"
+            label="Other Users"
+            multiple
+            single-line
+            clearable
+            variant="outlined"
+            closable-chips
+            hide-details
+          >
+            <template #selection="{ item }">
+              <v-chip
+                closable
+                size="x-small"
+                :color="colorScale(item.value)"
+                text-color="gray"
+                @click:close="deleteChip(item.value)"
+              >
+                {{ item.value.replace(/@.*/, "") }}
+              </v-chip>
+            </template>
+          </v-select>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            text="Close"
+            @click="isActive.value = false"
+          />
+        </v-card-actions>
+      </v-card>
+    </template>
+  </v-dialog>
+</template>