Personal review fixes

ecoacoustics · Jan 22, 2025 · 6dcc2c9 · 6dcc2c9
1 parent 1801925
commit 6dcc2c9
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 8 deletions.
diff --git a/dev/spectrogram-axes.html b/dev/spectrogram-axes.html
@@ -9,7 +9,7 @@
 
   <body>
     <oe-axes>
-      <oe-spectrogram id="playing-spectrogram" src="/example.flac"></oe-spectrogram>
+      <oe-spectrogram id="spectrogram" src="/example.flac"></oe-spectrogram>
     </oe-axes>
 
     <oe-media-controls for="spectrogram"></oe-media-controls>

diff --git a/dev/spectrogram.html b/dev/spectrogram.html
@@ -185,7 +185,7 @@
       }
 
       .large {
-        height: 600px;
+        height: 800px;
         width: 100%;
       }
     </style>

diff --git a/src/components/annotation/annotation.ts b/src/components/annotation/annotation.ts
@@ -8,6 +8,10 @@ import { booleanConverter, tagArrayConverter } from "../../helpers/attributes";
 import { TagComponent } from "../tag/tag";
 import { Hertz, Seconds } from "../../models/unitConverters";
 
+// TODO: we might want to create the concept of a "data component" (mixin)
+// that doesn't have any template content, but can accept attributes/slotted
+// content to build a model
+
 /**
  * @description
  * Builds an annotation model using DOM element attributes

diff --git a/src/helpers/attributes.ts b/src/helpers/attributes.ts
@@ -59,16 +59,18 @@ export const enumConverter = <T extends Enum>(
   enumValues: T,
   fallbackValue: keyof T | typeof converterNoProvidedFallback = converterNoProvidedFallback,
 ) => {
-  return (value: string): T[keyof T] | undefined => {
+  return (value: string | null): T[keyof T] | undefined => {
     // we compare the requested key, and the enums keys as lowercase so that
     // the attribute that is exposed to the user is case insensitive
-    const lowercaseKey = value.toLowerCase();
+    const lowercaseKey = value?.toLowerCase();
     const enumKey = Object.keys(enumValues).find((key) => key.toLowerCase() === lowercaseKey) as keyof T | undefined;
 
     if (enumKey) {
       return enumValues[enumKey];
     }
 
+    const acceptedKeys = Object.keys(enumValues).join(",");
+
     // if we get to this point, the user has provided an incorrect value to the
     // enum attribute, and we should either fall back to the default or
     // throw an error
@@ -79,11 +81,18 @@ export const enumConverter = <T extends Enum>(
     // We use a symbol over undefined or any other falsy value because the user
     // might want to use undefined or a falsy value as the fallback value.
     if (fallbackValue === converterNoProvidedFallback) {
-      console.error();
+      console.error(`'${value}' is not a valid value. Accepted values: ${acceptedKeys}`);
+
+      // we return "undefined" here instead of "null" because so that it mimics
+      // the behavior that we'd expect if we indexed into a non-existent key
+      // e.g. enumValues["non-existent"] would return undefined
+      return undefined;
     } else {
       // this string type casting is okay because we have checked that it is not
       // a symbol in the if condition above
-      console.warn(`'${value}' is not a valid value. Falling back to '${fallbackValue as string}'.`);
+      console.warn(
+        `'${value}' is not a valid value. Falling back to '${fallbackValue as string}'. Accepted values: ${acceptedKeys}`,
+      );
       return fallbackValue as any;
     }
   };

diff --git a/src/helpers/audio/colors.ts b/src/helpers/audio/colors.ts
@@ -76,7 +76,7 @@ export function getColorScale(name: ColorMapName): ColorScaler {
   let scaler = colorScales[name];
 
   if (scaler === undefined) {
-    console.warn(`Could not find color scale '${name}'. Defaulting to grayscale`);
+    console.warn(`Could not find color scale "${name}". Defaulting to grayscale`);
     scaler = colorScales.grayscale;
   }
 

diff --git a/src/helpers/themes/globalStyles.css b/src/helpers/themes/globalStyles.css
@@ -357,7 +357,17 @@ button {
   min-height: 0px;
 }
 
-/* Typically used in data components */
+/*
+  You might want to hide slot content in data components.
+  E.g. The <oe-annotation> component does not have any template content, but
+       still requires a slot so that it can accept <oe-tag> data components.
+
+  TODO: we might be able to remove this helper class if we create a dedicated
+  "data component" mixin that would build a model using a components attributes
+  and slotted content.
+  This class would no longer be needed because we could scope this slot hiding
+  to this proposed "data component".
+*/
 slot.hide-slot {
   display: none;