[shared-ui] Only show graph outline when there are multiple graphs (#…

…4044)

.changeset/old-cats-hide.md

@@ -0,0 +1,6 @@
+---
+"@breadboard-ai/shared-ui": patch
+"@google-labs/breadboard-website": patch
+---
+
+Only show graph outline when there are multiple graphs

packages/bbrt/src/components/board-visualizer.ts

@@ -72,6 +72,7 @@ export class BBRTBoardVisualizer extends LitElement {
       subGraphId: null,
       minimized: false,
       showNodePreviewValues: true,
+      showGraphOutline: false,
       collapseNodesByDefault: false,
       ports: ports,
       typeMetadata,

packages/shared-ui/src/elements/editor/editor.ts

@@ -216,9 +216,6 @@ export class Editor extends LitElement implements DragConnectorReceiver {
   @property()
   showBoardReferenceMarkers = false;
 
-  @property()
-  showMainGraphBorder = true;
-
   @state()
   showOverflowMenu = false;
 
@@ -475,6 +472,8 @@ export class Editor extends LitElement implements DragConnectorReceiver {
       subGraphId ? subGraphId : MAIN_BOARD_ID
     );
 
+    const hasSubGraphs = Object.keys(selectedGraph.graphs() ?? {}).length > 0;
+
     return {
       url,
       title: subGraphId
@@ -490,6 +489,7 @@ export class Editor extends LitElement implements DragConnectorReceiver {
       nodes: selectedGraph.nodes(),
       modules: selectedGraph.modules(),
       metadata: selectedGraph.metadata() || {},
+      showGraphOutline: subGraphId ? true : hasSubGraphs,
       references,
       selectionState: graphSelectionState ?? null,
     };
@@ -1113,7 +1113,6 @@ export class Editor extends LitElement implements DragConnectorReceiver {
         .selectionChangeId=${this.selectionState?.selectionChangeId}
         .moveToSelection=${this.selectionState?.moveToSelection}
         .showBoardReferenceMarkers=${this.showBoardReferenceMarkers}
-        .showMainGraphBorder=${this.showMainGraphBorder}
       ></bb-graph-renderer>
     </div>`;
 

packages/shared-ui/src/elements/editor/graph-renderer.ts

@@ -118,9 +118,6 @@ export class GraphRenderer extends LitElement {
   @property()
   showSubgraphsInline = false;
 
-  @property()
-  showMainGraphBorder = true;
-
   @property()
   assetPrefix = "";
 
@@ -1092,12 +1089,13 @@ export class GraphRenderer extends LitElement {
     }
   }
 
-  #applyPositionDeltaToSelection(delta: PIXI.Point) {
+  #applyPositionDeltaToSelection(delta: PIXI.Point, settled = false) {
     for (const child of this.#container.children) {
       if (!(child instanceof Graph)) {
         continue;
       }
-      child.updateNodePositions(delta);
+
+      child.updateNodePositions(delta, settled);
     }
   }
 
@@ -2248,6 +2246,7 @@ export class GraphRenderer extends LitElement {
           }
         }
 
+        this.#applyPositionDeltaToSelection(delta, true);
         this.#emitGraphVisualInformation();
       }
     );
@@ -2624,7 +2623,7 @@ export class GraphRenderer extends LitElement {
 
     graph.subGraphId = subGraphId;
     graph.graphTitle = opts.title ?? null;
-    graph.graphOutlineVisible = subGraphId !== null || this.showMainGraphBorder;
+    graph.graphOutlineVisible = opts.showGraphOutline ?? false;
 
     return true;
   }

packages/shared-ui/src/elements/editor/graph.ts

@@ -1186,7 +1186,7 @@ export class Graph extends PIXI.Container {
     }
   }
 
-  updateNodePositions(delta: PIXI.Point) {
+  updateNodePositions(delta: PIXI.Point, settled = false) {
     const selectionState = this.#selectionState;
     if (!selectionState) {
       return;
@@ -1206,6 +1206,9 @@ export class Graph extends PIXI.Container {
       child.x = layout.x + delta.x;
       child.y = layout.y + delta.y;
 
+      if (!settled) {
+        continue;
+      }
       this.setNodeLayoutPosition(
         node,
         "node",
@@ -1229,6 +1232,9 @@ export class Graph extends PIXI.Container {
       child.x = layout.x + delta.x;
       child.y = layout.y + delta.y;
 
+      if (!settled) {
+        continue;
+      }
       this.setNodeLayoutPosition(
         comment,
         "comment",
@@ -1655,6 +1661,10 @@ export class Graph extends PIXI.Container {
     this.#graphOutlineMarker.clear();
     this.#graphOutlineConnector.clear();
 
+    if (this.#graphOutlineTitleLabel) {
+      this.#graphOutlineTitleLabel.visible = false;
+    }
+
     if (this.#graphOutlineConnectorIcon) {
       this.#graphOutlineConnectorIcon.visible = false;
     }
@@ -1757,6 +1767,7 @@ export class Graph extends PIXI.Container {
 
       this.#graphOutlineTitleLabel.x = x + 14;
       this.#graphOutlineTitleLabel.y = y + 8;
+      this.#graphOutlineTitleLabel.visible = true;
 
       if (this.subGraphId) {
         if (this.#graphOutlineConnectorIcon) {

packages/shared-ui/src/elements/editor/types.ts

@@ -84,6 +84,7 @@ export interface GraphOpts {
   title: string;
   subGraphId: string | null;
   showNodePreviewValues: boolean;
+  showGraphOutline: boolean;
   collapseNodesByDefault: boolean;
   ports: Map<string, InspectableNodePorts> | null;
   typeMetadata: Map<string, NodeHandlerMetadata> | null;

packages/shared-ui/src/elements/module-editor/module-editor.ts

@@ -648,6 +648,7 @@ export class ModuleEditor extends LitElement {
       minimized: false,
       showNodePreviewValues: false,
       collapseNodesByDefault: false,
+      showGraphOutline: false,
       ports: ports,
       typeMetadata,
       edges: selectedGraph.edges(),
@@ -907,7 +908,6 @@ export class ModuleEditor extends LitElement {
                 .highlightInvalidWires=${false}
                 .showPortTooltips=${false}
                 .showSubgraphsInline=${false}
-                .showMainGraphBorder=${false}
                 .selectionChangeId=${null}
               ></bb-graph-renderer>
             </div>

packages/website/src/js/board-embed.ts

@@ -151,7 +151,6 @@ export class BoardEmbed extends LitElement {
         .showReadOnlyLabel=${false}
         .readOnly=${true}
         .hideRibbonMenu=${true}
-        .showMainGraphBorder=${false}
       ></bb-editor>
       <div id="overlay"></div>
       ${this.url