fix: OPTIC-108: Text on grid view should be truncated (#5369)

* [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7673181192 * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7673194512 * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7698095628 * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7698124837 * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7702968862 * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7702983880 * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7715411423 * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7715428017 * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7716108167 * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7716119703 * ci: Build frontend Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7716149007 * adding unit tests * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7728618305 * [submodules] Copy src HumanSignal/dm2 Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/7728648568 --------- Co-authored-by: Yousif Yassi <[email protected]> Co-authored-by: robot-ci-heartex <[email protected]> Co-authored-by: yyassi-heartex <[email protected]>
HumanSignal · Jan 31, 2024 · b442374 · b442374
1 parent 5d6ddac
commit b442374
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/web/dist/libs/datamanager/main.js b/web/dist/libs/datamanager/main.js
diff --git a/web/dist/libs/datamanager/main.js.map b/web/dist/libs/datamanager/main.js.map
diff --git a/web/libs/datamanager/src/components/DataGroups/AudioDataGroup.js b/web/libs/datamanager/src/components/DataGroups/AudioDataGroup.js
@@ -1,11 +1,17 @@
 import { MediaPlayer } from "../Common/MediaPlayer/MediaPlayer";
 
 export const AudioDataGroup = ({ value }) => {
+  const style = {
+    padding: 10, 
+    height: AudioDataGroup.height, 
+    boxSizing: "content-box",
+  };
+
   return (
-    <div style={{ padding: 10, height: AudioDataGroup.height }}>
+    <div style={style}>
       <MediaPlayer src={value} />
     </div>
   );
 };
 
-AudioDataGroup.height = 42;
+AudioDataGroup.height = 32;
diff --git a/web/libs/datamanager/src/components/DataGroups/TextDataGroup.js b/web/libs/datamanager/src/components/DataGroups/TextDataGroup.js
@@ -1,21 +1,35 @@
-const valueToString = (value) => {
+import { format, isValid } from "date-fns";
+import { dateTimeFormat } from "../CellViews/DateTimeCell";
+
+export const valueToString = (value) => {
   if (typeof value === "string") return value;
+  /* if undefined or null we'll treat it as empty string */
+  if (value === undefined || value === null) return "";
+  if (value instanceof Date && isValid(value)) return format(value, dateTimeFormat);
 
   try {
+    /* JSON.stringify will handle JSON and non-strings, non-null, non-undefined */
     return JSON.stringify(value);
   } catch {
-    return value.toString();
+    return 'Error: Invalid JSON';
   }
 };
 
 export const TextDataGroup = ({ value }) => {
+  const output = valueToString(value);
+  const style = { 
+    padding: 5, 
+    height: TextDataGroup.height, 
+    overflow: "hidden", 
+    whiteSpace: "nowrap", 
+    textOverflow: "ellipsis",
+  };
+
   return (
-    <div
-      style={{ padding: 5, height: TextDataGroup.height, overflow: "hidden" }}
-    >
-      {value ? valueToString(value) : ""}
+    <div style={style} title={output}>
+      {output}
     </div>
   );
 };
 
-TextDataGroup.height = 77;
+TextDataGroup.height = 32;