From 57e11ad9e1ca757ad2b73c068df5cc6b252bcdd9 Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Wed, 5 Nov 2025 10:14:11 -0500
Subject: [PATCH 1/2] Normalize text max width before rendering

---
 .../zoomable-text-layer/zoomable-text-layer.ts  | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts b/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
index a39907b2a..639f7ea6e 100644
--- a/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
+++ b/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
@@ -5,6 +5,19 @@
 import {CompositeLayer} from '@deck.gl/core';
 import {TextLayer} from '@deck.gl/layers';
 
+const DEFAULT_MAX_WIDTH = Number.MAX_SAFE_INTEGER;
+
+const normalizeMaxWidth = (value: unknown) => {
+  if (typeof value === 'function') {
+    return (d: unknown) => {
+      const width = Number((value as (arg0: unknown) => unknown)(d));
+      return Number.isFinite(width) && width > 0 ? width : DEFAULT_MAX_WIDTH;
+    };
+  }
+  const width = Number(value);
+  return Number.isFinite(width) && width > 0 ? width : DEFAULT_MAX_WIDTH;
+};
+
 export class ZoomableTextLayer extends CompositeLayer {
   static layerName = 'ZoomableTextLayer';
 
@@ -59,6 +72,8 @@ export class ZoomableTextLayer extends CompositeLayer {
     // getText only expects function not plain value (string)
     const newGetText = typeof getText === 'function' ? getText : () => getText;
 
+    const resolvedMaxWidth = normalizeMaxWidth(textMaxWidth);
+
     return [
       new TextLayer(
         this.getSubLayerProps({
@@ -73,7 +88,7 @@ export class ZoomableTextLayer extends CompositeLayer {
           getAlignmentBaseline,
           getAngle,
           getText: newGetText,
-          maxWidth: textMaxWidth ?? 12,
+          maxWidth: resolvedMaxWidth,
           wordBreak: textWordBreak ?? 'break-all',
           fontFamily: fontFamily ?? 'Red Hat Text',
           wordUnits: textWordUnits ?? 'pixels',

From 39c3566f8b3559660c54cd055e0ce5d58cda7fd5 Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Wed, 5 Nov 2025 12:37:02 -0500
Subject: [PATCH 2/2] Clamp text max width and fix layout panel toggle

---
 .../graph-viewer/layout-options-panel.tsx     | 11 +++++++++-
 .../zoomable-text-layer.ts                    | 20 ++++++++++++-------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/examples/graph-layers/graph-viewer/layout-options-panel.tsx b/examples/graph-layers/graph-viewer/layout-options-panel.tsx
index 2c0d4e86f..b77448b74 100644
--- a/examples/graph-layers/graph-viewer/layout-options-panel.tsx
+++ b/examples/graph-layers/graph-viewer/layout-options-panel.tsx
@@ -312,13 +312,22 @@ export function LayoutOptionsPanel({
   appliedOptions,
   onApply
 }: LayoutOptionsPanelProps) {
+  const [isDagOptionsOpen, setIsDagOptionsOpen] = useState(true);
+  const handleDagToggle = useCallback((event: React.SyntheticEvent<HTMLDetailsElement>) => {
+    setIsDagOptionsOpen(event.currentTarget.open);
+  }, []);
+
   if (!layout) {
     return null;
   }
 
   if (layout === 'd3-dag-layout') {
     return (
-      <details defaultOpen style={{borderTop: '1px solid #e2e8f0', paddingTop: '0.75rem'}}>
+      <details
+        open={isDagOptionsOpen}
+        onToggle={handleDagToggle}
+        style={{borderTop: '1px solid #e2e8f0', paddingTop: '0.75rem'}}
+      >
         <summary
           style={{
             margin: 0,
diff --git a/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts b/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
index 639f7ea6e..b5a30ddc2 100644
--- a/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
+++ b/modules/graph-layers/src/layers/common-layers/zoomable-text-layer/zoomable-text-layer.ts
@@ -5,17 +5,23 @@
 import {CompositeLayer} from '@deck.gl/core';
 import {TextLayer} from '@deck.gl/layers';
 
-const DEFAULT_MAX_WIDTH = Number.MAX_SAFE_INTEGER;
+// deck.gl's MultiIconLayer stores character offsets in a 16-bit buffer, so clamp the
+// computed max width to avoid overflowing the attribute when stylesheet values are invalid.
+const TEXT_LAYER_MAX_SAFE_WIDTH = 32767;
+
+const clampMaxWidth = (value: unknown) => {
+  const width = Number(value);
+  if (!Number.isFinite(width) || width <= 0) {
+    return TEXT_LAYER_MAX_SAFE_WIDTH;
+  }
+  return Math.min(width, TEXT_LAYER_MAX_SAFE_WIDTH);
+};
 
 const normalizeMaxWidth = (value: unknown) => {
   if (typeof value === 'function') {
-    return (d: unknown) => {
-      const width = Number((value as (arg0: unknown) => unknown)(d));
-      return Number.isFinite(width) && width > 0 ? width : DEFAULT_MAX_WIDTH;
-    };
+    return (d: unknown) => clampMaxWidth((value as (arg0: unknown) => unknown)(d));
   }
-  const width = Number(value);
-  return Number.isFinite(width) && width > 0 ? width : DEFAULT_MAX_WIDTH;
+  return clampMaxWidth(value);
 };
 
 export class ZoomableTextLayer extends CompositeLayer {