@esri/solutions-components 1.2.0-next.185 → 1.2.0-next.187

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

@@ -1,567 +1,367 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
-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 { 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 "../solution-item-accordion/customElement.js";
-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%";
-  graphicContainer.appendChild(diagramDiv);
-  const diagram = new go.Diagram(
-    diagramDiv,
+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,
     // create a Diagram for the HTML Div element
     {
-      click: dispatchDiagramClickEvent,
+      click: ie,
       // handle diagram clicks
-      contentAlignment: go.Spot.Center,
+      contentAlignment: d.Spot.Center,
       // align document to the center of the viewport
       dragSelectingTool: null,
       // disable drag selection
       hoverDelay: 50,
       // milliseconds before mouse-hover displays information
-      initialAutoScale: go.AutoScale.Uniform,
+      initialAutoScale: d.AutoScale.Uniform,
       // automatic zoom-to-fit
-      layout: new go.LayeredDigraphLayout({
-        columnSpacing: cColumnSpacing,
-        layerSpacing: cLayerSpacing
+      layout: new d.LayeredDigraphLayout({
+        columnSpacing: _,
+        layerSpacing: V
       }),
-      padding: cDiagramPadding,
-      scrollMode: go.ScrollMode.Infinite,
+      padding: H,
+      scrollMode: d.ScrollMode.Infinite,
       // allow infinite scrolling--beyond document bounds
       "toolManager.hoverDelay": 50,
       // 50 milliseconds before tooltip appears
-      "toolManager.mouseWheelBehavior": go.WheelMode.Zoom
+      "toolManager.mouseWheelBehavior": d.WheelMode.Zoom
       // mouse wheel zooms instead of scrolls vertically
     }
   );
-  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),
+  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),
       // top, right, bottom, left
       padding: 0,
       shadowBlur: 16,
-      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")))
+      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")))
   }).bind("text", "title").add(
-    new go.Shape({
-      desiredSize: cNodeSize,
-      fill: cNodeBackgroundColor,
-      geometryString: createRoundedRectangleGeometryPath(
-        cNodeSize.width,
-        cNodeSize.height,
-        cNodeCornerRadius$1,
-        cNodeIconPanelSize.width,
-        !!cNodeBackgroundColor
+    new d.Shape({
+      desiredSize: u,
+      fill: N,
+      geometryString: te(
+        u.width,
+        u.height,
+        G,
+        S.width,
+        !!N
       ),
-      height: cNodeSize.height,
+      height: u.height,
       portId: "",
-      stroke: cNodeBorderColor,
-      strokeWidth: cNodeBorderStrokeWidth,
-      width: cNodeSize.width
+      stroke: W,
+      strokeWidth: O,
+      width: u.width
     })
   ).add(
     // Node content
-    new go.Panel("Horizontal", {
-      alignment: go.Spot.Left,
-      stretch: go.Stretch.Horizontal
+    new d.Panel("Horizontal", {
+      alignment: d.Spot.Left,
+      stretch: d.Stretch.Horizontal
     }).add(
       // Icon panel
-      new go.Panel("Horizontal", {
-        alignment: go.Spot.Left,
-        desiredSize: cNodeIconPanelSize,
+      new d.Panel("Horizontal", {
+        alignment: d.Spot.Left,
+        desiredSize: S,
         margin: 1
       }).add(
-        new go.Panel("Horizontal", {
-          alignment: go.Spot.Center,
+        new d.Panel("Horizontal", {
+          alignment: d.Spot.Center,
           margin: 16
         }).add(
-          new go.Picture({
-            desiredSize: cNodeIconSize
-          }).bind("source", "", (node) => getIconUrl(node.itemType, node.itemTypeKeywords))
+          new d.Picture({
+            desiredSize: M
+          }).bind("source", "", (i) => A(i.itemType, i.itemTypeKeywords))
         )
       ),
       // Label
-      new go.Panel("Horizontal", {
-        alignment: go.Spot.Right,
-        margin: new go.Margin(4, 8, 0, 8)
+      new d.Panel("Horizontal", {
+        alignment: d.Spot.Right,
+        margin: new d.Margin(4, 8, 0, 8)
         // top, right, bottom, left
       }).add(
-        new go.Panel("Vertical", {}).add(
+        new d.Panel("Vertical", {}).add(
           // First line
-          new go.TextBlock({
-            alignment: go.Spot.Left,
-            desiredSize: cNodeTextLineSize,
-            font: cNodeTextFormatBold,
-            overflow: go.TextOverflow.Ellipsis,
-            stroke: cNodeTextColor,
-            wrap: go.Wrap.None
+          new d.TextBlock({
+            alignment: d.Spot.Left,
+            desiredSize: v,
+            font: F,
+            overflow: d.TextOverflow.Ellipsis,
+            stroke: g,
+            wrap: d.Wrap.None
           }).bind("text", "title"),
           // Second line
-          new go.TextBlock({
-            alignment: go.Spot.Left,
-            desiredSize: cNodeTextLineSize,
-            font: cNodeTextFormat,
-            overflow: go.TextOverflow.Ellipsis,
-            stroke: cNodeTextColor,
-            wrap: go.Wrap.None
+          new d.TextBlock({
+            alignment: d.Spot.Left,
+            desiredSize: v,
+            font: R,
+            overflow: d.TextOverflow.Ellipsis,
+            stroke: g,
+            wrap: d.Wrap.None
           }).bind("text", "itemTypeForDisplay")
         )
       )
     )
-  );
-  diagram.commandHandler.zoomFactor = 1.05;
-  diagram.setDivBackground(cDiagramBackgroundColor);
-  const selectingTool = diagram.toolManager.clickSelectingTool;
-  selectingTool.standardMouseSelect = function() {
+  ), e.commandHandler.zoomFactor = 1.05, e.setDivBackground(K);
+  const r = e.toolManager.clickSelectingTool;
+  r.standardMouseSelect = function() {
   };
-  const draggingTool = diagram.toolManager.draggingTool;
-  draggingTool.isEnabled = false;
-  diagram.linkTemplate = new go.Link({
+  const s = e.toolManager.draggingTool;
+  return s.isEnabled = !1, e.linkTemplate = new d.Link({
     corner: 5,
-    movable: false,
-    routing: go.Routing.Orthogonal,
-    selectable: false
+    movable: !1,
+    routing: d.Routing.Orthogonal,
+    selectable: !1
   }).add(
-    new go.Shape({
+    new d.Shape({
       // the link path shape
-      opacity: cNormalLinkOpacity,
-      stroke: cLinkColor
+      opacity: w,
+      stroke: T
     }),
-    new go.Shape({
+    new d.Shape({
       // the 'to' arrowhead
-      fill: cLinkColor,
-      opacity: cNormalLinkOpacity,
+      fill: T,
+      opacity: w,
       stroke: null,
       toArrow: "Standard"
     })
-  );
-  return diagram;
+  ), e;
 }
-function drawDiagram(diagram, nodesAndLinks) {
-  diagram.model = new go.GraphLinksModel(nodesAndLinks.nodes, nodesAndLinks.links, {
+function m(o, t) {
+  o.model = new d.GraphLinksModel(t.nodes, t.links, {
     linkFromPortIdProperty: "fromPort",
     linkToPortIdProperty: "toPort"
   });
 }
-function drawAndConnectControlBars(graphicContainer, diagram, translations, includeFilteredViewButton = true) {
-  if (includeFilteredViewButton) {
-    const filterViewButton = drawfilteredViewBar(graphicContainer, translations);
-    filterViewButton.addEventListener(
+function Y(o, t, e, r = !0) {
+  if (r) {
+    const c = ne(o, e);
+    c.addEventListener(
       "calciteSwitchChange",
-      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: filterViewButton.checked }))
+      () => document.dispatchEvent(new CustomEvent("filteredViewChanged", { detail: c.checked }))
     );
   }
-  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());
+  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());
 }
-function drawSolutionGraph(graphicContainer, nodesAndLinks, translations) {
-  const diagram = defineDiagram(graphicContainer);
-  drawDiagram(diagram, nodesAndLinks);
-  drawAndConnectControlBars(graphicContainer, diagram, translations);
-  return diagram;
+function J(o, t, e) {
+  const r = q(o);
+  return m(r, t), Y(o, r, e), r;
 }
-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);
-        }
+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));
       }
     );
   }
-  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);
-        }
+  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));
       }
     );
   }
-  traceToLinks(diagramNode);
-  return { connectedNodes, connectedLinks };
+  return s(o), { connectedNodes: t, connectedLinks: 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);
+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);
     } else {
-      groupPseudoNodes.push(template.id);
-      return void 0;
+      r.push(n.id);
+      return;
     }
-  }).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
-        });
-      }
+  }).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
+      });
     });
-  });
-  return { nodes, links, groupPseudoNodes };
+  }), { nodes: s, links: i, groupPseudoNodes: r };
 }
-function highlightNode(focusNode, focus, highlightBorder, dimUnrelatedNodes = true) {
-  const myDiagram = focusNode.diagram;
-  if (!myDiagram) {
+function U(o, t, e, r = !0) {
+  const s = o.diagram;
+  if (!s)
     return;
-  }
-  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 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 { 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;
+      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;
       }
     }
   }
-  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]);
+  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]);
     }
-    animation.start();
+    n.start();
   }
 }
-function highlightNodes(nodeIds, nodes, focus, highlightBorders, dimUnrelatedNodes = true) {
-  if (nodeIds.length === 0) {
+function L(o, t, e, r, s = !0) {
+  if (o.length === 0)
     return;
-  }
-  const myDiagram = nodes[0].diagram;
-  if (!myDiagram) {
+  const i = t[0].diagram;
+  if (!i)
     return;
-  }
-  const animationSet = {};
-  if (dimUnrelatedNodes) {
-    for (const node of myDiagram.nodes) {
-      const isFocusNode = nodeIds.includes(node.key);
-      animationSet[node.key] = !focus || isFocusNode ? cNormalNodeOpacity : cDimmedNodeOpacity;
+  const n = {};
+  if (s) {
+    for (const a of i.nodes) {
+      const c = o.includes(a.key);
+      n[a.key] = !e || c ? f : b;
     }
-    for (const link of myDiagram.links) {
-      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-      animationSet[key] = focus ? cDimmedLinkOpacity : cNormalLinkOpacity;
+    for (const a of i.links) {
+      const c = `${a.fromNode?.key}-${a.toNode?.key}`;
+      n[c] = e ? x : w;
     }
   }
-  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]);
+  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]);
     }
-    for (const link of myDiagram.links) {
-      const key = `${link.fromNode?.key}-${link.toNode?.key}`;
-      animation.add(link, "opacity", link.opacity, animationSet[key]);
-    }
-    animation.start();
+    a.start();
   }
 }
-function createGraphNode(template, templateTag, canClickToOpen = false, clickToOpenBaseUrl) {
+function X(o, t, e = !1, r) {
   return {
-    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
+    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
   };
 }
-function createGraphTag(template) {
-  return template.id;
+function ee(o) {
+  return o.id;
 }
-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 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 dispatchDiagramClickEvent() {
+function ie() {
   document.dispatchEvent(new CustomEvent("clickInDiagram"));
 }
-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(o, t) {
+  const e = t.part;
+  e instanceof d.Node && (e.selectionAdorned = !1, document.dispatchEvent(new CustomEvent("clickOnNode", { detail: 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 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 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 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 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;
+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)";
   }
-  _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;
+  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;
 }
-function reset(diagram) {
-  diagram.zoomToFit();
-  document.dispatchEvent(new CustomEvent("reset"));
+function de(o) {
+  o.zoomToFit(), document.dispatchEvent(new CustomEvent("reset"));
 }
-function _getCssVar$1(name) {
-  const el = document.body;
-  return getComputedStyle(el).getPropertyValue(name).trim();
+function p(o) {
+  const t = document.body;
+  return getComputedStyle(t).getPropertyValue(o).trim();
 }
-function _hexToRgb(hex, alpha) {
-  hex = hex.replace(/^#/, "");
-  if (hex.length === 3) {
-    hex = hex.split("").map((c) => c + c).join("");
-  }
-  if (hex.length !== 6) {
+function se(o, t) {
+  if (o = o.replace(/^#/, ""), o.length === 3 && (o = o.split("").map((i) => i + i).join("")), o.length !== 6)
     throw new Error("Invalid hex color");
-  }
-  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 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 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();
+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();
 }
-class SolutionDisplay {
+class pe {
   /**
    * Creates a new instance of the SolutionDisplay class.
    * @param indexPanel The Calcite panel element to use as the index panel.
@@ -574,46 +374,22 @@ class SolutionDisplay {
    *     <calcite-panel id='diagramPanel' style='display:flex;'/>
    *   </calcite-shell>
    */
-  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 ?? "";
-    }
+  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 ?? "");
   }
   /**
    * Creates the index and diagram for the given collection of template info.
@@ -621,85 +397,53 @@ class SolutionDisplay {
    * @param typeKeywords The collection type keywords for the solution.
    * @returns A promise that resolves when the index and diagram have been created.
    */
-  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(
+  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(
       this.diagramPanel,
       this.allNodesAndLinks,
       this.diagramTranslations
-    );
-    this.diagram.addDiagramListener("LayoutCompleted", () => {
+    ), this.diagram.addDiagramListener("LayoutCompleted", () => {
       setTimeout(() => {
         this.diagram.zoomToFit();
       }, 1e3);
-    });
-    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);
+    }), 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);
   }
   /**
    * 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(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);
+  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);
   }
   /**
    * Creates indicies into the diagram's nodes and node highlighters.
    * Rebuilds this.diagramNodeIndex and this.diagramNodeHighlighterIndex.
    */
   createNodeHighlighters() {
-    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", {
+    this.diagramNodeIndex = {}, this.diagramNodeHighlighterIndex = {}, this.getNodesFromDiagram(this.diagram).forEach((e) => {
+      this.diagramNodeIndex[e.data.key] = e;
+      const r = new d.Adornment("Auto", {
         background: "transparent",
         margin: 2
       });
-      nodeHighlighter.add(new go.Shape("RoundedRectangle", {
+      r.add(new d.Shape("RoundedRectangle", {
         fill: "transparent",
-        parameter1: cNodeCornerRadius,
-        parameter2: cNodeCornerRadiusCornerSelectionBitmap,
-        stroke: cNodeHighlightColor,
-        strokeWidth: cNodeHighlightStrokeWidth
-      }));
-      nodeHighlighter.add(new go.Placeholder({
+        parameter1: ce,
+        parameter2: le,
+        stroke: he,
+        strokeWidth: me
+      })), r.add(new d.Placeholder({
         margin: 1
-      }));
-      this.diagramNodeHighlighterIndex[node.data.key] = nodeHighlighter;
+      })), this.diagramNodeHighlighterIndex[e.data.key] = r;
     });
   }
   /**
@@ -708,21 +452,19 @@ class SolutionDisplay {
    * @param id Id of node to find
    * @returns Node matching the given id, or undefined if not found
    */
-  getNodeById(id) {
-    return this.diagramNodeIndex[id];
+  getNodeById(t) {
+    return this.diagramNodeIndex[t];
   }
   /**
    * Retrieves all nodes from the diagram.
    * @param diagram The diagram to search
    * @returns Array of nodes in the diagram
    */
-  getNodesFromDiagram(diagram) {
-    const nodes = [];
-    const nodeIterator = diagram.nodes.iterator;
-    while (nodeIterator.next()) {
-      nodes.push(nodeIterator.value);
-    }
-    return nodes;
+  getNodesFromDiagram(t) {
+    const e = [], r = t.nodes.iterator;
+    for (; r.next(); )
+      e.push(r.value);
+    return e;
   }
   /**
    * Selects an item to highlight or unhighlight.
@@ -730,150 +472,88 @@ class SolutionDisplay {
    * @param toggleSelection Whether to toggle the selection state of the item
    * @param alsoCollapseAllAccordionItems Whether to collapse all accordion items in the index
    */
-  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);
+  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);
         }
-        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) {
+      } 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))
           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;
+        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;
           }
+          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);
       }
-    }
-    if (needsReset) {
-      this.reset();
+      i && this.reset();
     }
   }
   /**
    * Clears all selections in the index and diagram.
    */
   reset() {
-    this.diagramNeedsRedraw = false;
-    this.currentSelectedGroupId = "";
-    this.currentSelectedItemId = "";
-    drawDiagram(this.diagram, this.allNodesAndLinks);
-    this.createNodeHighlighters();
-    this.clearSelections();
+    this.diagramNeedsRedraw = !1, this.currentSelectedGroupId = "", this.currentSelectedItemId = "", m(this.diagram, this.allNodesAndLinks), this.createNodeHighlighters(), this.clearSelections();
   }
 }
-class SolutionItemDiagram extends LitElement {
+class ge extends $ {
   constructor() {
-    super(...arguments);
-    this.diagramKey = "";
-    this.templateInfoGraph = [];
-    this.typeKeywords = [];
-    this._diagramPanel = createRef();
-    this._diagramShell = createRef();
-    this._translations = useT9n({ name: "solution-item-diagram", blocking: true });
+    super(...arguments), this.diagramKey = "", this.templateInfoGraph = [], this.typeKeywords = [], this._diagramPanel = k(), this._diagramShell = k(), this._translations = z({ name: "solution-item-diagram", blocking: !0 });
   }
   static {
-    this.properties = { diagramKey: 1, templateInfoGraph: [0, {}, { attribute: false }], typeKeywords: [0, {}, { attribute: false }], _diagramPanel: [16, {}, { state: true }], _diagramShell: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
+    this.properties = { diagramKey: 1, templateInfoGraph: 0, typeKeywords: 0, _diagramPanel: 16, _diagramShell: 16, _translations: 16 };
   }
   static {
-    this.styles = styles;
+    this.styles = P;
   }
   updated() {
-    if (this.solutionDisplay) {
-      this.solutionDisplay.dispose();
-      this.solutionDisplay = void 0;
-    }
-    if (this.templateInfoGraph.length > 0) {
-      const graphsTranslations = {
+    if (this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0), this.templateInfoGraph.length > 0) {
+      const t = {
         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 SolutionDisplay(this._diagramShell.value, this._diagramPanel.value, graphsTranslations, this.diagramKey);
-      this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
+      this.solutionDisplay = new pe(this._diagramShell.value, this._diagramPanel.value, t, this.diagramKey), this.solutionDisplay.create(this.templateInfoGraph, this.typeKeywords);
     }
     requestAnimationFrame(() => this._preventDiagramScrollbars());
   }
   disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.solutionDisplay) {
-      this.solutionDisplay.dispose();
-      this.solutionDisplay = void 0;
-    }
+    super.disconnectedCallback(), this.solutionDisplay && (this.solutionDisplay.dispose(), this.solutionDisplay = void 0);
   }
   render() {
-    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>`;
+    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>`;
   }
   _preventDiagramScrollbars() {
     if (!this._diagramPanel.value)
       return;
-    const shadowRoot = this._diagramPanel.value.shadowRoot;
-    if (!shadowRoot)
+    const t = this._diagramPanel.value.shadowRoot;
+    if (!t)
       return;
-    const contentWrapper = shadowRoot.querySelector(".content-wrapper");
-    if (contentWrapper instanceof HTMLElement) {
-      contentWrapper.style.overflow = "hidden";
-    }
+    const e = t.querySelector(".content-wrapper");
+    e instanceof HTMLElement && (e.style.overflow = "hidden");
   }
 }
-customElement("solution-item-diagram", SolutionItemDiagram);
+B("solution-item-diagram", ge);
 export {
-  SolutionItemDiagram
+  ge as SolutionItemDiagram
 };