Merge pull request #142 from Kitware/issue-133-alt-color-scheme

Add ability to select coloscheme for spectrogram

Author: naglepuff

bats_ai/core/migrations/0017_configuration_default_color_scheme_and_more.py

@@ -0,0 +1,33 @@
+# Generated by Django 4.1.13 on 2025-05-02 20:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('core', '0016_alter_species_common_name_alter_species_family_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='configuration',
+            name='default_color_scheme',
+            field=models.CharField(
+                choices=[
+                    ('inferno', 'Inferno'),
+                    ('cividis', 'Cividis'),
+                    ('viridis', 'Viridis'),
+                    ('magma', 'Magma'),
+                    ('turbo', 'Turbo'),
+                    ('plasma', 'Plasma'),
+                ],
+                default='inferno',
+                max_length=20,
+            ),
+        ),
+        migrations.AddField(
+            model_name='configuration',
+            name='default_spectrogram_background_color',
+            field=models.CharField(default='rgb(0, 0, 0)', max_length=18),
+        ),
+    ]

bats_ai/core/models/configuration.py

@@ -9,13 +9,28 @@ class SpectrogramViewMode(models.TextChoices):
         COMPRESSED = 'compressed'
         UNCOMPRESSED = 'uncompressed'
 
+    class AvailableColorScheme(models.TextChoices):
+        INFERNO = 'inferno'
+        CIVIDIS = 'cividis'
+        VIRIDIS = 'viridis'
+        MAGMA = 'magma'
+        TURBO = 'turbo'
+        PLASMA = 'plasma'
+
     display_pulse_annotations = models.BooleanField(default=True)
     display_sequence_annotations = models.BooleanField(default=True)
     run_inference_on_upload = models.BooleanField(default=True)
     spectrogram_x_stretch = models.DecimalField(default=2.5, max_digits=3, decimal_places=2)
     spectrogram_view = models.CharField(
         max_length=12, choices=SpectrogramViewMode.choices, default=SpectrogramViewMode.COMPRESSED
     )
+    default_color_scheme = models.CharField(
+        max_length=20,
+        choices=AvailableColorScheme.choices,
+        default=AvailableColorScheme.INFERNO,
+    )
+    # 18 characters is just enough for "rgb(255, 255, 255)"
+    default_spectrogram_background_color = models.CharField(max_length=18, default='rgb(0, 0, 0)')
 
     def save(self, *args, **kwargs):
         # Ensure only one instance of Configuration exists

bats_ai/core/views/configuration.py

@@ -20,6 +20,8 @@ class ConfigurationSchema(Schema):
     run_inference_on_upload: bool
     spectrogram_x_stretch: float
     spectrogram_view: Configuration.SpectrogramViewMode
+    default_color_scheme: Configuration.AvailableColorScheme
+    default_spectrogram_background_color: str
 
 
 # Endpoint to retrieve the configuration status
@@ -34,6 +36,8 @@ def get_configuration(request):
         run_inference_on_upload=config.run_inference_on_upload,
         spectrogram_x_stretch=config.spectrogram_x_stretch,
         spectrogram_view=config.spectrogram_view,
+        default_color_scheme=config.default_color_scheme,
+        default_spectrogram_background_color=config.default_spectrogram_background_color,
         is_admin=request.user.is_authenticated and request.user.is_superuser,
     )
 

client/src/api/api.ts

@@ -358,6 +358,8 @@ export interface ConfigurationSettings {
   spectrogram_x_stretch: number;
   spectrogram_view: 'compressed' | 'uncompressed';
   is_admin?: boolean;
+  default_color_scheme: string;
+  default_spectrogram_background_color: string;
 }
 
 export type Configuration = ConfigurationSettings & { is_admin: boolean };
@@ -391,7 +393,7 @@ export interface ProcessingTaskDetails {
         error:string;
     }
 
-}  
+}
 
 async function getProcessingTasks(): Promise<ProcessingTask[]> {
     return (await axiosInstance.get('/processing-task')).data;
@@ -441,9 +443,9 @@ async function getGuanoMetadata(file: File): Promise<GuanoMetadata> {
 
 async function adminNaBatUpdateSpecies(apiToken: string) {
   return axiosInstance.post<{ taskId: string }>('/nabat/configuration/update-species', { params: { apiToken } });
-  
+
   }
-  
+
 
 export {
  uploadRecordingFile,

client/src/components/ColorPickerMenu.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import * as d3 from 'd3';
+import { defineModel, ref } from 'vue';
+defineProps({
+  tooltipText: {
+    type: String,
+    default: ''
+  },
+});
+const colorpickerMenu = ref(false);
+const color = defineModel({ default: 'rgb(0, 0, 0)'});
+function updateColor(colorVal: string) {
+  const d3Color = d3.color(colorVal);
+  if (d3Color) {
+    color.value = d3Color.formatRgb();
+  }
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="colorpickerMenu"
+    :close-on-content-click="false"
+    offset-y
+  >
+    <template #activator="{ props: subProps }">
+      <v-tooltip :text="tooltipText">
+        <template #activator="{ props: tooltipProps }">
+          <v-btn
+            v-bind="{ ...subProps, ...tooltipProps }"
+            :style="{ backgroundColor: color }"
+            class="color-square mx-2"
+          />
+        </template>
+      </v-tooltip>
+    </template>
+    <v-card>
+      <v-card-text>
+        <v-color-picker
+          v-model="color"
+          mode="rgb"
+          elevation="0"
+          @update:model-value="updateColor"
+        />
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<style scoped>
+.color-square {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 4px;
+}
+</style>

client/src/components/ColorSchemeSelect.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { defineModel } from 'vue';
+
+defineProps({
+  colorSchemes: {
+    type: Array as () => { value: string; title: string; scheme: (input: number) => string }[],
+    required: true,
+  },
+  label: {
+      type: String,
+      default: 'Color Scheme',
+  },
+  returnObject: {
+    type: Boolean,
+    default: true,
+  }
+});
+
+const colorScheme = defineModel();
+</script>
+
+<template>
+  <v-select
+    v-model="colorScheme"
+    :label="label"
+    :items="colorSchemes"
+    item-title="title"
+    item-value="value"
+    variant="outlined"
+    density="compact"
+    :return-object="returnObject"
+    hide-details
+  >
+    <template #item="{ item, props }">
+      <div
+        v-bind="props"
+        class="custom-hover"
+      >
+        <v-row
+          dense
+          align="center"
+          justify="center"
+          no-gutters
+        >
+          <span>{{ item.title }}</span>
+        </v-row>
+        <v-row
+          dense
+          no-gutters
+          align="center"
+          justify="center"
+          class="pb-2"
+        >
+          <div
+            v-for="n in 11"
+            :key="n"
+            size="10"
+            :style="{ backgroundColor: item.raw.scheme((n - 1) / 10) }"
+            class="color-swatch"
+          />
+        </v-row>
+      </div>
+      <v-divider />
+    </template>
+
+    <template #selection="{ item }">
+      <div class="d-flex align-center">
+        <span>{{ item.title }}</span>
+      </div>
+    </template>
+  </v-select>
+</template>
+
+<style scoped>
+.color-swatch {
+  width:15px;
+  height: 10px;
+}
+.custom-hover {
+  cursor: pointer;
+}
+.custom-hover:hover {
+  font-weight: bold;;
+}
+</style>