Add sample tags to colorScheme editor

app/packages/core/src/components/ColorModal/SidebarList.tsx

@@ -9,9 +9,9 @@ import ListItemText from "@mui/material/ListItemText";
 import { Resizable } from "re-resizable";
 import React, { useState } from "react";
 import { useRecoilCallback, useRecoilValue } from "recoil";
-import { resizeHandle } from "./../Sidebar/Sidebar.module.css";
 import styles from "../../../../../packages/components/src/scrollable.module.css";
-import { ACTIVE_FIELD } from "./utils";
+import { resizeHandle } from "./../Sidebar/Sidebar.module.css";
+import { ACTIVE_FIELD, getDisplayName } from "./utils";
 
 const WIDTH = 230;
 
@@ -22,6 +22,7 @@ const SidebarList: React.FC = () => {
   const [width, setWidth] = useState(WIDTH);
   const stableGroup = [
     { paths: [ACTIVE_FIELD.global, ACTIVE_FIELD.json], name: "general" },
+    { paths: ["tags"], name: "tags" },
   ];
   const fieldGroups = useRecoilValue(
     fos.sidebarGroups({ modal: false, loading: false })
@@ -50,6 +51,7 @@ const SidebarList: React.FC = () => {
   const getCurrentField = (activeField) => {
     if (activeField === ACTIVE_FIELD.global) return ACTIVE_FIELD.global;
     if (activeField === ACTIVE_FIELD.json) return ACTIVE_FIELD.json;
+
     return activeField?.expandedPath;
   };
   return (
@@ -123,7 +125,7 @@ const SidebarList: React.FC = () => {
                       disableRipple
                     >
                       <ListItemText
-                        primary={path}
+                        primary={getDisplayName(path)}
                         onClick={() => onSelectField(path)}
                         sx={{ fontFamily: "palanquin, sans-serif" }}
                       />

app/packages/core/src/components/ColorModal/utils.ts

@@ -1,5 +1,5 @@
-import { isEmpty, xor } from "lodash";
 import * as fos from "@fiftyone/state";
+import { isEmpty, xor } from "lodash";
 
 // Masataka Okabe and Kei Ito have proposed a palette of 8 colors on their
 // website Color Universal Design (CUD). This palette is a “Set of colors that
@@ -35,6 +35,7 @@ export const fiftyoneDefaultColorPalette = [
 export const ACTIVE_FIELD = {
   ["json"]: "JSON editor",
   ["global"]: "Global settings",
+  ["_label_tags"]: "label tags",
 };
 
 // disregard the order
@@ -93,3 +94,10 @@ export const isDefaultSetting = (savedSetting: fos.ColorScheme) => {
     (savedSetting.fields?.length == 0 || !savedSetting.fields)
   );
 };
+
+export const getDisplayName = (path: string) => {
+  if (path === "tags") {
+    return "sample tags";
+  }
+  return path;
+};

app/packages/core/src/components/FieldLabelAndInfo/index.tsx

@@ -1,24 +1,25 @@
+import { InfoIcon, useTheme } from "@fiftyone/components";
+import * as fos from "@fiftyone/state";
+import { activeColorField, coloring } from "@fiftyone/state";
+import { Field, formatDate, formatDateTime } from "@fiftyone/utilities";
+import PaletteIcon from "@mui/icons-material/Palette";
 import React, {
   MutableRefObject,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
+import ReactDOM from "react-dom";
 import {
   atom,
   useRecoilState,
   useRecoilValue,
   useSetRecoilState,
 } from "recoil";
 import styled from "styled-components";
-import * as fos from "@fiftyone/state";
-import PaletteIcon from "@mui/icons-material/Palette";
 import { ExternalLink } from "../../utils/generic";
-import { InfoIcon, useTheme } from "@fiftyone/components";
-import { Field, formatDate, formatDateTime } from "@fiftyone/utilities";
-import { coloring, activeColorField } from "@fiftyone/state";
-import ReactDOM from "react-dom";
+import { ACTIVE_FIELD } from "../ColorModal/utils";
 
 const selectedFieldInfo = atom<string | null>({
   key: "selectedFieldInfo",
@@ -266,7 +267,6 @@ function FieldInfoExpanded({
     setIsCustomizingColor({ field, expandedPath });
   };
 
-  const isNotTag = field.path !== "tags";
   useEffect(updatePosition, [field, isCollapsed]);
   const timeZone = useRecoilValue(fos.timeZone);
 
@@ -280,7 +280,7 @@ function FieldInfoExpanded({
       onClick={(e) => e.stopPropagation()}
     >
       <FieldInfoExpandedContainer color={color}>
-        {isNotTag && !isModal && (
+        {!isModal && (
           <CustomizeColor
             onClick={onClickCustomizeColor}
             color={color}

app/packages/looker/src/elements/common/tags.ts

@@ -275,9 +275,16 @@ export class TagsElement<State extends BaseState> extends BaseElement<State> {
           sample.tags.forEach((tag) => {
             const v = coloring.by === "value" ? tag : "tags";
             elements.push({
-              color: getColor(coloring.pool, coloring.seed, v),
+              color: getColorFromOptions({
+                coloring,
+                path,
+                param: tag,
+                customizeColorSetting,
+                labelDefault: false,
+              }),
               title: tag,
               value: tag,
+              path: v,
             });
           });
         }
@@ -289,6 +296,7 @@ export class TagsElement<State extends BaseState> extends BaseElement<State> {
             color: getColor(coloring.pool, coloring.seed, v),
             title: value,
             value: value,
+            path: v,
           });
         });
       } else {

app/packages/looker/src/elements/common/util.ts

@@ -95,13 +95,13 @@ export const prettify = (
   return result;
 };
 
-// for classification types and regression types
+// for classification types and regression and sample tag types
 type Param = {
   coloring: Coloring;
   path: string;
-  param: Classification | Regression;
+  param: Classification | Regression | string;
   customizeColorSetting: CustomizeColor[];
-  labelDefault: boolean; // use .label or .value as default
+  labelDefault: boolean; // use .label for classification or .value for regression
 };
 export const getColorFromOptions = ({
   coloring,
@@ -118,7 +118,7 @@ export const getColorFromOptions = ({
     }
     return getColor(coloring.pool, coloring.seed, path);
   }
-  if (coloring.by === "value") {
+  if (coloring.by === "value" && path !== "tags") {
     if (setting) {
       key = setting.colorByAttribute ?? labelDefault ? "label" : "value";
       // check if this label has a assigned color, use it if it is a valid color
@@ -145,6 +145,16 @@ export const getColorFromOptions = ({
     }
     return getColor(coloring.pool, coloring.seed, param[key]);
   }
+  if (coloring.by === "value" && path === "tags") {
+    if (setting) {
+      const valueColor = setting.valueColors?.find(
+        (v) => v.value === param
+      )?.color;
+      if (isValidColor(valueColor)) {
+        return valueColor;
+      }
+    }
+  }
   return getColor(coloring.pool, coloring.seed, path);
 };