[ui] Fix unnecessary middle truncation occurring in dialogs

dagster-io · Nov 23, 2024 · 971c853 · 971c853
1 parent 6898a4d
commit 971c853
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 10 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/MiddleTruncate.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/MiddleTruncate.tsx
@@ -38,8 +38,8 @@ export const MiddleTruncate = ({text, showTitle = true}: Props) => {
 
   // Use a layout effect to trigger the process of calculating the truncated text, for the
   // initial render.
-  React.useLayoutEffect(() => {
-    calculateTargetStyle();
+  React.useEffect(() => {
+    window.requestAnimationFrame(calculateTargetStyle);
   }, [calculateTargetStyle]);
 
   // If the container has just been resized, recalculate.
@@ -87,7 +87,9 @@ const Container = styled.div`
  */
 const calculateMiddleTruncatedText = (container: HTMLDivElement, text: string) => {
   const font = getComputedStyle(container).font;
-  const width = container.getBoundingClientRect().width;
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements#how_much_room_does_it_use_up
+  const width = container.offsetWidth;
 
   const body = document.body;
 

diff --git a/...s/dagster-ui/packages/ui-components/src/components/__stories__/MiddleTruncate.stories.tsx b/...s/dagster-ui/packages/ui-components/src/components/__stories__/MiddleTruncate.stories.tsx
@@ -45,6 +45,36 @@ export const Simple = () => {
   );
 };
 
+export const TransformedContainerUsage = () => {
+  return (
+    <Box>
+      <em style={{display: 'block', marginBottom: 10}}>
+        Note: Only the first item should appear truncated. This use case is based on our usage of
+        MiddleTruncate in modals that animate in.
+      </em>
+      {[
+        'asset_that_supports_partition_ranges',
+        'asset_downstream',
+        'asset_weekly_root',
+        'asset_weekly',
+      ].map((text) => (
+        <Box
+          key={text}
+          style={{maxWidth: 200, transform: 'scale(0.8)'}}
+          flex={{direction: 'row', gap: 8}}
+        >
+          <Box>
+            <Icon name="asset_non_sda" />
+          </Box>
+          <a style={{overflow: 'hidden'}} href="#/">
+            <MiddleTruncate text={text} />
+          </a>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
 export const FlexboxContainerUsage = () => {
   return (
     <Box>
@@ -85,6 +115,7 @@ export const FlexboxContainerUsage = () => {
     </Box>
   );
 };
+
 export const TagUsage = () => {
   return (
     <Tag icon="job">

diff --git a/...ules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetKeysDialog.tsx b/...ules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetKeysDialog.tsx
@@ -22,7 +22,7 @@ export const AssetKeysDialog = (props: Props) => {
     <Dialog
       isOpen={isOpen}
       onClose={() => setIsOpen(false)}
-      style={{width: '750px', maxWidth: '80vw', minWidth: '500px', transform: 'scale(1)'}}
+      style={{width: '750px', maxWidth: '80vw', minWidth: '500px'}}
       canOutsideClickClose
       canEscapeKeyClose
     >

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/BackfillPreviewModal.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/BackfillPreviewModal.tsx
@@ -65,16 +65,12 @@ export const BackfillPreviewModal = ({
     );
   }, [data]);
 
-  // BG Note: The transform: scale(1) below fixes a bug with MiddleTruncate where the text size
-  // is measured while the dialog is animating open and the scale is < 1, causing it to think
-  // it needs to truncate. A more general fix for this seems like it'll require a lot of testing.
-
   return (
     <Dialog
       title="Backfill preview"
       isOpen={isOpen}
       onClose={() => setOpen(false)}
-      style={{width: '90vw', maxWidth: 1100, transform: 'scale(1)'}}
+      style={{width: '90vw', maxWidth: 1100}}
     >
       <Container
         ref={parentRef}

diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickDetailsDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickDetailsDialog.tsx
@@ -54,7 +54,7 @@ export const TickDetailsDialog = ({
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      style={{width: '80vw', maxWidth: '1200px', minWidth: '600px', transform: 'scale(1)'}}
+      style={{width: '80vw', maxWidth: '1200px', minWidth: '600px'}}
     >
       <TickDetailsDialogImpl
         tickId={tickId}