@esri/solutions-components 5.0.6 → 5.0.8-next.1

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

@@ -1,367 +1,572 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as B } from "../../chunks/runtime.js";
-import { css as C, html as D } from "lit";
-import { u as z } from "../../chunks/useT9n.js";
-import { LitElement as $ } from "@arcgis/lumina";
-import { createRef as k, ref as I } from "lit-html/directives/ref.js";
-import * as d from "gojs";
-import { g as A } from "../../chunks/getItemIcon.js";
+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 "../solution-item-accordion/customElement.js";
-const P = C`#filter-bar{background-color:var(--calcite-color-foreground-1);position:absolute;top:16px;right:196px;z-index:100;box-shadow:var(--calcite-shadow-sm)}#filteredViewButtonDiv{padding:8px}#filteredViewButtonLabel{--calcite-label-margin-bottom: 0}#graph-navigation-bar{background-color:var(--calcite-color-foreground-1);position:absolute;top:16px;right:16px;z-index:100}#graph-navigation-controls{position:absolute;top:0;right:0;box-shadow:var(--calcite-shadow-sm)}.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}`, _ = 15, V = 15, H = 10, u = new d.Size(220, 48), O = 1, G = 8, S = new d.Size(48, 48), M = new d.Size(16, 16), v = new d.Size(153, 17), R = '400 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', F = '500 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif', K = "val(--calcite-color-background)", W = p("--calcite-color-border-1"), N = p("--calcite-color-foreground-1"), g = p("--calcite-color-text-1"), T = p("--calcite-color-border-input"), j = p("--calcite-color-foreground-1"), f = 1, b = 0.3, w = 1, x = 0.2, Z = 1;
-function q(o) {
-  const t = document.createElement("div");
-  t.style.width = "100%", t.style.height = "100%", o.appendChild(t);
-  const e = new d.Diagram(
-    t,
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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: var(--calcite-color-foreground-1);
+  position: absolute;
+  top: 16px;
+  right: 196px;
+  z-index: 100;
+  box-shadow: var(--calcite-shadow-sm);
+}
+
+#filteredViewButtonDiv {
+  padding: 8px 8px;
+}
+
+#filteredViewButtonLabel {
+  --calcite-label-margin-bottom: 0;
+}
+
+#graph-navigation-bar {
+  background-color: var(--calcite-color-foreground-1);
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 100;
+}
+
+#graph-navigation-controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-shadow: var(--calcite-shadow-sm);
+}
+
+.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;
+}`;
+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 = '500 0.75rem "Avenir Next", Avenir, "Helvetica Neue", sans-serif';
+const cDiagramBackgroundColor = "val(--calcite-color-background)";
+const cNodeBorderColor = _getCssVar$1("--calcite-color-border-1");
+const cNodeBackgroundColor = _getCssVar$1("--calcite-color-foreground-1");
+const cNodeTextColor = _getCssVar$1("--calcite-color-text-1");
+const cLinkColor = _getCssVar$1("--calcite-color-border-input");
+const cTooltipBackgroundColor = _getCssVar$1("--calcite-color-foreground-1");
+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%";
+  const isRTL = document.documentElement.dir === "rtl";
+  const spotAlign = isRTL ? go.Spot.Right : go.Spot.Left;
+  const textAlign = isRTL ? "right" : "left";
+  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: _,
-        layerSpacing: V
+      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: oe,
-    movable: !1,
-    opacity: f,
-    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: se(g, 0.05),
-      shadowOffset: new d.Point(0, 0)
-    }).add(new d.Panel("Vertical", { background: j, margin: 0 }).add(new d.TextBlock({ margin: 14, stroke: g }).bind("text", "title")))
+      shadowColor: _hexToRgb(cNodeTextColor, 0.05),
+      shadowOffset: new go.Point(0, 0)
+    }).add(new go.Panel("Vertical", { background: cTooltipBackgroundColor, margin: 0 }).add(new go.TextBlock({ margin: 14, stroke: cNodeTextColor }).bind("text", "title")))
   }).bind("text", "title").add(
-    new d.Shape({
-      desiredSize: u,
-      fill: N,
-      geometryString: te(
-        u.width,
-        u.height,
-        G,
-        S.width,
-        !!N
+    new go.Shape({
+      desiredSize: cNodeSize,
+      fill: cNodeBackgroundColor,
+      geometryString: createRoundedRectangleGeometryPath(
+        cNodeSize.width,
+        cNodeSize.height,
+        cNodeCornerRadius$1,
+        cNodeIconPanelSize.width,
+        !!cNodeBackgroundColor
       ),
-      height: u.height,
+      height: cNodeSize.height,
       portId: "",
-      stroke: W,
-      strokeWidth: O,
-      width: u.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: spotAlign,
+      stretch: go.Stretch.Horizontal
     }).add(
       // Icon panel
-      new d.Panel("Horizontal", {
-        alignment: d.Spot.Left,
-        desiredSize: S,
+      new go.Panel("Horizontal", {
+        alignment: spotAlign,
+        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: M
-          }).bind("source", "", (i) => A(i.itemType, i.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: spotAlign,
+        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: v,
-            font: F,
-            overflow: d.TextOverflow.Ellipsis,
-            stroke: g,
-            wrap: d.Wrap.None
+          new go.TextBlock({
+            alignment: spotAlign,
+            textAlign,
+            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: v,
-            font: R,
-            overflow: d.TextOverflow.Ellipsis,
-            stroke: g,
-            wrap: d.Wrap.None
+          new go.TextBlock({
+            alignment: spotAlign,
+            textAlign,
+            desiredSize: cNodeTextLineSize,
+            font: cNodeTextFormat,
+            overflow: go.TextOverflow.Ellipsis,
+            stroke: cNodeTextColor,
+            wrap: go.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(K);
-  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: w,
-      stroke: T
+      opacity: cNormalLinkOpacity,
+      stroke: cLinkColor
     }),
-    new d.Shape({
+    new go.Shape({
       // the 'to' arrowhead
-      fill: T,
-      opacity: w,
+      fill: cLinkColor,
+      opacity: cNormalLinkOpacity,
       stroke: null,
       toArrow: "Standard"
     })
-  ), e;
+  );
+  return diagram;
 }
-function m(o, t) {
-  o.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 Y(o, t, e, r = !0) {
-  if (r) {
-    const c = ne(o, 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: i, zoomInButton: n, zoomOutButton: a } = ae(o, e);
-  s.addEventListener("click", () => de(t)), i.addEventListener("click", () => t.zoomToFit()), n.addEventListener("click", () => t.commandHandler.increaseZoom()), a.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 J(o, t, e) {
-  const r = q(o);
-  return m(r, t), Y(o, r, e), r;
+function drawSolutionGraph(graphicContainer, nodesAndLinks, translations) {
+  const diagram = defineDiagram(graphicContainer);
+  drawDiagram(diagram, nodesAndLinks);
+  drawAndConnectControlBars(graphicContainer, diagram, translations);
+  return diagram;
 }
-function E(o) {
-  const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
-  function r(i) {
-    i.findLinksInto().each(
-      (n) => {
-        e.add(n);
-        const a = n.fromNode;
-        a && !t.has(a) && (t.add(a), r(a));
+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(o);
-  function s(i) {
-    i.findLinksOutOf().each(
-      (n) => {
-        e.add(n);
-        const a = n.toNode;
-        a && !t.has(a) && (t.add(a), s(a));
+  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(o), { connectedNodes: t, connectedLinks: e };
+  traceToLinks(diagramNode);
+  return { connectedNodes, connectedLinks };
 }
-function Q(o, t = !1, e) {
-  const r = [], s = o.map((n) => {
-    if (n.type !== "Group") {
-      const a = ee(n);
-      return X(n, a, 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(n.id);
-      return;
+      groupPseudoNodes.push(template.id);
+      return void 0;
     }
-  }).filter((n) => n !== void 0), i = [];
-  return s.forEach((n) => {
-    (o.find((c) => c.id === n.itemId)?.dependencies || []).forEach((c) => {
-      const h = s.find((l) => l?.itemId === c);
-      h && i.push({
-        from: h.key,
-        fromSpot: d.Spot.AllSides,
-        to: n.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: i, groupPseudoNodes: r };
+  });
+  return { nodes, links, groupPseudoNodes };
 }
-function U(o, t, e, r = !0) {
-  const s = o.diagram;
-  if (!s)
+function highlightNode(focusNode, focus, highlightBorder, dimUnrelatedNodes = true) {
+  const myDiagram = focusNode.diagram;
+  if (!myDiagram) {
     return;
-  const i = {};
-  if (r) {
-    for (const n of s.nodes)
-      i[n.key] = n === o ? f : b;
-    for (const n of s.links) {
-      const a = `${n.fromNode?.key}-${n.toNode?.key}`;
-      i[a] = x;
+  }
+  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: n, connectedLinks: a } = E(o);
-      for (const c of n)
-        i[c.key] = f;
-      for (const c of a) {
-        const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-        i[h] = Z;
+      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 = o), r) {
-    const n = new d.Animation();
-    n.duration = 1;
-    for (const a of s.nodes)
-      n.add(a, "opacity", a.opacity, i[a.key]);
-    for (const a of s.links) {
-      const c = `${a.fromNode?.key}-${a.toNode?.key}`;
-      n.add(a, "opacity", a.opacity, i[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]);
     }
-    n.start();
+    animation.start();
   }
 }
-function L(o, t, e, r, s = !0) {
-  if (o.length === 0)
+function highlightNodes(nodeIds, nodes, focus, highlightBorders, dimUnrelatedNodes = true) {
+  if (nodeIds.length === 0) {
     return;
-  const i = t[0].diagram;
-  if (!i)
+  }
+  const myDiagram = nodes[0].diagram;
+  if (!myDiagram) {
     return;
-  const n = {};
-  if (s) {
-    for (const a of i.nodes) {
-      const c = o.includes(a.key);
-      n[a.key] = !e || c ? f : b;
+  }
+  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 a of i.links) {
-      const c = `${a.fromNode?.key}-${a.toNode?.key}`;
-      n[c] = e ? x : w;
+    for (const link of myDiagram.links) {
+      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
+      animationSet[key] = focus ? cDimmedLinkOpacity : cNormalLinkOpacity;
     }
   }
-  if (Object.keys(r).forEach((a) => {
-    r[a].adornedObject = null;
-  }), s) {
-    const a = new d.Animation();
-    a.duration = 1;
-    for (const c of i.nodes)
-      a.add(c, "opacity", c.opacity, n[c.key]);
-    for (const c of i.links) {
-      const h = `${c.fromNode?.key}-${c.toNode?.key}`;
-      a.add(c, "opacity", c.opacity, n[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]);
     }
-    a.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(o, t, e = !1, r) {
+function createGraphNode(template, templateTag, canClickToOpen = false, clickToOpenBaseUrl) {
   return {
-    key: t,
-    title: o.title,
-    itemId: o.id,
-    itemType: o.type,
-    itemTypeForDisplay: re(o.type, o.typeKeywords),
-    itemTypeKeywords: o.typeKeywords,
-    group: o.type,
-    url: e ? `${r}?id=${o.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(o) {
-  return o.id;
+function createGraphTag(template) {
+  return template.id;
 }
-function te(o, t, e, r = 0, s = !1) {
-  let i = "";
-  s && (i += "F");
-  const n = o - 2 * e, a = t - 2 * e;
-  return i += " M0 0", i += ` h${n}`, i += ` a${e} ${e} 0 0 1 ${e} ${e}`, i += ` v${a}`, i += ` a${e} ${e} 0 0 1 ${-e} ${e}`, i += ` h${-n}`, i += ` a${e} ${e} 0 0 1 ${-e} ${-e}`, i += ` v${-a}`, i += ` a${e} ${e} 0 0 1 ${e} ${-e}`, r > 0 && (i += ` M${r - e} 0 v${t}`), i;
+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 oe(o, 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 ne(o, 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 i = document.createElement("calcite-action-bar");
-  i.id = "filter-bar-controls", i.layout = "horizontal", i.expandDisabled = !0, i.appendChild(s);
-  const n = document.createElement("div");
-  return n.id = "filter-bar", o.appendChild(n), n.appendChild(i), 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(o, t) {
-  const e = document.createElement("calcite-action");
-  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.icon = "zoom-to-object", s.id = "centerButton";
-  const i = document.createElement("calcite-tooltip");
-  i.id = "centerButtonTooltip", i.innerHTML = t.centerDiagram, i.overlayPositioning = "fixed", i.placement = "bottom", i.referenceElement = s.id;
-  const n = document.createElement("calcite-action");
-  n.icon = "plus", n.id = "zoomInButton";
-  const a = document.createElement("calcite-tooltip");
-  a.id = "zoomInButtonTooltip", a.innerHTML = t.zoomIn, a.overlayPositioning = "fixed", a.placement = "bottom", a.referenceElement = n.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(i), l.appendChild(n), l.appendChild(a), l.appendChild(c), l.appendChild(h);
-  const y = document.createElement("div");
-  return y.id = "graph-navigation-bar", o.appendChild(y), y.appendChild(l), { resetButton: e, centerButton: s, zoomInButton: n, zoomOutButton: c };
+function drawNavigationBar(graphicContainer, translations) {
+  const resetButton = document.createElement("calcite-action");
+  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.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.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(o, t) {
-  let e = o;
-  if (o === "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)";
+  }
+  if (type === "Web Mapping Application") {
+    _type = typeKeywords.indexOf("configurableApp") > -1 ? "Instant App" : _type;
   }
-  return o === "Web Mapping Application" && (e = t.indexOf("configurableApp") > -1 ? "Instant App" : e), e = o === "Geoprocessing Service" ? "Tool" : e, e = o === "Feed" ? "Feed (hosted)" : e, e = o === "Real Time Analytic" ? "Real Time Analytic (hosted)" : e, e = o === "Big Data Analytic" ? "Big Data Analytic (hosted)" : e, e = o === "Vector Tile Service" ? "Tile Layer" : e, e;
+  _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(o) {
-  o.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
+function reset(diagram) {
+  diagram.zoomToFit();
+  document.dispatchEvent(new CustomEvent("reset"));
 }
-function p(o) {
-  const t = document.body;
-  return getComputedStyle(t).getPropertyValue(o).trim();
+function _getCssVar$1(name) {
+  const el = document.body;
+  return getComputedStyle(el).getPropertyValue(name).trim();
 }
-function se(o, t) {
-  if (o = o.replace(/^#/, ""), o.length === 3 && (o = o.split("").map((i) => i + i).join("")), o.length !== 6)
+function _hexToRgb(hex, alpha) {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  if (hex.length !== 6) {
     throw new Error("Invalid hex color");
-  const e = parseInt(o.slice(0, 2), 16), r = parseInt(o.slice(2, 4), 16), s = parseInt(o.slice(4, 6), 16);
-  return `rgba(${e}, ${r}, ${s}, ${t})`;
+  }
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
-const ce = 8, le = 15, he = ue("--calcite-color-brand"), me = 4;
-function ue(o) {
-  const t = document.documentElement;
-  return getComputedStyle(t).getPropertyValue(o).trim();
+const cNodeCornerRadius = 8;
+const cNodeCornerRadiusCornerSelectionBitmap = 1 | 2 | 4 | 8;
+const cNodeHighlightColor = _getCssVar("--calcite-color-brand");
+const cNodeHighlightStrokeWidth = 4;
+function _getCssVar(name) {
+  const el = document.documentElement;
+  return getComputedStyle(el).getPropertyValue(name).trim();
 }
-class pe {
+class SolutionDisplay {
   /**
    * Creates a new instance of the SolutionDisplay class.
    * @param indexPanel The Calcite panel element to use as the index panel.
@@ -374,22 +579,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 = (i) => {
-      i.stopImmediatePropagation(), (this.currentSelectedGroupId || this.currentSelectedItemId) && (this.currentSelectedGroupId = "", this.currentSelectedItemId = "", this.diagramNeedsRedraw = this.usefilteredView, this.redraw());
-    }, this.handle_clickOnNode = (i) => {
-      i.stopImmediatePropagation();
-      const n = i.detail.data.key;
-      this.redraw(n, n === this.currentSelectedItemId);
-    }, this.handle_filteredViewChanged = (i) => {
-      this.usefilteredView = i.detail, this.diagramNeedsRedraw = !!this.currentSelectedGroupId || !!this.currentSelectedItemId, this.redraw(this.currentSelectedItemId || this.currentSelectedGroupId);
-    }, this.handle_reset = (i) => {
-      i.stopImmediatePropagation(), this.reset();
-    }, this.handle_solutionItemSelect = (i) => {
-      i.stopImmediatePropagation();
-      const n = i.detail.itemId;
-      this.redraw(n, n === this.currentSelectedItemId || n === 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.
@@ -397,53 +626,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 = Q(t), this.diagram = J(
+  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);
-    L(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;
     });
   }
   /**
@@ -452,19 +713,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.
@@ -472,88 +735,150 @@ 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 i = !1;
-    if (this.clearSelections(r), !!t) {
-      if (s) {
-        if (this.currentSelectedItemId = "", this.currentSelectedGroupId !== t ? this.currentSelectedGroupId = t : e && (this.currentSelectedGroupId = this.currentSelectedGroupId ? "" : t, i = this.usefilteredView && !this.currentSelectedGroupId), this.currentSelectedGroupId) {
-          this.usefilteredView && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters());
-          const n = this.collection.filter((c) => c.id === t)[0], a = n.dependencies.map((c) => this.diagramNodeIndex[c]);
-          if (this.usefilteredView) {
-            const c = a.map((h) => h.data);
-            m(this.diagram, { nodes: c, links: [] });
-          } else
-            L(n.dependencies, a, !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, i = this.usefilteredView && !this.currentSelectedItemId);
-        let n = this.getNodeById(t);
-        if ((!n || this.usefilteredView) && (m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), n = this.getNodeById(t), !n))
+        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 a = E(n);
-            a.connectedNodes.add(n);
-            const c = Array.from(a.connectedNodes).map((l) => l.data), h = Array.from(a.connectedLinks).map((l) => l.data);
-            if (m(this.diagram, { nodes: c, links: h }), this.createNodeHighlighters(), n = this.getNodeById(t), !n)
-              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;
           }
-          n && setTimeout(() => U(n, !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);
       }
-      i && 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 ge extends $ {
+class SolutionItemDiagram extends LitElement {
   constructor() {
-    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = k(), this._diagramShell = k(), this._translations = z({ 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 = P;
+    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);
     }
     requestAnimationFrame(() => this._preventDiagramScrollbars());
   }
   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 D`<calcite-shell><calcite-shell-panel id=diagram-shell-panel slot=panel-start ${I(this._diagramShell)}></calcite-shell-panel><calcite-panel class="z-index-1" id=diagram-panel slot=panel-bottom ${I(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>`;
   }
   _preventDiagramScrollbars() {
     if (!this._diagramPanel.value)
       return;
-    const t = this._diagramPanel.value.shadowRoot;
-    if (!t)
+    const shadowRoot = this._diagramPanel.value.shadowRoot;
+    if (!shadowRoot)
       return;
-    const e = t.querySelector(".content-wrapper");
-    e instanceof HTMLElement && (e.style.overflow = "hidden");
+    const contentWrapper = shadowRoot.querySelector(".content-wrapper");
+    if (contentWrapper instanceof HTMLElement) {
+      contentWrapper.style.overflow = "hidden";
+    }
   }
 }
-B("solution-item-diagram", ge);
+customElement("solution-item-diagram", SolutionItemDiagram);
 export {
-  ge as SolutionItemDiagram
+  SolutionItemDiagram
 };