fix: LEAP-33: Fixes for labels by Taxonomy

src/components/NewTaxonomy/NewTaxonomy.tsx

@@ -15,6 +15,7 @@ type TaxonomyItem = {
   children?: TaxonomyItem[],
   origin?: 'config' | 'user' | 'session',
   hint?: string,
+  color?: string,
 };
 
 type AntTaxonomyItem = {
@@ -48,12 +49,23 @@ type TaxonomyProps = {
 };
 
 const convert = (items: TaxonomyItem[], options: TaxonomyOptions): AntTaxonomyItem[] => {
-  return items.map(item => ({
-    title: item.hint ? (
+  const enrich = (item: TaxonomyItem) => {
+    // @todo marginLeft: -4 is good to align labels, but cats them in selected list
+    const color = (item: TaxonomyItem) => (
+      <span style={{ background: item.color, padding: '2px 4px', borderRadius: 2 }}>{item.label}</span>
+    );
+
+    if (!item.hint) return item.color ? color(item) : item.label;
+
+    return (
       <Tooltip title={item.hint} mouseEnterDelay={500}>
-        <span>{item.label}</span>
+        {item.color ? color(item) : <span>{item.label}</span>}
       </Tooltip>
-    ) : item.label,
+    );
+  };
+
+  return items.map(item => ({
+    title: enrich(item),
     value: item.path.join(options.pathSeparator),
     key: item.path.join(options.pathSeparator),
     isLeaf: item.isLeaf !== false && !item.children,
@@ -77,6 +89,7 @@ const NewTaxonomy = ({
   const [treeData, setTreeData] = useState<AntTaxonomyItem[]>([]);
   const separator = options.pathSeparator;
   const style = { minWidth: options.minWidth ?? 200, maxWidth: options.maxWidth };
+  const value = selected.map(path => path.join(separator)).map(path => ({ title: path, value: path, id: path }));
   const dropdownWidth = options.dropdownWidth === undefined ? true : +options.dropdownWidth;
 
   useEffect(() => {
@@ -90,7 +103,7 @@ const NewTaxonomy = ({
   return (
     <TreeSelect
       treeData={treeData}
-      value={selected.map(path => path.join(separator))}
+      value={value}
       onChange={items => onChange(null, items.map(item => item.value.split(separator)))}
       loadData={loadData}
       treeCheckable

src/components/Node/Node.tsx

@@ -188,6 +188,9 @@ const NodeMinimal: FC<any> = observer(({ node }) => {
 });
 
 const useNodeName = (node: any) => {
+  // @todo sometimes node is control tag, not a region
+  // @todo and for new taxonomy it can be plain object
+  if (!node.$treenode) return null;
   return getType(node).name as keyof typeof NodeViews;
 };
 

src/mixins/HighlightMixin.js

@@ -153,14 +153,8 @@ export const HighlightMixin = types
     updateSpans() {
       if (self._hasSpans || (isFF(FF_LSDV_4620_3) && self._spans?.length)) {
         const lastSpan = self._spans[self._spans.length - 1];
-        const label = self.getLabels();
 
-        // label is array, string or null, so check for length
-        if (!label?.length) {
-          lastSpan.removeAttribute('data-label');
-        } else {
-          lastSpan.setAttribute('data-label', label);
-        }
+        Utils.Selection.applySpanStyles(lastSpan, { label: self.getLabels() });
       }
     },
 
@@ -274,7 +268,7 @@ export const HighlightMixin = types
     },
 
     getLabels() {
-      return self.labeling?.mainValue ?? [];
+      return (self.labeling?.selectedLabels ?? []).map(label => label.value).join(',');
     },
 
     getLabelColor() {

src/regions/Result.js

@@ -140,19 +140,14 @@ const Result = types
       return self.mainValue?.join(joinstr) || '';
     },
 
+    // @todo check all usages of selectedLabels:
+    //       — check usages of non-array values (like `if selectedValues ...`)
+    //       - check empty labels, they should be returned as an array
     get selectedLabels() {
-      if (self.type === 'taxonomy') {
-        const sep = self.from_name.pathseparator;
-        const join = self.from_name.showfullpath;
-
-        return (self.mainValue || [])
-          .map(v => join ? v.join(sep) : v.at(-1))
-          .map(v => ({ value: v, id: v }));
-      }
       if (self.mainValue?.length === 0 && self.from_name.allowempty) {
         return self.from_name.findLabel(null);
       }
-      return self.mainValue?.map(value => self.from_name.findLabel(value)).filter(Boolean);
+      return self.mainValue?.map(value => self.from_name.findLabel(value)).filter(Boolean) ?? [];
     },
 
     /**
@@ -212,7 +207,7 @@ const Result = types
 
     get style() {
       if (!self.tag) return null;
-      const fillcolor = self.tag.background || self.tag.parent.fillcolor;
+      const fillcolor = self.tag.background || self.tag.parent?.fillcolor;
 
       if (!fillcolor) return null;
       const strokecolor = self.tag.background || self.tag.parent.strokecolor;

src/tags/control/Choice.js

@@ -44,8 +44,9 @@ import { HintTooltip } from '../../components/Taxonomy/Taxonomy';
  * @param {string} [alias]     - Alias for the choice. If used, the alias replaces the choice value in the annotation results. Alias does not display in the interface.
  * @param {style} [style]      - CSS style of the checkbox element
  * @param {string} [hotkey]    - Hotkey for the selection
- * @param {string} [html]      - can be used to show enriched content[^FF_DEV_2007], it has higher priority than `value`, however `value` will be used in the exported result (should be properly escaped)
+ * @param {string} [html]      - Can be used to show enriched content[^FF_DEV_2007], it has higher priority than `value`, however `value` will be used in the exported result (should be properly escaped)
  * @param {string} [hint]      - Hint for choice on hover[^FF_PROD_309]
+ * @param {string} [color]     - Color for Taxonomy item
  */
 const TagAttrs = types.model({
   ...(isFF(FF_DEV_3391) ? { id: types.identifier } : {}),
@@ -54,6 +55,7 @@ const TagAttrs = types.model({
   value: types.maybeNull(types.string),
   hotkey: types.maybeNull(types.string),
   style: types.maybeNull(types.string),
+  color: types.maybeNull(types.string),
   ...(isFF(FF_DEV_2007) ? { html: types.maybeNull(types.string) } : {}),
   ...(isFF(FF_PROD_309) ? { hint: types.maybeNull(types.string) } : {}),
 });

src/tags/control/Taxonomy/Taxonomy.js

@@ -103,6 +103,7 @@ function traverse(root) {
     const depth = parents.length;
     const obj = { label, path, depth, hint };
 
+    if (node.color) obj.color = node.color;
     if (node.children) {
       obj.children = visitUnique(node.children, path);
     }
@@ -267,6 +268,35 @@ const Model = types
 
       return findItem(self.items);
     },
+
+    /**
+     * @param {string[]} path saved value from Taxonomy
+     * @returns quazi-label object to act as Label in most places
+     */
+    findLabel(path) {
+      let title = '';
+      let items = self.items;
+      let item;
+
+      for (const value of path) {
+        item = items?.find(item => item.path.at(-1) === value);
+
+        if (!item) return null;
+
+        items = item.children;
+        title = self.showfullpath && title ? title + self.pathseparator + item.label : item.label;
+      }
+
+      const label = { value: title, id: path.join(self.pathseparator) };
+
+      if (item.color) {
+        // to conform the current format of our Result#style (and it requires parent)
+        label.background = item.color;
+        label.parent = {};
+      }
+
+      return label;
+    },
   }))
   .actions(self => ({
     afterAttach() {
@@ -375,6 +405,9 @@ const Model = types
     },
 
     onChange(_node, checked) {
+      // don't remove last label from region
+      if (self.isLabeling && !checked.length) return;
+
       self.selected = checked.map(s => s.path ?? s);
       self.maxUsagesReached = self.selected.length >= self.maxusages;
       self.updateResult();