From 64a7a6e5337b0fc14b40ac6f8cf991a445429cb5 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Wed, 4 Sep 2024 15:25:25 -0700
Subject: [PATCH] Truncate file paths from the left in the preview header
 (#322)

This adjusts the block header styling to remove a bunch of unnecessary
attributes and to ensure that we have more consistent shrinking
behavior. Now, file paths will truncate starting on the left side, to
preserve the file name as long as possible. Also, the widget name can
shrink down to zero, while preserving the widget icon, since it's
unnecessary to have both when the widget is small.

<img width="415" alt="image"
src="https://github.com/user-attachments/assets/46e0a74a-f35d-4d09-9c67-019936e67e41">
---
 frontend/app/block/block.less         | 15 ++++++++-------
 frontend/app/block/blockframe.tsx     | 24 ++++++++++--------------
 frontend/app/view/preview/preview.tsx |  1 -
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index 93e4fa70..ba55d76b 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -85,7 +85,8 @@
 
                 .block-frame-default-header-iconview {
                     display: flex;
-                    flex: 0 1 auto;
+                    flex-shrink: 3;
+                    min-width: 17px;
                     align-items: center;
                     gap: 8px;
                     overflow-x: hidden;
@@ -100,10 +101,11 @@
                     }
 
                     .block-frame-view-type {
-                        font-weight: 700;
                         overflow-x: hidden;
                         text-wrap: nowrap;
                         text-overflow: ellipsis;
+                        flex-shrink: 1;
+                        min-width: 0;
                     }
 
                     .block-frame-blockid {
@@ -116,12 +118,12 @@
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
-                    overflow-x: hidden;
                     flex-grow: 1;
 
                     &.preview-filename {
+                        direction: rtl;
+                        text-align: left;
                         span {
-                            height: 100%;
                             cursor: pointer;
 
                             &:hover {
@@ -168,7 +170,7 @@
                     }
 
                     .connection-name {
-                        flex: 1 100 auto;
+                        flex: 1 2 auto;
                         overflow: hidden;
                         padding-right: 4px;
                     }
@@ -176,11 +178,10 @@
 
                 .block-frame-textelems-wrapper {
                     display: flex;
-                    flex: 1 100 auto;
+                    flex: 1 2 auto;
                     min-width: 0;
                     gap: 8px;
                     align-items: center;
-                    overflow-x: hidden;
 
                     .block-frame-div {
                         display: flex;
diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
index 9e9818bc..8469a97b 100644
--- a/frontend/app/block/blockframe.tsx
+++ b/frontend/app/block/blockframe.tsx
@@ -178,24 +178,13 @@ const BlockFrame_Header = ({
         if (!util.isBlank(headerTextUnion)) {
             headerTextElems.push(
                 <div key="text" className="block-frame-text">
-                    {headerTextUnion}
+                    &lrm;{headerTextUnion}
                 </div>
             );
         }
     } else if (Array.isArray(headerTextUnion)) {
         headerTextElems.push(...renderHeaderElements(headerTextUnion, preview));
     }
-    if (manageConnection) {
-        const connButtonElem = (
-            <ConnectionButton
-                ref={connBtnRef}
-                key="connbutton"
-                connection={blockData?.meta?.connection}
-                changeConnModalAtom={changeConnModalAtom}
-            />
-        );
-        headerTextElems.unshift(connButtonElem);
-    }
     headerTextElems.unshift(<ControllerStatusIcon key="connstatus" blockId={nodeModel.blockId} />);
 
     return (
@@ -206,7 +195,14 @@ const BlockFrame_Header = ({
                 <div className="block-frame-view-type">{viewName}</div>
                 {showBlockIds && <div className="block-frame-blockid">[{nodeModel.blockId.substring(0, 8)}]</div>}
             </div>
-
+            {manageConnection && (
+                <ConnectionButton
+                    ref={connBtnRef}
+                    key="connbutton"
+                    connection={blockData?.meta?.connection}
+                    changeConnModalAtom={changeConnModalAtom}
+                />
+            )}
             <div className="block-frame-textelems-wrapper">{headerTextElems}</div>
             <div className="block-frame-end-icons">{endIconsElem}</div>
         </div>
@@ -222,7 +218,7 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
         return (
             <div className={clsx("block-frame-text", elem.className)}>
                 <span ref={preview ? null : elem.ref} onClick={() => elem?.onClick()}>
-                    {elem.text}
+                    &lrm;{elem.text}
                 </span>
             </div>
         );
diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
index a62eaff7..264c875e 100644
--- a/frontend/app/view/preview/preview.tsx
+++ b/frontend/app/view/preview/preview.tsx
@@ -143,7 +143,6 @@ export class PreviewModel implements ViewModel {
         this.monacoRef = createRef();
         this.viewIcon = jotai.atom((get) => {
             const blockData = get(this.blockAtom);
-            const fileName = get(this.metaFilePath);
             const mimeTypeLoadable = get(this.fileMimeTypeLoadable);
             if (blockData?.meta?.icon) {
                 return blockData.meta.icon;