fix: LEAP-859: Fix data manager breaking on displaying specific data

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-HUMSIG-37-visuals'",
-  "commit": "309851f803a1995c36b11f416f80cff709b6be2f",
-  "date": "2024-04-04T16:34:09.000Z",
-  "branch": "fb-HUMSIG-37-visuals"
+  "message": "Update web/libs/datamanager/src/components/CellViews/index.js",
+  "commit": "8553ac21be3cf2f6546938902868db11ecbea92a",
+  "date": "2024-04-09T15:06:54.000Z",
+  "branch": "fb-leap-859/colimn-special-characters"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-HUMSIG-37-visuals'",
-  "commit": "309851f803a1995c36b11f416f80cff709b6be2f",
-  "date": "2024-04-04T16:34:09.000Z",
-  "branch": "fb-HUMSIG-37-visuals"
+  "message": "Update web/libs/datamanager/src/components/CellViews/index.js",
+  "commit": "8553ac21be3cf2f6546938902868db11ecbea92a",
+  "date": "2024-04-09T15:06:54.000Z",
+  "branch": "fb-leap-859/colimn-special-characters"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-HUMSIG-37-visuals'",
-  "commit": "309851f803a1995c36b11f416f80cff709b6be2f",
-  "date": "2024-04-04T16:34:09.000Z",
-  "branch": "fb-HUMSIG-37-visuals"
+  "message": "Update web/libs/datamanager/src/components/CellViews/index.js",
+  "commit": "8553ac21be3cf2f6546938902868db11ecbea92a",
+  "date": "2024-04-09T15:06:54.000Z",
+  "branch": "fb-leap-859/colimn-special-characters"
 }

web/libs/datamanager/src/components/CellViews/index.js

@@ -1,3 +1,5 @@
+import { toStudlyCaps } from "strman";
+
 export { Agreement } from './Agreement/Agreement';
 export {
   Annotators,
@@ -15,3 +17,9 @@ export { StringCell as Text } from "./StringCell";
 export { VideoCell as Video } from "./VideoCell";
 export { ProjectCell as Project } from './ProjectCell';
 
+export function normalizeCellAlias(alias) {
+  // remove trailing separators to make `toStudlyCaps` safe
+  const safeAlias = alias.replace(/[-_\s]+$/g, '');
+
+  return toStudlyCaps(safeAlias);
+}

web/libs/datamanager/src/components/Common/Table/TableRow/TableRow.js

@@ -1,12 +1,12 @@
 import { observer } from "mobx-react";
 import React from "react";
-import { toStudlyCaps } from 'strman';
 import { Block } from "../../../../utils/bem";
+import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
+import { normalizeCellAlias } from "../../../CellViews";
+import { SkeletonLoader } from "../../SkeletonLoader";
 import { TableContext, TableElem } from "../TableContext";
 import { getProperty, getStyle } from "../utils";
 import "./TableRow.styl";
-import { SkeletonLoader } from "../../SkeletonLoader";
-import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
 
 const CellRenderer = observer(
   ({ col: colInput, data, decoration, cellViews }) => {
@@ -24,7 +24,7 @@ const CellRenderer = observer(
 
 
     const valuePath = id.split(":")[1] ?? id;
-    const altType = toStudlyCaps(valuePath);
+    const altType = normalizeCellAlias(valuePath);
     const value = getProperty(data, valuePath);
 
     const Renderer = cellViews[altType] ?? cellViews[col.original.currentType] ?? cellViews.String;

web/libs/datamanager/src/components/Common/TableOld/TableRow/TableRow.js

@@ -1,12 +1,12 @@
 import { observer } from "mobx-react";
 import React from "react";
-import { toStudlyCaps } from 'strman';
 import { Block } from "../../../../utils/bem";
-import { TableContext, TableElem } from "../TableContext";
-import { getProperty, getStyle } from "../utils";
+import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
+import { normalizeCellAlias } from "../../../CellViews";
 import { SkeletonLoader } from "../../SkeletonLoader";
 import "./TableRow.styl";
-import { FF_LOPS_E_3, isFF } from "../../../../utils/feature-flags";
+import { TableContext, TableElem } from "../TableContext";
+import { getProperty, getStyle } from "../utils";
 
 const CellRenderer = observer(
   ({ col: colInput, data, decoration, cellViews }) => {
@@ -24,7 +24,7 @@ const CellRenderer = observer(
 
 
     const valuePath = id.split(":")[1] ?? id;
-    const altType = toStudlyCaps(valuePath);
+    const altType = normalizeCellAlias(valuePath);
     const value = getProperty(data, valuePath);
 
     const Renderer = cellViews[altType] ?? cellViews[col.original.currentType] ?? cellViews.String;

web/libs/datamanager/src/stores/Tabs/tab_column.js

@@ -1,8 +1,17 @@
 import { getRoot, getSnapshot, types } from "mobx-state-tree";
 import React from "react";
-import { toStudlyCaps } from "strman";
-import { CommentCheck, CommentRed, LsAnnotation, LsBanSquare, LsSparkSquare, LsStarSquare, LsThumbsDown, LsThumbsUp } from "../../assets/icons";
+import {
+  CommentCheck,
+  CommentRed,
+  LsAnnotation,
+  LsBanSquare,
+  LsSparkSquare,
+  LsStarSquare,
+  LsThumbsDown,
+  LsThumbsUp
+} from "../../assets/icons";
 import * as CellViews from "../../components/CellViews";
+import { normalizeCellAlias } from "../../components/CellViews";
 import { all } from "../../utils/utils";
 import { StringOrNumberID } from "../types";
 
@@ -214,7 +223,9 @@ export const TabColumn = types
     },
 
     get filterable() {
-      return ((CellViews[self.type] ?? CellViews[toStudlyCaps(self.alias)])?.filterable) !== false;
+      const cellView = CellViews[self.type] ?? CellViews[normalizeCellAlias(self.alias)];
+
+      return cellView?.filterable !== false;
     },
   }))
   .actions((self) => ({

web/libs/datamanager/src/stores/Tabs/tab_filter.js

@@ -1,15 +1,11 @@
 import { flow, getParent, getRoot, types } from "mobx-state-tree";
-import { toStudlyCaps } from "strman";
-import * as Filters from "../../components/Filters/types";
 import * as CellViews from "../../components/CellViews";
+import { normalizeCellAlias } from "../../components/CellViews";
+import * as Filters from "../../components/Filters/types";
 import { allowedFilterOperations } from "../../components/Filters/types/Utility";
 import { debounce } from "../../utils/debounce";
 import { isBlank, isDefined } from "../../utils/utils";
-import {
-  FilterValueRange,
-  FilterValueType,
-  TabFilterType
-} from "./tab_filter_type";
+import { FilterValueRange, FilterValueType, TabFilterType } from "./tab_filter_type";
 
 const operatorNames = Array.from(
   new Set(
@@ -99,7 +95,7 @@ export const TabFilter = types
     get cellView() {
       const col = self.filter.field;
 
-      return CellViews[col.type] ?? CellViews[toStudlyCaps(col.alias)];
+      return CellViews[col.type] ?? CellViews[normalizeCellAlias(col.alias)];
     },
   }))
   .volatile(() => ({