feat: Working

hms-dbmi · Jul 23, 2024 · 34d69a5 · 34d69a5
1 parent 9a4266e
commit 34d69a5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 57 deletions.
diff --git a/src/components/LayerController/AddChannelButton.tsx b/src/components/LayerController/AddChannelButton.tsx
@@ -72,7 +72,7 @@ function AddChannelButton() {
           </SelectTrigger>
           <SelectContent className="focus:ring-0 border-none">
             {source.names.map((name, i) => (
-              <SelectItem value={String(i)} key={name}>
+              <SelectItem className="text-xs" value={String(i)} key={name}>
                 {name}
               </SelectItem>
             ))}

diff --git a/src/components/LayerController/ChannelOptions.tsx b/src/components/LayerController/ChannelOptions.tsx
@@ -7,8 +7,9 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { useLayer, useSourceValue } from "@/hooks";
-import { clamp } from "@/utils";
-import ColorPalette from "./ColorPalette";
+import { COLORS, clamp, hexToRGB } from "@/utils";
+
+const RGB_COLORS: [string, string][] = Object.entries(COLORS);
 
 function ChannelOptions(props: { channelIndex: number }) {
   const { channelIndex: i } = props;
@@ -96,7 +97,7 @@ function ChannelOptions(props: { channelIndex: number }) {
           </SelectTrigger>
           <SelectContent className="focus:ring-0 border-none">
             {names.map((name, i) => (
-              <SelectItem value={String(i)} key={name}>
+              <SelectItem className="text-xs" value={String(i)} key={name}>
                 {name}
               </SelectItem>
             ))}
@@ -120,18 +121,25 @@ function ChannelOptions(props: { channelIndex: number }) {
         <Separator />
         <span className="text-xs">color:</span>
         <Separator />
-        <div style={{ display: "flex", justifyContent: "center" }}>
-          <ColorPalette
-            handleChange={(rgb) => {
-              setLayer(({ layerProps, ...rest }) => ({
-                ...rest,
-                layerProps: {
-                  ...layerProps,
-                  colors: layerProps.colors.with(i, rgb),
-                },
-              }));
-            }}
-          />
+        <div className="flex items-center justify-between" aria-label="color-swatch">
+          {RGB_COLORS.map(([name, rgb]) => (
+            <button
+              type="button"
+              aria-label={name}
+              style={{ backgroundColor: rgb }}
+              className="w-3.5 h-3.5 rounded-full cursor-pointer"
+              key={name}
+              onClick={() => {
+                setLayer(({ layerProps, ...rest }) => ({
+                  ...rest,
+                  layerProps: {
+                    ...layerProps,
+                    colors: layerProps.colors.with(i, hexToRGB(rgb)),
+                  },
+                }));
+              }}
+            />
+          ))}
         </div>
       </PopoverContent>
     </Popover>

diff --git a/src/components/LayerController/ColorPalette.tsx b/src/components/LayerController/ColorPalette.tsx
diff --git a/src/components/LayerController/index.tsx b/src/components/LayerController/index.tsx
@@ -8,6 +8,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
 import { useLayer, useSourceValue } from "@/hooks";
+import { range } from "@/utils";
 
 /** Get the { name, idx, size } for each axis that is not the channel_axis and has size > 1 */
 function axisSliders(info: {
@@ -99,7 +100,7 @@ function LayerController() {
           </div>
           <Separator />
           <div>
-            {Array.from({ length: nChannels }).map((_, i) => (
+            {range(nChannels).map((i) => (
               <ChannelController channelIndex={i} key={`${name}-${i}`} />
             ))}
           </div>