@esri/solutions-components 1.2.0-next.95 → 1.2.0-next.97

package/dist/components/solution-item-diagram/customElement.js

@@ -1,16 +1,16 @@
-import { c as b } from "../../chunks/runtime.js";
-import { css as E, html as B } from "lit";
-import { u as D } from "../../chunks/useT9n.js";
-import { LitElement as C } from "@arcgis/lumina";
-import { createRef as y, ref as w } from "lit-html/directives/ref.js";
-import * as d from "gojs";
-import { g as z } from "../../chunks/getItemIcon.js";
-import { injectGlobal as A } from "@emotion/css";
-import "../solution-item-accordion/customElement.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.94 */
-const $ = E`/** @license
+v1.2.0-next.96 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement } from "@arcgis/lumina";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import * as go from "gojs";
+import { g as getIconUrl } from "../../chunks/getItemIcon.js";
+import { injectGlobal } from "@emotion/css";
+import "../solution-item-accordion/customElement.js";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,7 +24,47 @@ const $ = E`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */#filter-bar{background-color:#f4f4f4;position:absolute;top:16px;right:220px;z-index:100}#filteredViewButtonDiv{padding:16px 16px 4px}#graph-navigation-bar{background-color:#f4f4f4;position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0}.z-index-1{z-index:1}#diagram-panel{--calcite-panel-space: 0px}#diagram-shell-panel{--calcite-color-background: var(--calcite-color-foreground-1);padding:16px}`;
+ */
+
+#filter-bar {
+  background-color: #f4f4f4;
+  position: absolute;
+  top: 16px;
+  right: 220px;
+  z-index: 100;
+}
+
+#filteredViewButtonDiv {
+  padding: 16px 16px 4px 16px;
+}
+
+#graph-navigation-bar {
+  background-color: #f4f4f4;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+}
+
+#graph-navigation-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.z-index-1 {
+  z-index: 1;
+}
+
+#diagram-panel {
+  --calcite-panel-space: 0px;
+}
+
+#diagram-shell-panel {
+  --calcite-color-background: var(--calcite-color-foreground-1);
+  padding: 16px;
+}
+`;
 /** @license
  *
  * Copyright 2018 Esri
@@ -43,348 +83,481 @@ const $ = E`/** @license
  *
  * email: contracts@esri.com
  */
-const P = 15, O = 15, H = 10, p = new d.Size(220, 48), V = 1, _ = 8, k = new d.Size(48, 48), G = new d.Size(16, 16), I = new d.Size(153, 17), R = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = '700 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', M = "#f4f4f4", K = "#cacaca", W = "#ffffff", S = "#4a4a4a", N = "#6a6a6a", j = "#ffffff", u = 1, x = 0.3, f = 1, L = 0.2, Y = 1;
-function Z(a) {
-  const t = document.createElement("div");
-  t.style.width = "100%", t.style.height = "100%", a.appendChild(t);
-  const e = new d.Diagram(
-    t,
+const cColumnSpacing = 15;
+const cLayerSpacing = 15;
+const cDiagramPadding = 10;
+const cNodeSize = new go.Size(220, 48);
+const cNodeBorderStrokeWidth = 1;
+const cNodeCornerRadius$1 = 8;
+const cNodeIconPanelSize = new go.Size(48, 48);
+const cNodeIconSize = new go.Size(16, 16);
+const cNodeTextLineSize = new go.Size(153, 17);
+const cNodeTextFormat = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif';
+const cNodeTextFormatBold = '700 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif';
+const cDiagramBackgroundColor = "#f4f4f4";
+const cNodeBorderColor = "#cacaca";
+const cNodeBackgroundColor = "#ffffff";
+const cNodeTextColor = "#4a4a4a";
+const cLinkColor = "#6a6a6a";
+const cTooltipBackgroundColor = "#ffffff";
+const cNormalNodeOpacity = 1;
+const cDimmedNodeOpacity = 0.3;
+const cNormalLinkOpacity = 1;
+const cDimmedLinkOpacity = 0.2;
+const cHighlightedLinkOpacity = 1;
+function defineDiagram(graphicContainer) {
+  const diagramDiv = document.createElement("div");
+  diagramDiv.style.width = "100%";
+  diagramDiv.style.height = "100%";
+  graphicContainer.appendChild(diagramDiv);
+  const diagram = new go.Diagram(
+    diagramDiv,
     // create a Diagram for the HTML Div element
     {
-      click: ie,
+      click: dispatchDiagramClickEvent,
       // handle diagram clicks
-      contentAlignment: d.Spot.Center,
+      contentAlignment: go.Spot.Center,
       // align document to the center of the viewport
       dragSelectingTool: null,
       // disable drag selection
       hoverDelay: 50,
       // milliseconds before mouse-hover displays information
-      initialAutoScale: d.AutoScale.Uniform,
+      initialAutoScale: go.AutoScale.Uniform,
       // automatic zoom-to-fit
-      layout: new d.LayeredDigraphLayout({
-        columnSpacing: P,
-        layerSpacing: O
+      layout: new go.LayeredDigraphLayout({
+        columnSpacing: cColumnSpacing,
+        layerSpacing: cLayerSpacing
       }),
-      padding: H,
-      scrollMode: d.ScrollMode.Infinite,
+      padding: cDiagramPadding,
+      scrollMode: go.ScrollMode.Infinite,
       // allow infinite scrolling--beyond document bounds
       "toolManager.hoverDelay": 50,
       // 50 milliseconds before tooltip appears
-      "toolManager.mouseWheelBehavior": d.WheelMode.Zoom
+      "toolManager.mouseWheelBehavior": go.WheelMode.Zoom
       // mouse wheel zooms instead of scrolls vertically
     }
   );
-  e.nodeTemplate = new d.Node("Auto", {
-    click: ne,
-    movable: !1,
-    opacity: u,
-    toolTip: new d.Adornment("Auto", {
-      isShadowed: !0,
-      margin: new d.Margin(12, 16, 6, 16),
+  diagram.nodeTemplate = new go.Node("Auto", {
+    click: dispatchNodeClickEvent,
+    movable: false,
+    opacity: cNormalNodeOpacity,
+    toolTip: new go.Adornment("Auto", {
+      isShadowed: true,
+      margin: new go.Margin(12, 16, 6, 16),
       // top, right, bottom, left
       padding: 0,
       shadowBlur: 16,
       shadowColor: "rgba(0, 0, 0, 0.16)",
-      shadowOffset: new d.Point(0, 0)
-    }).add(new d.Panel("Vertical", { background: j, margin: 0 }).add(new d.TextBlock({ margin: 14 }).bind("text", "title")))
+      shadowOffset: new go.Point(0, 0)
+    }).add(new go.Panel("Vertical", { background: cTooltipBackgroundColor, margin: 0 }).add(new go.TextBlock({ margin: 14 }).bind("text", "title")))
   }).bind("text", "title").add(
-    new d.Shape({
-      desiredSize: p,
-      fill: W,
-      geometryString: te(
-        p.width,
-        p.height,
-        _,
-        k.width,
-        !0
+    new go.Shape({
+      desiredSize: cNodeSize,
+      fill: cNodeBackgroundColor,
+      geometryString: createRoundedRectangleGeometryPath(
+        cNodeSize.width,
+        cNodeSize.height,
+        cNodeCornerRadius$1,
+        cNodeIconPanelSize.width,
+        true
       ),
-      height: p.height,
+      height: cNodeSize.height,
       portId: "",
-      stroke: K,
-      strokeWidth: V,
-      width: p.width
+      stroke: cNodeBorderColor,
+      strokeWidth: cNodeBorderStrokeWidth,
+      width: cNodeSize.width
     })
   ).add(
     // Node content
-    new d.Panel("Horizontal", {
-      alignment: d.Spot.Left,
-      stretch: d.Stretch.Horizontal
+    new go.Panel("Horizontal", {
+      alignment: go.Spot.Left,
+      stretch: go.Stretch.Horizontal
     }).add(
       // Icon panel
-      new d.Panel("Horizontal", {
-        alignment: d.Spot.Left,
-        desiredSize: k,
+      new go.Panel("Horizontal", {
+        alignment: go.Spot.Left,
+        desiredSize: cNodeIconPanelSize,
         margin: 1
       }).add(
-        new d.Panel("Horizontal", {
-          alignment: d.Spot.Center,
+        new go.Panel("Horizontal", {
+          alignment: go.Spot.Center,
           margin: 16
         }).add(
-          new d.Picture({
-            desiredSize: G
-          }).bind("source", "", (n) => z(n.itemType, n.itemTypeKeywords))
+          new go.Picture({
+            desiredSize: cNodeIconSize
+          }).bind("source", "", (node) => getIconUrl(node.itemType, node.itemTypeKeywords))
         )
       ),
       // Label
-      new d.Panel("Horizontal", {
-        alignment: d.Spot.Right,
-        margin: new d.Margin(4, 8, 0, 8)
+      new go.Panel("Horizontal", {
+        alignment: go.Spot.Right,
+        margin: new go.Margin(4, 8, 0, 8)
         // top, right, bottom, left
       }).add(
-        new d.Panel("Vertical", {}).add(
+        new go.Panel("Vertical", {}).add(
           // First line
-          new d.TextBlock({
-            alignment: d.Spot.Left,
-            desiredSize: I,
-            font: F,
-            overflow: d.TextOverflow.Ellipsis,
-            stroke: S,
-            wrap: d.Wrap.None
+          new go.TextBlock({
+            alignment: go.Spot.Left,
+            desiredSize: cNodeTextLineSize,
+            font: cNodeTextFormatBold,
+            overflow: go.TextOverflow.Ellipsis,
+            stroke: cNodeTextColor,
+            wrap: go.Wrap.None
           }).bind("text", "title"),
           // Second line
-          new d.TextBlock({
-            alignment: d.Spot.Left,
-            desiredSize: I,
-            font: R,
-            overflow: d.TextOverflow.Ellipsis,
-            stroke: S,
-            wrap: d.Wrap.None
+          new go.TextBlock({
+            alignment: go.Spot.Left,
+            desiredSize: cNodeTextLineSize,
+            font: cNodeTextFormat,
+            overflow: go.TextOverflow.Ellipsis,
+            stroke: cNodeTextColor,
+            wrap: go.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(M);
-  const r = e.toolManager.clickSelectingTool;
-  r.standardMouseSelect = function() {
+  );
+  diagram.commandHandler.zoomFactor = 1.05;
+  diagram.setDivBackground(cDiagramBackgroundColor);
+  const selectingTool = diagram.toolManager.clickSelectingTool;
+  selectingTool.standardMouseSelect = function() {
   };
-  const s = e.toolManager.draggingTool;
-  return s.isEnabled = !1, e.linkTemplate = new d.Link({
+  const draggingTool = diagram.toolManager.draggingTool;
+  draggingTool.isEnabled = false;
+  diagram.linkTemplate = new go.Link({
     corner: 5,
-    movable: !1,
-    routing: d.Routing.Orthogonal,
-    selectable: !1
+    movable: false,
+    routing: go.Routing.Orthogonal,
+    selectable: false
   }).add(
-    new d.Shape({
+    new go.Shape({
       // the link path shape
-      opacity: f,
-      stroke: N
+      opacity: cNormalLinkOpacity,
+      stroke: cLinkColor
     }),
-    new d.Shape({
+    new go.Shape({
       // the 'to' arrowhead
-      fill: N,
-      opacity: f,
+      fill: cLinkColor,
+      opacity: cNormalLinkOpacity,
       stroke: null,
       toArrow: "Standard"
     })
-  ), e;
+  );
+  return diagram;
 }
-function m(a, t) {
-  a.model = new d.GraphLinksModel(t.nodes, t.links, {
+function drawDiagram(diagram, nodesAndLinks) {
+  diagram.model = new go.GraphLinksModel(nodesAndLinks.nodes, nodesAndLinks.links, {
     linkFromPortIdProperty: "fromPort",
     linkToPortIdProperty: "toPort"
   });
 }
-function U(a, t, e, r = !0) {
-  if (r) {
-    const c = oe(a, e);
-    c.addEventListener(
+function drawAndConnectControlBars(graphicContainer, diagram, translations, includeFilteredViewButton = true) {
+  if (includeFilteredViewButton) {
+    const filterViewButton = drawfilteredViewBar(graphicContainer, translations);
+    filterViewButton.addEventListener(
       "calciteSwitchChange",
-      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: c.checked }))
+      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: filterViewButton.checked }))
     );
   }
-  const { resetButton: s, centerButton: n, zoomInButton: i, zoomOutButton: o } = ae(a, e);
-  s.addEventListener("click", () => de(t)), n.addEventListener("click", () => t.zoomToFit()), i.addEventListener("click", () => t.commandHandler.increaseZoom()), o.addEventListener("click", () => t.commandHandler.decreaseZoom());
+  const { resetButton, centerButton, zoomInButton, zoomOutButton } = drawNavigationBar(graphicContainer, translations);
+  resetButton.addEventListener("click", () => reset(diagram));
+  centerButton.addEventListener("click", () => diagram.zoomToFit());
+  zoomInButton.addEventListener("click", () => diagram.commandHandler.increaseZoom());
+  zoomOutButton.addEventListener("click", () => diagram.commandHandler.decreaseZoom());
 }
-function q(a, t, e) {
-  se();
-  const r = Z(a);
-  return m(r, t), U(a, r, e), r;
+function drawSolutionGraph(graphicContainer, nodesAndLinks, translations) {
+  setStyles();
+  const diagram = defineDiagram(graphicContainer);
+  drawDiagram(diagram, nodesAndLinks);
+  drawAndConnectControlBars(graphicContainer, diagram, translations);
+  return diagram;
 }
-function T(a) {
-  const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
-  function r(n) {
-    n.findLinksInto().each(
-      (i) => {
-        e.add(i);
-        const o = i.fromNode;
-        o && !t.has(o) && (t.add(o), r(o));
+function getConnectedNodesAndLinks(diagramNode) {
+  const connectedNodes = /* @__PURE__ */ new Set();
+  const connectedLinks = /* @__PURE__ */ new Set();
+  function traceFromLinks(node) {
+    node.findLinksInto().each(
+      (link) => {
+        connectedLinks.add(link);
+        const fromNode = link.fromNode;
+        if (fromNode && !connectedNodes.has(fromNode)) {
+          connectedNodes.add(fromNode);
+          traceFromLinks(fromNode);
+        }
       }
     );
   }
-  r(a);
-  function s(n) {
-    n.findLinksOutOf().each(
-      (i) => {
-        e.add(i);
-        const o = i.toNode;
-        o && !t.has(o) && (t.add(o), s(o));
+  traceFromLinks(diagramNode);
+  function traceToLinks(node) {
+    node.findLinksOutOf().each(
+      (link) => {
+        connectedLinks.add(link);
+        const toNode = link.toNode;
+        if (toNode && !connectedNodes.has(toNode)) {
+          connectedNodes.add(toNode);
+          traceToLinks(toNode);
+        }
       }
     );
   }
-  return s(a), { connectedNodes: t, connectedLinks: e };
+  traceToLinks(diagramNode);
+  return { connectedNodes, connectedLinks };
 }
-function J(a, t = !1, e) {
-  const r = [], s = a.map((i) => {
-    if (i.type !== "Group") {
-      const o = ee(i);
-      return X(i, o, t, e);
+function getNodesAndLinks(collection, canClickToOpen = false, clickToOpenBaseUrl) {
+  const groupPseudoNodes = [];
+  const nodes = collection.map((template) => {
+    if (template.type !== "Group") {
+      const templateTag = createGraphTag(template);
+      return createGraphNode(template, templateTag, canClickToOpen, clickToOpenBaseUrl);
     } else {
-      r.push(i.id);
-      return;
+      groupPseudoNodes.push(template.id);
+      return void 0;
     }
-  }).filter((i) => i !== void 0), n = [];
-  return s.forEach((i) => {
-    (a.find((c) => c.id === i.itemId)?.dependencies || []).forEach((c) => {
-      const h = s.find((l) => l?.itemId === c);
-      h && n.push({
-        from: h.key,
-        fromSpot: d.Spot.AllSides,
-        to: i.key,
-        toSpot: d.Spot.AllSides
-      });
+  }).filter((node) => node !== void 0);
+  const links = [];
+  nodes.forEach((node) => {
+    const template = collection.find((entry) => entry.id === node.itemId);
+    (template?.dependencies || []).forEach((dependencyId) => {
+      const dependency = nodes.find((entry) => entry?.itemId === dependencyId);
+      if (dependency) {
+        links.push({
+          from: dependency.key,
+          fromSpot: go.Spot.AllSides,
+          to: node.key,
+          toSpot: go.Spot.AllSides
+        });
+      }
     });
-  }), { nodes: s, links: n, groupPseudoNodes: r };
+  });
+  return { nodes, links, groupPseudoNodes };
 }
-function Q(a, t, e, r = !0) {
-  const s = a.diagram;
-  if (!s)
+function highlightNode(focusNode, focus, highlightBorder, dimUnrelatedNodes = true) {
+  const myDiagram = focusNode.diagram;
+  if (!myDiagram) {
     return;
-  const n = {};
-  if (r) {
-    for (const i of s.nodes)
-      n[i.key] = i === a ? u : x;
-    for (const i of s.links) {
-      const o = `${i.fromNode?.key}-${i.toNode?.key}`;
-      n[o] = L;
+  }
+  const animationSet = {};
+  if (dimUnrelatedNodes) {
+    for (const node of myDiagram.nodes) {
+      animationSet[node.key] = node === focusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;
+    }
+    for (const link of myDiagram.links) {
+      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
+      animationSet[key] = cDimmedLinkOpacity;
     }
     {
-      const { connectedNodes: i, connectedLinks: o } = T(a);
-      for (const c of i)
-        n[c.key] = u;
-      for (const c of o) {
-        const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-        n[h] = Y;
+      const { connectedNodes, connectedLinks } = getConnectedNodesAndLinks(focusNode);
+      for (const node of connectedNodes) {
+        animationSet[node.key] = cNormalNodeOpacity;
+      }
+      for (const link of connectedLinks) {
+        const key = `${link.fromNode?.key}-${link.toNode?.key}`;
+        animationSet[key] = cHighlightedLinkOpacity;
       }
     }
   }
-  if (e && (e.adornedObject = a), r) {
-    const i = new d.Animation();
-    i.duration = 1;
-    for (const o of s.nodes)
-      i.add(o, "opacity", o.opacity, n[o.key]);
-    for (const o of s.links) {
-      const c = `${o.fromNode?.key}-${o.toNode?.key}`;
-      i.add(o, "opacity", o.opacity, n[c]);
+  if (highlightBorder) {
+    highlightBorder.adornedObject = focusNode;
+  }
+  if (dimUnrelatedNodes) {
+    const animation = new go.Animation();
+    animation.duration = 1;
+    for (const node of myDiagram.nodes) {
+      animation.add(node, "opacity", node.opacity, animationSet[node.key]);
+    }
+    for (const link of myDiagram.links) {
+      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
+      animation.add(link, "opacity", link.opacity, animationSet[key]);
     }
-    i.start();
+    animation.start();
   }
 }
-function v(a, t, e, r, s = !0) {
-  if (a.length === 0)
+function highlightNodes(nodeIds, nodes, focus, highlightBorders, dimUnrelatedNodes = true) {
+  if (nodeIds.length === 0) {
     return;
-  const n = t[0].diagram;
-  if (!n)
+  }
+  const myDiagram = nodes[0].diagram;
+  if (!myDiagram) {
     return;
-  const i = {};
-  if (s) {
-    for (const o of n.nodes) {
-      const c = a.includes(o.key);
-      i[o.key] = !e || c ? u : x;
+  }
+  const animationSet = {};
+  if (dimUnrelatedNodes) {
+    for (const node of myDiagram.nodes) {
+      const isFocusNode = nodeIds.includes(node.key);
+      animationSet[node.key] = !focus || isFocusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;
     }
-    for (const o of n.links) {
-      const c = `${o.fromNode?.key}-${o.toNode?.key}`;
-      i[c] = e ? L : f;
+    for (const link of myDiagram.links) {
+      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
+      animationSet[key] = focus ? cDimmedLinkOpacity : cNormalLinkOpacity;
     }
   }
-  if (Object.keys(r).forEach((o) => {
-    r[o].adornedObject = null;
-  }), s) {
-    const o = new d.Animation();
-    o.duration = 1;
-    for (const c of n.nodes)
-      o.add(c, "opacity", c.opacity, i[c.key]);
-    for (const c of n.links) {
-      const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-      o.add(c, "opacity", c.opacity, i[h]);
+  Object.keys(highlightBorders).forEach((key) => {
+    highlightBorders[key].adornedObject = null;
+  });
+  if (dimUnrelatedNodes) {
+    const animation = new go.Animation();
+    animation.duration = 1;
+    for (const node of myDiagram.nodes) {
+      animation.add(node, "opacity", node.opacity, animationSet[node.key]);
     }
-    o.start();
+    for (const link of myDiagram.links) {
+      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
+      animation.add(link, "opacity", link.opacity, animationSet[key]);
+    }
+    animation.start();
   }
 }
-function X(a, t, e = !1, r) {
+function createGraphNode(template, templateTag, canClickToOpen = false, clickToOpenBaseUrl) {
   return {
-    key: t,
-    title: a.title,
-    itemId: a.id,
-    itemType: a.type,
-    itemTypeForDisplay: re(a.type, a.typeKeywords),
-    itemTypeKeywords: a.typeKeywords,
-    group: a.type,
-    url: e ? `${r}?id=${a.id}` : void 0
+    key: templateTag,
+    title: template.title,
+    itemId: template.id,
+    itemType: template.type,
+    itemTypeForDisplay: getTypeForDisplay(template.type, template.typeKeywords),
+    itemTypeKeywords: template.typeKeywords,
+    group: template.type,
+    url: canClickToOpen ? `${clickToOpenBaseUrl}?id=${template.id}` : void 0
   };
 }
-function ee(a) {
-  return a.id;
+function createGraphTag(template) {
+  return template.id;
 }
-function te(a, t, e, r = 0, s = !1) {
-  let n = "";
-  s && (n += "F");
-  const i = a - 2 * e, o = t - 2 * e;
-  return n += " M0 0", n += ` h${i}`, n += ` a${e} ${e} 0 0 1 ${e} ${e}`, n += ` v${o}`, n += ` a${e} ${e} 0 0 1 ${-e} ${e}`, n += ` h${-i}`, n += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, n += ` v${-o}`, n += ` a${e} ${e} 0 0 1 ${e} ${-e}`, r > 0 && (n += ` M${r - e} 0 v${t}`), n;
+function createRoundedRectangleGeometryPath(width, height, radius, iconPanelWidth = 0, isFilled = false) {
+  let path = "";
+  if (isFilled) {
+    path += "F";
+  }
+  const horizontalStraightLineLen = width - 2 * radius;
+  const verticalStraightLineLen = height - 2 * radius;
+  path += ` M${0} ${0}`;
+  path += ` h${horizontalStraightLineLen}`;
+  path += ` a${radius} ${radius} 0 0 1 ${radius} ${radius}`;
+  path += ` v${verticalStraightLineLen}`;
+  path += ` a${radius} ${radius} 0 0 1 ${-radius} ${radius}`;
+  path += ` h${-horizontalStraightLineLen}`;
+  path += ` a${radius} ${radius} 0 0 1 ${-radius} ${-radius}`;
+  path += ` v${-verticalStraightLineLen}`;
+  path += ` a${radius} ${radius} 0 0 1 ${radius} ${-radius}`;
+  if (iconPanelWidth > 0) {
+    path += ` M${iconPanelWidth - radius} ${0} v${height}`;
+  }
+  return path;
 }
-function ie() {
+function dispatchDiagramClickEvent() {
   document.dispatchEvent(new CustomEvent("clickInDiagram"));
 }
-function ne(a, t) {
-  const e = t.part;
-  e instanceof d.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: e })));
+function dispatchNodeClickEvent(_evt, obj) {
+  const node = obj.part;
+  if (node instanceof go.Node) {
+    node.selectionAdorned = false;
+    document.dispatchEvent(new CustomEvent("clickOnNode", { detail: node }));
+  }
 }
-function oe(a, t) {
-  const e = document.createElement("calcite-switch");
-  e.id = "filteredViewButton", e.label = t.filteredView;
-  const r = document.createElement("calcite-label");
-  r.id = "filteredViewButtonLabel", r.setAttribute("layout", "inline"), r.innerHTML = t.filteredView, r.appendChild(e);
-  const s = document.createElement("div");
-  s.id = "filteredViewButtonDiv", s.appendChild(r);
-  const n = document.createElement("calcite-action-bar");
-  n.id = "filter-bar-controls", n.layout = "horizontal", n.expandDisabled = !0, n.appendChild(s);
-  const i = document.createElement("div");
-  return i.id = "filter-bar", a.appendChild(i), i.appendChild(n), e;
+function drawfilteredViewBar(graphicContainer, translations) {
+  const filteredViewButton = document.createElement("calcite-switch");
+  filteredViewButton.id = "filteredViewButton";
+  filteredViewButton.label = translations.filteredView;
+  const filteredViewButtonLabel = document.createElement("calcite-label");
+  filteredViewButtonLabel.id = "filteredViewButtonLabel";
+  filteredViewButtonLabel.setAttribute("layout", "inline");
+  filteredViewButtonLabel.innerHTML = translations.filteredView;
+  filteredViewButtonLabel.appendChild(filteredViewButton);
+  const filteredViewButtonDiv = document.createElement("div");
+  filteredViewButtonDiv.id = "filteredViewButtonDiv";
+  filteredViewButtonDiv.appendChild(filteredViewButtonLabel);
+  const actionBar = document.createElement("calcite-action-bar");
+  actionBar.id = "filter-bar-controls";
+  actionBar.layout = "horizontal";
+  actionBar.expandDisabled = true;
+  actionBar.appendChild(filteredViewButtonDiv);
+  const filterBar = document.createElement("div");
+  filterBar.id = "filter-bar";
+  graphicContainer.appendChild(filterBar);
+  filterBar.appendChild(actionBar);
+  return filteredViewButton;
 }
-function ae(a, t) {
-  const e = document.createElement("calcite-action");
-  e.appearance = "solid", e.icon = "reset", e.id = "showHideGrayedOutButton";
-  const r = document.createElement("calcite-tooltip");
-  r.id = "resetButtonTooltip", r.innerHTML = t.reset, r.overlayPositioning = "fixed", r.placement = "bottom", r.referenceElement = e.id;
-  const s = document.createElement("calcite-action");
-  s.appearance = "solid", s.icon = "zoom-to-object", s.id = "centerButton";
-  const n = document.createElement("calcite-tooltip");
-  n.id = "centerButtonTooltip", n.innerHTML = t.centerDiagram, n.overlayPositioning = "fixed", n.placement = "bottom", n.referenceElement = s.id;
-  const i = document.createElement("calcite-action");
-  i.appearance = "solid", i.icon = "plus", i.id = "zoomInButton";
-  const o = document.createElement("calcite-tooltip");
-  o.id = "zoomInButtonTooltip", o.innerHTML = t.zoomIn, o.overlayPositioning = "fixed", o.placement = "bottom", o.referenceElement = i.id;
-  const c = document.createElement("calcite-action");
-  c.appearance = "solid", c.icon = "minus", c.id = "zoomOutButton";
-  const h = document.createElement("calcite-tooltip");
-  h.id = "zoomOutButtonTooltip", h.innerHTML = t.zoomOut, h.overlayPositioning = "fixed", h.placement = "bottom", h.referenceElement = c.id;
-  const l = document.createElement("calcite-action-bar");
-  l.id = "graph-navigation-controls", l.layout = "horizontal", l.expandDisabled = !0, l.appendChild(e), l.appendChild(r), l.appendChild(s), l.appendChild(n), l.appendChild(i), l.appendChild(o), l.appendChild(c), l.appendChild(h);
-  const g = document.createElement("div");
-  return g.id = "graph-navigation-bar", a.appendChild(g), g.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: i, zoomOutButton: c };
+function drawNavigationBar(graphicContainer, translations) {
+  const resetButton = document.createElement("calcite-action");
+  resetButton.appearance = "solid";
+  resetButton.icon = "reset";
+  resetButton.id = "showHideGrayedOutButton";
+  const resetButtonTooltip = document.createElement("calcite-tooltip");
+  resetButtonTooltip.id = "resetButtonTooltip";
+  resetButtonTooltip.innerHTML = translations.reset;
+  resetButtonTooltip.overlayPositioning = "fixed";
+  resetButtonTooltip.placement = "bottom";
+  resetButtonTooltip.referenceElement = resetButton.id;
+  const centerButton = document.createElement("calcite-action");
+  centerButton.appearance = "solid";
+  centerButton.icon = "zoom-to-object";
+  centerButton.id = "centerButton";
+  const centerButtonTooltip = document.createElement("calcite-tooltip");
+  centerButtonTooltip.id = "centerButtonTooltip";
+  centerButtonTooltip.innerHTML = translations.centerDiagram;
+  centerButtonTooltip.overlayPositioning = "fixed";
+  centerButtonTooltip.placement = "bottom";
+  centerButtonTooltip.referenceElement = centerButton.id;
+  const zoomInButton = document.createElement("calcite-action");
+  zoomInButton.appearance = "solid";
+  zoomInButton.icon = "plus";
+  zoomInButton.id = "zoomInButton";
+  const zoomInButtonTooltip = document.createElement("calcite-tooltip");
+  zoomInButtonTooltip.id = "zoomInButtonTooltip";
+  zoomInButtonTooltip.innerHTML = translations.zoomIn;
+  zoomInButtonTooltip.overlayPositioning = "fixed";
+  zoomInButtonTooltip.placement = "bottom";
+  zoomInButtonTooltip.referenceElement = zoomInButton.id;
+  const zoomOutButton = document.createElement("calcite-action");
+  zoomOutButton.appearance = "solid";
+  zoomOutButton.icon = "minus";
+  zoomOutButton.id = "zoomOutButton";
+  const zoomOutButtonTooltip = document.createElement("calcite-tooltip");
+  zoomOutButtonTooltip.id = "zoomOutButtonTooltip";
+  zoomOutButtonTooltip.innerHTML = translations.zoomOut;
+  zoomOutButtonTooltip.overlayPositioning = "fixed";
+  zoomOutButtonTooltip.placement = "bottom";
+  zoomOutButtonTooltip.referenceElement = zoomOutButton.id;
+  const actionBar = document.createElement("calcite-action-bar");
+  actionBar.id = "graph-navigation-controls";
+  actionBar.layout = "horizontal";
+  actionBar.expandDisabled = true;
+  actionBar.appendChild(resetButton);
+  actionBar.appendChild(resetButtonTooltip);
+  actionBar.appendChild(centerButton);
+  actionBar.appendChild(centerButtonTooltip);
+  actionBar.appendChild(zoomInButton);
+  actionBar.appendChild(zoomInButtonTooltip);
+  actionBar.appendChild(zoomOutButton);
+  actionBar.appendChild(zoomOutButtonTooltip);
+  const graphNavigationBar = document.createElement("div");
+  graphNavigationBar.id = "graph-navigation-bar";
+  graphicContainer.appendChild(graphNavigationBar);
+  graphNavigationBar.appendChild(actionBar);
+  return { resetButton, centerButton, zoomInButton, zoomOutButton };
 }
-function re(a, t) {
-  let e = a;
-  if (a === "Feature Service") {
-    const r = t.indexOf("View Service") > -1, s = t.indexOf("Table") > -1;
-    e = r && s ? "Table (hosted, view)" : s ? "Table (hosted)" : r ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+function getTypeForDisplay(type, typeKeywords) {
+  let _type = type;
+  if (type === "Feature Service") {
+    const isView = typeKeywords.indexOf("View Service") > -1;
+    const isTable = typeKeywords.indexOf("Table") > -1;
+    _type = isView && isTable ? "Table (hosted, view)" : isTable ? "Table (hosted)" : isView ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
   }
-  return a === "Web Mapping Application" && (e = t.indexOf("configurableApp") > -1 ? "Instant App" : e), e = a === "Geoprocessing Service" ? "Tool" : e, e = a === "Feed" ? "Feed (hosted)" : e, e = a === "Real Time Analytic" ? "Real Time Analytic (hosted)" : e, e = a === "Big Data Analytic" ? "Big Data Analytic (hosted)" : e, e = a === "Vector Tile Service" ? "Tile Layer" : e, e;
+  if (type === "Web Mapping Application") {
+    _type = typeKeywords.indexOf("configurableApp") > -1 ? "Instant App" : _type;
+  }
+  _type = type === "Geoprocessing Service" ? "Tool" : _type;
+  _type = type === "Feed" ? "Feed (hosted)" : _type;
+  _type = type === "Real Time Analytic" ? "Real Time Analytic (hosted)" : _type;
+  _type = type === "Big Data Analytic" ? "Big Data Analytic (hosted)" : _type;
+  _type = type === "Vector Tile Service" ? "Tile Layer" : _type;
+  return _type;
 }
-function de(a) {
-  a.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
+function reset(diagram) {
+  diagram.zoomToFit();
+  document.dispatchEvent(new CustomEvent("reset"));
 }
-function se() {
-  A`
+function setStyles() {
+  injectGlobal`
     #filter-bar {
       background-color: #f4f4f4;
       position: absolute;
@@ -427,8 +600,11 @@ function se() {
  *
  * email: contracts@esri.com
  */
-const ce = 8, le = 15, he = "#1e90ff", me = 4;
-class pe {
+const cNodeCornerRadius = 8;
+const cNodeCornerRadiusCornerSelectionBitmap = 1 | 2 | 4 | 8;
+const cNodeHighlightColor = "#1e90ff";
+const cNodeHighlightStrokeWidth = 4;
+class SolutionDisplay {
   /**
    * Creates a new instance of the SolutionDisplay class.
    * @param indexPanel The Calcite panel element to use as the index panel.
@@ -441,22 +617,46 @@ class pe {
    *     <calcite-panel id='diagramPanel' style='display:flex;'/>
    *   </calcite-shell>
    */
-  constructor(t, e, r, s) {
-    this.indexPanel = t, this.diagramPanel = e, this.diagramTranslations = r, this.diagramKey = s, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = !1, this.usefilteredView = !1, this.handle_clickInDiagram = (n) => {
-      n.stopImmediatePropagation(), (this.currentSelectedGroupId || this.currentSelectedItemId) && (this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = this.usefilteredView, this.redraw());
-    }, this.handle_clickOnNode = (n) => {
-      n.stopImmediatePropagation();
-      const i = n.detail.data.key;
-      this.redraw(i, i === this.currentSelectedItemId);
-    }, this.handle_filteredViewChanged = (n) => {
-      this.usefilteredView = n.detail, this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId, this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
-    }, this.handle_reset = (n) => {
-      n.stopImmediatePropagation(), this.reset();
-    }, this.handle_solutionItemSelect = (n) => {
-      n.stopImmediatePropagation();
-      const i = n.detail.itemId;
-      this.redraw(i, i === this.currentSelectedItemId || i === this.currentSelectedGroupId, !1);
-    }, d.Diagram.licenseKey === "" && (d.Diagram.licenseKey = s ?? "");
+  constructor(indexPanel, diagramPanel, diagramTranslations, diagramKey) {
+    this.indexPanel = indexPanel;
+    this.diagramPanel = diagramPanel;
+    this.diagramTranslations = diagramTranslations;
+    this.diagramKey = diagramKey;
+    this.currentSelectedGroupId = "";
+    this.currentSelectedItemId = "";
+    this.diagramNeedsRedraw = false;
+    this.usefilteredView = false;
+    this.handle_clickInDiagram = (evt) => {
+      evt.stopImmediatePropagation();
+      if (this.currentSelectedGroupId || this.currentSelectedItemId) {
+        this.currentSelectedGroupId = "";
+        this.currentSelectedItemId = "";
+        this.diagramNeedsRedraw = this.usefilteredView;
+        this.redraw();
+      }
+    };
+    this.handle_clickOnNode = (evt) => {
+      evt.stopImmediatePropagation();
+      const id = evt.detail.data.key;
+      this.redraw(id, id === this.currentSelectedItemId);
+    };
+    this.handle_filteredViewChanged = (evt) => {
+      this.usefilteredView = evt.detail;
+      this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId;
+      this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
+    };
+    this.handle_reset = (evt) => {
+      evt.stopImmediatePropagation();
+      this.reset();
+    };
+    this.handle_solutionItemSelect = (evt) => {
+      evt.stopImmediatePropagation();
+      const id = evt.detail.itemId;
+      this.redraw(id, id === this.currentSelectedItemId || id === this.currentSelectedGroupId, false);
+    };
+    if (go.Diagram.licenseKey === "") {
+      go.Diagram.licenseKey = diagramKey ?? "";
+    }
   }
   /**
    * Creates the index and diagram for the given collection of template info.
@@ -464,53 +664,85 @@ class pe {
    * @param typeKeywords The collection type keywords for the solution.
    * @returns A promise that resolves when the index and diagram have been created.
    */
-  create(t, e) {
-    this.collection = t, this.index = document.createElement("solution-item-accordion"), this.index.linkType = "action", this.index.listSelectionMode = "single", this.index.typeKeywords = e, this.index.style.overflowY = "auto", this.indexPanel.appendChild(this.index), this.index.templateInfos = t, this.allNodesAndLinks = J(t), this.diagram = q(
+  create(collection, typeKeywords) {
+    this.collection = collection;
+    this.index = document.createElement("solution-item-accordion");
+    this.index.linkType = "action";
+    this.index.listSelectionMode = "single";
+    this.index.typeKeywords = typeKeywords;
+    this.index.style.overflowY = "auto";
+    this.indexPanel.appendChild(this.index);
+    this.index.templateInfos = collection;
+    this.allNodesAndLinks = getNodesAndLinks(collection);
+    this.diagram = drawSolutionGraph(
       this.diagramPanel,
       this.allNodesAndLinks,
       this.diagramTranslations
-    ), this.diagram.addDiagramListener("LayoutCompleted", () => {
+    );
+    this.diagram.addDiagramListener("LayoutCompleted", () => {
       setTimeout(() => {
         this.diagram.zoomToFit();
       }, 1e3);
-    }), d.Link.setRoutingParameter(44, 600942), this.createNodeHighlighters(), document.addEventListener("clickInDiagram", this.handle_clickInDiagram), document.addEventListener("clickOnNode", this.handle_clickOnNode), document.addEventListener("filteredViewChanged", this.handle_filteredViewChanged), document.addEventListener("reset", this.handle_reset), this.index.addEventListener("solutionItemSelect", this.handle_solutionItemSelect);
+    });
+    go.Link.setRoutingParameter(44, 600942);
+    this.createNodeHighlighters();
+    document.addEventListener("clickInDiagram", this.handle_clickInDiagram);
+    document.addEventListener("clickOnNode", this.handle_clickOnNode);
+    document.addEventListener("filteredViewChanged", this.handle_filteredViewChanged);
+    document.addEventListener("reset", this.handle_reset);
+    this.index.addEventListener("solutionItemSelect", this.handle_solutionItemSelect);
   }
   /**
    * Destroys the index and diagram; removes all event listeners.
    */
   dispose() {
-    document.removeEventListener("clickInDiagram", this.handle_clickInDiagram), document.removeEventListener("clickOnNode", this.handle_clickOnNode), document.removeEventListener("filteredViewChanged", this.handle_filteredViewChanged), document.removeEventListener("reset", this.handle_reset), this.index.removeEventListener("solutionItemSelect", this.handle_solutionItemSelect), this.indexPanel.innerHTML = "", this.diagramPanel.innerHTML = "";
+    document.removeEventListener("clickInDiagram", this.handle_clickInDiagram);
+    document.removeEventListener("clickOnNode", this.handle_clickOnNode);
+    document.removeEventListener("filteredViewChanged", this.handle_filteredViewChanged);
+    document.removeEventListener("reset", this.handle_reset);
+    this.index.removeEventListener("solutionItemSelect", this.handle_solutionItemSelect);
+    this.indexPanel.innerHTML = "";
+    this.diagramPanel.innerHTML = "";
   }
   // ---------------------------------------------------------------------------------------------------------------- //
   /**
    * Clears all selections in the index and diagram.
    * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
    */
-  clearSelections(t = !0) {
-    this.index.deselectAll(), t && this.index.collapseAll();
-    const e = this.getNodesFromDiagram(this.diagram), r = e.map((s) => s.data.key);
-    v(r, e, !1, this.diagramNodeHighlighterIndex);
+  clearSelections(alsoCollapseAllAccordionItems = true) {
+    void this.index.deselectAll();
+    if (alsoCollapseAllAccordionItems) {
+      void this.index.collapseAll();
+    }
+    const nodes = this.getNodesFromDiagram(this.diagram);
+    const nodeIds = nodes.map((node) => node.data.key);
+    highlightNodes(nodeIds, nodes, false, this.diagramNodeHighlighterIndex);
   }
   /**
    * Creates indicies into the diagram's nodes and node highlighters.
    * Rebuilds this.diagramNodeIndex and this.diagramNodeHighlighterIndex.
    */
   createNodeHighlighters() {
-    this.diagramNodeIndex = {}, this.diagramNodeHighlighterIndex = {}, this.getNodesFromDiagram(this.diagram).forEach((e) => {
-      this.diagramNodeIndex[e.data.key] = e;
-      const r = new d.Adornment("Auto", {
+    this.diagramNodeIndex = {};
+    this.diagramNodeHighlighterIndex = {};
+    const nodes = this.getNodesFromDiagram(this.diagram);
+    nodes.forEach((node) => {
+      this.diagramNodeIndex[node.data.key] = node;
+      const nodeHighlighter = new go.Adornment("Auto", {
         background: "transparent",
         margin: 2
       });
-      r.add(new d.Shape("RoundedRectangle", {
+      nodeHighlighter.add(new go.Shape("RoundedRectangle", {
         fill: "transparent",
-        parameter1: ce,
-        parameter2: le,
-        stroke: he,
-        strokeWidth: me
-      })), r.add(new d.Placeholder({
+        parameter1: cNodeCornerRadius,
+        parameter2: cNodeCornerRadiusCornerSelectionBitmap,
+        stroke: cNodeHighlightColor,
+        strokeWidth: cNodeHighlightStrokeWidth
+      }));
+      nodeHighlighter.add(new go.Placeholder({
         margin: 1
-      })), this.diagramNodeHighlighterIndex[e.data.key] = r;
+      }));
+      this.diagramNodeHighlighterIndex[node.data.key] = nodeHighlighter;
     });
   }
   /**
@@ -519,19 +751,21 @@ class pe {
    * @param id Id of node to find
    * @returns Node matching the given id, or undefined if not found
    */
-  getNodeById(t) {
-    return this.diagramNodeIndex[t];
+  getNodeById(id) {
+    return this.diagramNodeIndex[id];
   }
   /**
    * Retrieves all nodes from the diagram.
    * @param diagram The diagram to search
    * @returns Array of nodes in the diagram
    */
-  getNodesFromDiagram(t) {
-    const e = [], r = t.nodes.iterator;
-    for (; r.next(); )
-      e.push(r.value);
-    return e;
+  getNodesFromDiagram(diagram) {
+    const nodes = [];
+    const nodeIterator = diagram.nodes.iterator;
+    while (nodeIterator.next()) {
+      nodes.push(nodeIterator.value);
+    }
+    return nodes;
   }
   /**
    * Selects an item to highlight or unhighlight.
@@ -539,78 +773,138 @@ class pe {
    * @param toggleSelection Whether to toggle the selection state of the item
    * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
    */
-  redraw(t = "", e = !1, r = !0) {
-    const s = this.allNodesAndLinks.groupPseudoNodes.includes(t);
-    this.diagramNeedsRedraw && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.diagramNeedsRedraw = !1);
-    let n = !1;
-    if (this.clearSelections(r), !!t) {
-      if (s) {
-        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, n = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
-          this.usefilteredView && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters());
-          const i = this.collection.filter((c) => c.id === t)[0], o = i.dependencies.map((c) => this.diagramNodeIndex[c]);
-          if (this.usefilteredView) {
-            const c = o.map((h) => h.data);
-            m(this.diagram, { nodes: c, links: [] });
-          } else
-            v(i.dependencies, o, !0, this.diagramNodeHighlighterIndex);
-          this.index.selectItem(this.currentSelectedGroupId);
+  redraw(id = "", toggleSelection = false, alsoCollapseAllAccordionItems = true) {
+    const areDrawingAGroup = this.allNodesAndLinks.groupPseudoNodes.includes(id);
+    if (this.diagramNeedsRedraw) {
+      drawDiagram(this.diagram, this.allNodesAndLinks);
+      this.createNodeHighlighters();
+      this.diagramNeedsRedraw = false;
+    }
+    let needsReset = false;
+    this.clearSelections(alsoCollapseAllAccordionItems);
+    if (!id) {
+      return;
+    }
+    if (areDrawingAGroup) {
+      this.currentSelectedItemId = "";
+      if (this.currentSelectedGroupId !== id) {
+        this.currentSelectedGroupId = id;
+      } else if (toggleSelection) {
+        this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : id;
+        needsReset = this.usefilteredView && !this.currentSelectedGroupId;
+      }
+      if (this.currentSelectedGroupId) {
+        if (this.usefilteredView) {
+          drawDiagram(this.diagram, this.allNodesAndLinks);
+          this.createNodeHighlighters();
+        }
+        const group = this.collection.filter((item) => item.id === id)[0];
+        const groupNodes = group.dependencies.map((dependency) => this.diagramNodeIndex[dependency]);
+        if (this.usefilteredView) {
+          const nodes = groupNodes.map((node) => node.data);
+          drawDiagram(this.diagram, { nodes, links: [] });
+        } else {
+          highlightNodes(group.dependencies, groupNodes, true, this.diagramNodeHighlighterIndex);
         }
-      } else {
-        this.currentSelectedGroupId = "", this.currentSelectedItemId !== t ? this.currentSelectedItemId = t : e && (this.currentSelectedItemId = this.currentSelectedItemId ? "" : t, n = this.usefilteredView && !this.currentSelectedItemId);
-        let i = this.getNodeById(t);
-        if ((!i || this.usefilteredView) && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), i = this.getNodeById(t), !i))
+        void this.index.selectItem(this.currentSelectedGroupId);
+      }
+    } else {
+      this.currentSelectedGroupId = "";
+      if (this.currentSelectedItemId !== id) {
+        this.currentSelectedItemId = id;
+      } else if (toggleSelection) {
+        this.currentSelectedItemId = this.currentSelectedItemId ? "" : id;
+        needsReset = this.usefilteredView && !this.currentSelectedItemId;
+      }
+      let focusNode = this.getNodeById(id);
+      if (!focusNode || this.usefilteredView) {
+        drawDiagram(this.diagram, this.allNodesAndLinks);
+        this.createNodeHighlighters();
+        focusNode = this.getNodeById(id);
+        if (!focusNode) {
           return;
-        if (this.currentSelectedItemId) {
-          if (this.usefilteredView) {
-            const o = T(i);
-            o.connectedNodes.add(i);
-            const c = Array.from(o.connectedNodes).map((l) => l.data), h = Array.from(o.connectedLinks).map((l) => l.data);
-            if (m(this.diagram, { nodes: c, links: h }), this.createNodeHighlighters(), i = this.getNodeById(t), !i)
-              return;
+        }
+      }
+      if (this.currentSelectedItemId) {
+        if (this.usefilteredView) {
+          const connectedNodesAndLinks = getConnectedNodesAndLinks(focusNode);
+          connectedNodesAndLinks.connectedNodes.add(focusNode);
+          const nodes = Array.from(connectedNodesAndLinks.connectedNodes).map((node) => node.data);
+          const links = Array.from(connectedNodesAndLinks.connectedLinks).map((link) => link.data);
+          drawDiagram(this.diagram, { nodes, links });
+          this.createNodeHighlighters();
+          focusNode = this.getNodeById(id);
+          if (!focusNode) {
+            return;
           }
-          i && setTimeout(() => Q(i, !0, this.diagramNodeHighlighterIndex[t]), 1), this.index.selectItem(this.currentSelectedItemId);
         }
+        if (focusNode) {
+          setTimeout(() => highlightNode(focusNode, true, this.diagramNodeHighlighterIndex[id]), 1);
+        }
+        void this.index.selectItem(this.currentSelectedItemId);
       }
-      n && this.reset();
+    }
+    if (needsReset) {
+      this.reset();
     }
   }
   /**
    * Clears all selections in the index and diagram.
    */
   reset() {
-    this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
+    this.diagramNeedsRedraw = false;
+    this.currentSelectedGroupId = "";
+    this.currentSelectedItemId = "";
+    drawDiagram(this.diagram, this.allNodesAndLinks);
+    this.createNodeHighlighters();
+    this.clearSelections();
   }
 }
-class ue extends C {
+class SolutionItemDiagram extends LitElement {
   constructor() {
-    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = y(), this._diagramShell = y(), this._translations = D({ name: "solution-item-diagram", blocking: !0 });
+    super(...arguments);
+    this.diagramKey = "";
+    this.templateInfoGraph = [];
+    this.typeKeywords = [];
+    this._diagramPanel = createRef();
+    this._diagramShell = createRef();
+    this._translations = useT9n({ name: "solution-item-diagram", blocking: true });
   }
   static {
-    this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
+    this.properties = { diagramKey: 1, templateInfoGraph: [0, {}, { attribute: false }], typeKeywords: [0, {}, { attribute: false }], _diagramPanel: [16, {}, { state: true }], _diagramShell: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = $;
+    this.styles = styles;
   }
   updated() {
-    if (this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0), this.templateInfoGraph.length > 0) {
-      const t = {
+    if (this.solutionDisplay) {
+      this.solutionDisplay.dispose();
+      this.solutionDisplay = void 0;
+    }
+    if (this.templateInfoGraph.length > 0) {
+      const graphsTranslations = {
         centerDiagram: this._translations.graphTranslations.centerDiagram,
         filteredView: this._translations.graphTranslations.filteredView,
         reset: this._translations.graphTranslations.reset,
         zoomIn: this._translations.graphTranslations.zoomIn,
         zoomOut: this._translations.graphTranslations.zoomOut
       };
-      this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
+      this.solutionDisplay = new SolutionDisplay(this._diagramShell.value, this._diagramPanel.value, graphsTranslations, this.diagramKey);
+      this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
     }
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
+    super.disconnectedCallback();
+    if (this.solutionDisplay) {
+      this.solutionDisplay.dispose();
+      this.solutionDisplay = void 0;
+    }
   }
   render() {
-    return B`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${w(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${w(this._diagramPanel)}></calcite-panel></calcite-shell>`;
+    return html`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${ref(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${ref(this._diagramPanel)}></calcite-panel></calcite-shell>`;
   }
 }
-b("solution-item-diagram", ue);
+customElement("solution-item-diagram", SolutionItemDiagram);
 export {
-  ue as SolutionItemDiagram
+  SolutionItemDiagram
 };