From c00749efebdbbf1a217a6fce17cda4171fae5333 Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Fri, 6 Sep 2024 11:10:45 -0700
Subject: [PATCH] fix useWidth usage, use overlayref directly

---
 frontend/app/block/block.tsx      |  4 ++--
 frontend/app/block/blockframe.tsx | 22 +++++++++++-----------
 frontend/app/block/blocktypes.ts  |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
index 8e5121978..3868d2ad0 100644
--- a/frontend/app/block/block.tsx
+++ b/frontend/app/block/block.tsx
@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { BlockComponentModel, BlockProps } from "@/app/block/blocktypes";
+import { BlockComponentModel2, BlockProps } from "@/app/block/blocktypes";
 import { PlotView } from "@/app/view/plotview/plotview";
 import { PreviewModel, PreviewView, makePreviewModel } from "@/app/view/preview/preview";
 import { ErrorBoundary } from "@/element/errorboundary";
@@ -220,7 +220,7 @@ const BlockFull = React.memo(({ nodeModel, viewModel }: FullBlockProps) => {
         focusElemRef.current?.focus({ preventScroll: true });
     }, []);
 
-    const blockModel: BlockComponentModel = {
+    const blockModel: BlockComponentModel2 = {
         onClick: setBlockClickedTrue,
         onFocusCapture: handleChildFocus,
         blockRef: blockRef,
diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
index 3ef1a5cc0..f5f0bcc8c 100644
--- a/frontend/app/block/blockframe.tsx
+++ b/frontend/app/block/blockframe.tsx
@@ -1,7 +1,6 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { BlockComponentModel } from "@/app/block/blocktypes";
 import {
     blockViewToIcon,
     blockViewToName,
@@ -266,12 +265,10 @@ function renderHeaderElements(headerTextUnion: HeaderElem[], preview: boolean):
 
 const ConnStatusOverlay = React.memo(
     ({
-        blockModel,
         nodeModel,
         viewModel,
         changeConnModalAtom,
     }: {
-        blockModel: BlockComponentModel;
         nodeModel: NodeModel;
         viewModel: ViewModel;
         changeConnModalAtom: jotai.PrimitiveAtom<boolean>;
@@ -281,8 +278,10 @@ const ConnStatusOverlay = React.memo(
         const connName = blockData.meta?.connection;
         const connStatus = jotai.useAtomValue(getConnStatusAtom(connName));
         const isLayoutMode = jotai.useAtomValue(atoms.controlShiftDelayAtom);
-        const width = useWidth(blockModel?.blockRef);
+        const overlayRef = React.useRef<HTMLDivElement>(null);
+        const width = useWidth(overlayRef);
         const [showError, setShowError] = React.useState(false);
+        const blockNum = jotai.useAtomValue(nodeModel.blockNum);
 
         React.useEffect(() => {
             if (width) {
@@ -319,7 +318,7 @@ const ConnStatusOverlay = React.memo(
         }
 
         return (
-            <div className="connstatus-overlay">
+            <div className="connstatus-overlay" ref={overlayRef}>
                 <div className="connstatus-content">
                     <div className={clsx("connstatus-status-icon-wrapper", { "has-error": showError })}>
                         {showIcon && <i className="fa-solid fa-triangle-exclamation"></i>}
@@ -443,12 +442,13 @@ const BlockFrame_Default_Component = (props: BlockFrameProps) => {
             ref={blockModel?.blockRef}
         >
             <BlockMask nodeModel={nodeModel} />
-            <ConnStatusOverlay
-                blockModel={blockModel}
-                nodeModel={nodeModel}
-                viewModel={viewModel}
-                changeConnModalAtom={changeConnModalAtom}
-            />
+            {preview ? null : (
+                <ConnStatusOverlay
+                    nodeModel={nodeModel}
+                    viewModel={viewModel}
+                    changeConnModalAtom={changeConnModalAtom}
+                />
+            )}
             <div className="block-frame-default-inner" style={innerStyle}>
                 <BlockFrame_Header {...props} connBtnRef={connBtnRef} changeConnModalAtom={changeConnModalAtom} />
                 {preview ? previewElem : children}
diff --git a/frontend/app/block/blocktypes.ts b/frontend/app/block/blocktypes.ts
index ea36d1e2a..2340f9d17 100644
--- a/frontend/app/block/blocktypes.ts
+++ b/frontend/app/block/blocktypes.ts
@@ -7,14 +7,14 @@ export interface BlockProps {
     nodeModel: NodeModel;
 }
 
-export interface BlockComponentModel {
+export interface BlockComponentModel2 {
     onClick?: () => void;
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
     blockRef?: React.RefObject<HTMLDivElement>;
 }
 
 export interface BlockFrameProps {
-    blockModel?: BlockComponentModel;
+    blockModel?: BlockComponentModel2;
     nodeModel?: NodeModel;
     viewModel?: ViewModel;
     preview: boolean;