Search

Impact Analysis

Graph Analysis

Reveal the dependencies and significance of nodes.

Impact Analysis
View live example →

Click on a node to explore its dependencies as a hierarchy.

This example finds the directed subgraph from any selected node. It then replaces the data in the items prop with the subgraph to filter out other items.

Items are filtered out of ReGraph simply by excluding them from your state.

See also

import React, { useRef, useState } from "react";
import { createRoot } from "react-dom/client";

import has from "lodash/has";
import isEmpty from "lodash/isEmpty";
import pickBy from "lodash/pickBy";
import { Chart } from "regraph";
import { distances } from "regraph/analysis";

import data from "./data";

function isNode(item) {
  return !has(item, "id1");
}

export const Demo = () => <Filtering items={data()} />;

function Filtering(props) {
  // the full unfiltered data
  const { items: allItems } = props;
  // items to be shown by ReGraph
  const [state, setState] = useState({
    items: allItems,
    layout: {},
    positions: {},
    selection: {},
  });
  const savedPositions = useRef({});

  const findSubGraph = async (nodeId) => {
    const subGraphIds = await distances(allItems, nodeId, { direction: "to" });

    return pickBy(allItems, (item, id) => {
      // Get the nodes present in the subgraph.
      if (has(subGraphIds, id)) {
        return true;
      }
      // Get links which have the nodes at both ends in the subgraph.
      if (!isNode(item)) {
        return has(subGraphIds, item.id1) && has(subGraphIds, item.id2);
      }
      return false;
    });
  };

  const chartChangeHandler = async ({
    positions: newPositions,
    selection: newSelection,
  }) => {
    // After running the initial layout, store all the
    // positions so they can be restored later.
    if (!isEmpty(newPositions) && isEmpty(savedPositions.current)) {
      savedPositions.current = { ...newPositions };
    }

    if (newSelection) {
      if (!isEmpty(newSelection)) {
        const id = Object.keys(newSelection)[0];
        if (isNode(allItems[id])) {
          const subGraph = await findSubGraph(id);
          setState(() => {
            return {
              items: subGraph, // replace items with just the subGraph
              layout: {
                name: "sequential",
                top: id,
                orientation: "right",
                linkShape: "curved",
                stretch: 3,
                tightness: 9,
              },
              positions: {}, // force the new layout to run
              selection: newSelection,
            };
          });
        }
      } else {
        setState(() => {
          return {
            items: allItems,
            layout: { linkShape: "direct" },
            positions: savedPositions.current,
            selection: newSelection,
          };
        });
      }
    }
  };

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <Chart
        items={state.items}
        positions={state.positions}
        selection={state.selection}
        layout={state.layout}
        // disable dragging of nodes
        onDragStart={({ preventDefault, type }) => {
          if (type === "node") {
            preventDefault();
          }
        }}
        onChange={chartChangeHandler}
        animation={{ animate: true, time: 850 }}
      />
    </div>
  );
}

const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);
import mapValues from "lodash/mapValues";
import { style } from "@ci/theme/rg/js/storyStyles";

function data() {
  const styles = createStyles().node;
  const nodeColorsDone = mapValues(rawData(), (value) => {
    if (value.type && styles[value.type]) {
      return { ...value, ...styles[value.type] };
    }
    return value;
  });
  const linkStylesDone = mapValues(nodeColorsDone, (value) => {
    const { id1, id2, end1, end2 } = value;
    if (id1 && id2) {
      return {
        ...value,
        width: 4,
        end1: { ...end1, color: nodeColorsDone[value.id1].color },
        end2: { ...end2, color: nodeColorsDone[value.id2].color },
      };
    }
    return value;
  });
  return linkStylesDone;
}

function createStyles() {
  return {
    node: {
      business: {
        ...style.primary0,
      },
      service: {
        ...style.primary1,
      },
      virtual: {
        ...style.primary2,
      },
      server: {
        ...style.cat10,
      },
      switch: {
        ...style.cat04,
      },
      san: {
        ...style.secondary1,
      },
      disk: {
        ...style.primary3,
      },
    },
  };
}

function rawData() {
  return {
    1: {
      label: { text: "Disk Drive 94", ...style.darkLabelBackground },
      type: "disk",
    },
    2: {
      label: { text: "Disk Drive 22", ...style.darkLabelBackground },
      type: "disk",
    },
    3: {
      label: { text: "Virtual Host 45", ...style.darkLabelBackground },
      type: "virtual",
    },
    4: {
      label: { text: "Service 42", ...style.darkLabelBackground },
      type: "service",
    },
    5: {
      label: { text: "Business Function 9", ...style.darkLabelBackground },
      type: "business",
    },
    6: {
      label: { text: "Service 36", ...style.darkLabelBackground },
      type: "service",
    },
    7: {
      label: { text: "Service 3", ...style.darkLabelBackground },
      type: "service",
    },
    8: {
      label: { text: "Virtual Host 2", ...style.darkLabelBackground },
      type: "virtual",
    },
    9: {
      label: { text: "Virtual Host 36", ...style.darkLabelBackground },
      type: "virtual",
    },
    10: {
      label: { text: "Disk Drive 45", ...style.darkLabelBackground },
      type: "disk",
    },
    11: {
      label: { text: "Disk Drive 24", ...style.darkLabelBackground },
      type: "disk",
    },
    12: {
      label: { text: "Disk Drive 62", ...style.darkLabelBackground },
      type: "disk",
    },
    13: {
      label: { text: "Disk Drive 27", ...style.darkLabelBackground },
      type: "disk",
    },
    14: {
      label: { text: "Switch 1", ...style.darkLabelBackground },
      type: "switch",
    },
    15: {
      label: { text: "Virtual Host 62", ...style.darkLabelBackground },
      type: "virtual",
    },
    16: {
      label: { text: "Service 6", ...style.darkLabelBackground },
      type: "service",
    },
    17: {
      label: { text: "Virtual Host 47", ...style.darkLabelBackground },
      type: "virtual",
    },
    18: {
      label: { text: "Virtual Host 25", ...style.darkLabelBackground },
      type: "virtual",
    },
    19: {
      label: { text: "Disk Drive 77", ...style.darkLabelBackground },
      type: "disk",
    },
    20: {
      label: { text: "Business Function 18", ...style.darkLabelBackground },
      type: "business",
    },
    21: {
      label: { text: "Virtual Host 0", ...style.darkLabelBackground },
      type: "virtual",
    },
    22: {
      label: { text: "Business Function 13", ...style.darkLabelBackground },
      type: "business",
    },
    23: {
      label: { text: "Disk Drive 81", ...style.darkLabelBackground },
      type: "disk",
    },
    24: {
      label: { text: "Virtual Host 7", ...style.darkLabelBackground },
      type: "virtual",
    },
    25: {
      label: { text: "Service 28", ...style.darkLabelBackground },
      type: "service",
    },
    26: {
      label: { text: "Virtual Host 1", ...style.darkLabelBackground },
      type: "virtual",
    },
    27: {
      label: { text: "Virtual Host 92", ...style.darkLabelBackground },
      type: "virtual",
    },
    28: {
      label: { text: "Disk Drive 90", ...style.darkLabelBackground },
      type: "disk",
    },
    29: {
      label: { text: "Disk Drive 8", ...style.darkLabelBackground },
      type: "disk",
    },
    30: {
      label: { text: "Disk Drive 21", ...style.darkLabelBackground },
      type: "disk",
    },
    31: {
      label: { text: "Business Function 7", ...style.darkLabelBackground },
      type: "business",
    },
    32: {
      label: { text: "Disk Drive 68", ...style.darkLabelBackground },
      type: "disk",
    },
    33: {
      label: { text: "Disk Drive 35", ...style.darkLabelBackground },
      type: "disk",
    },
    34: {
      label: { text: "Disk Drive 40", ...style.darkLabelBackground },
      type: "disk",
    },
    35: {
      label: { text: "Disk Drive 25", ...style.darkLabelBackground },
      type: "disk",
    },
    36: {
      label: { text: "Disk Drive 78", ...style.darkLabelBackground },
      type: "disk",
    },
    37: {
      label: { text: "Virtual Host 97", ...style.darkLabelBackground },
      type: "virtual",
    },
    38: {
      label: { text: "Virtual Host 20", ...style.darkLabelBackground },
      type: "virtual",
    },
    39: {
      label: { text: "Disk Drive 61", ...style.darkLabelBackground },
      type: "disk",
    },
    40: {
      label: { text: "Server 3", ...style.darkLabelBackground },
      type: "server",
    },
    41: {
      label: { text: "Disk Drive 60", ...style.darkLabelBackground },
      type: "disk",
    },
    42: {
      label: { text: "Service 45", ...style.darkLabelBackground },
      type: "service",
    },
    43: {
      label: { text: "Disk Drive 66", ...style.darkLabelBackground },
      type: "disk",
    },
    44: {
      label: { text: "Server 8", ...style.darkLabelBackground },
      type: "server",
    },
    45: {
      label: { text: "Business Function 4", ...style.darkLabelBackground },
      type: "business",
    },
    46: {
      label: { text: "Server 7", ...style.darkLabelBackground },
      type: "server",
    },
    47: {
      label: { text: "Virtual Host 49", ...style.darkLabelBackground },
      type: "virtual",
    },
    48: {
      label: { text: "Virtual Host 22", ...style.darkLabelBackground },
      type: "virtual",
    },
    49: {
      label: { text: "Disk Drive 57", ...style.darkLabelBackground },
      type: "disk",
    },
    50: {
      label: { text: "Disk Drive 12", ...style.darkLabelBackground },
      type: "disk",
    },
    51: {
      label: { text: "Virtual Host 37", ...style.darkLabelBackground },
      type: "virtual",
    },
    52: {
      label: { text: "Service 48", ...style.darkLabelBackground },
      type: "service",
    },
    53: {
      label: { text: "Disk Drive 72", ...style.darkLabelBackground },
      type: "disk",
    },
    54: {
      label: { text: "Virtual Host 60", ...style.darkLabelBackground },
      type: "virtual",
    },
    55: {
      label: { text: "Business Function 3", ...style.darkLabelBackground },
      type: "business",
    },
    56: {
      label: { text: "Disk Drive 18", ...style.darkLabelBackground },
      type: "disk",
    },
    57: {
      label: { text: "Virtual Host 69", ...style.darkLabelBackground },
      type: "virtual",
    },
    58: {
      label: { text: "Service 38", ...style.darkLabelBackground },
      type: "service",
    },
    59: {
      label: { text: "Virtual Host 5", ...style.darkLabelBackground },
      type: "virtual",
    },
    60: {
      label: { text: "Service 33", ...style.darkLabelBackground },
      type: "service",
    },
    61: {
      label: { text: "Disk Drive 79", ...style.darkLabelBackground },
      type: "disk",
    },
    62: {
      label: { text: "Disk Drive 11", ...style.darkLabelBackground },
      type: "disk",
    },
    63: {
      label: { text: "Server 9", ...style.darkLabelBackground },
      type: "server",
    },
    64: {
      label: { text: "Service 1", ...style.darkLabelBackground },
      type: "service",
    },
    65: {
      label: { text: "Virtual Host 8", ...style.darkLabelBackground },
      type: "virtual",
    },
    66: {
      label: { text: "Server 0", ...style.darkLabelBackground },
      type: "server",
    },
    67: {
      label: { text: "Business Function 15", ...style.darkLabelBackground },
      type: "business",
    },
    68: {
      label: { text: "Disk Drive 95", ...style.darkLabelBackground },
      type: "disk",
    },
    69: {
      label: { text: "Virtual Host 91", ...style.darkLabelBackground },
      type: "virtual",
    },
    70: {
      label: { text: "Disk Drive 17", ...style.darkLabelBackground },
      type: "disk",
    },
    71: {
      label: { text: "Virtual Host 44", ...style.darkLabelBackground },
      type: "virtual",
    },
    72: {
      label: { text: "Business Function 8", ...style.darkLabelBackground },
      type: "business",
    },
    73: {
      label: { text: "Disk Drive 87", ...style.darkLabelBackground },
      type: "disk",
    },
    74: {
      label: { text: "Disk Drive 91", ...style.darkLabelBackground },
      type: "disk",
    },
    75: {
      label: { text: "Virtual Host 38", ...style.darkLabelBackground },
      type: "virtual",
    },
    76: {
      label: { text: "Disk Drive 53", ...style.darkLabelBackground },
      type: "disk",
    },
    77: {
      label: { text: "Disk Drive 36", ...style.darkLabelBackground },
      type: "disk",
    },
    78: {
      label: { text: "Virtual Host 32", ...style.darkLabelBackground },
      type: "virtual",
    },
    79: {
      label: { text: "Service 31", ...style.darkLabelBackground },
      type: "service",
    },
    80: {
      label: { text: "Disk Drive 83", ...style.darkLabelBackground },
      type: "disk",
    },
    81: {
      label: { text: "Service 2", ...style.darkLabelBackground },
      type: "service",
    },
    82: {
      label: { text: "Virtual Host 12", ...style.darkLabelBackground },
      type: "virtual",
    },
    83: {
      label: { text: "Virtual Host 89", ...style.darkLabelBackground },
      type: "virtual",
    },
    84: {
      label: { text: "Virtual Host 80", ...style.darkLabelBackground },
      type: "virtual",
    },
    85: {
      label: { text: "Disk Drive 49", ...style.darkLabelBackground },
      type: "disk",
    },
    86: {
      label: { text: "Service 19", ...style.darkLabelBackground },
      type: "service",
    },
    87: {
      label: { text: "Service 30", ...style.darkLabelBackground },
      type: "service",
    },
    88: {
      label: { text: "Virtual Host 86", ...style.darkLabelBackground },
      type: "virtual",
    },
    89: {
      label: { text: "Service 4", ...style.darkLabelBackground },
      type: "service",
    },
    90: {
      label: { text: "Virtual Host 78", ...style.darkLabelBackground },
      type: "virtual",
    },
    91: {
      label: { text: "Business Function 19", ...style.darkLabelBackground },
      type: "business",
    },
    92: {
      label: { text: "Server 10", ...style.darkLabelBackground },
      type: "server",
    },
    93: {
      label: { text: "Disk Drive 85", ...style.darkLabelBackground },
      type: "disk",
    },
    94: {
      label: { text: "Server 12", ...style.darkLabelBackground },
      type: "server",
    },
    95: {
      label: { text: "Disk Drive 46", ...style.darkLabelBackground },
      type: "disk",
    },
    96: {
      label: { text: "Virtual Host 58", ...style.darkLabelBackground },
      type: "virtual",
    },
    97: {
      label: { text: "Business Function 10", ...style.darkLabelBackground },
      type: "business",
    },
    98: {
      label: { text: "Service 9", ...style.darkLabelBackground },
      type: "service",
    },
    99: {
      label: { text: "Server 4", ...style.darkLabelBackground },
      type: "server",
    },
    100: {
      label: { text: "Virtual Host 19", ...style.darkLabelBackground },
      type: "virtual",
    },
    101: {
      label: { text: "Disk Drive 4", ...style.darkLabelBackground },
      type: "disk",
    },
    102: {
      label: { text: "Virtual Host 55", ...style.darkLabelBackground },
      type: "virtual",
    },
    103: {
      label: { text: "Disk Drive 29", ...style.darkLabelBackground },
      type: "disk",
    },
    104: {
      label: { text: "Disk Drive 96", ...style.darkLabelBackground },
      type: "disk",
    },
    105: {
      label: { text: "Disk Drive 2", ...style.darkLabelBackground },
      type: "disk",
    },
    106: {
      label: { text: "Service 27", ...style.darkLabelBackground },
      type: "service",
    },
    107: {
      label: { text: "Service 49", ...style.darkLabelBackground },
      type: "service",
    },
    108: {
      label: { text: "Service 41", ...style.darkLabelBackground },
      type: "service",
    },
    109: {
      label: { text: "Virtual Host 30", ...style.darkLabelBackground },
      type: "virtual",
    },
    110: {
      label: { text: "Server 5", ...style.darkLabelBackground },
      type: "server",
    },
    111: {
      label: { text: "Virtual Host 27", ...style.darkLabelBackground },
      type: "virtual",
    },
    112: {
      label: { text: "Disk Drive 20", ...style.darkLabelBackground },
      type: "disk",
    },
    113: {
      label: { text: "Disk Drive 74", ...style.darkLabelBackground },
      type: "disk",
    },
    114: {
      label: { text: "Disk Drive 92", ...style.darkLabelBackground },
      type: "disk",
    },
    115: {
      label: { text: "Server 1", ...style.darkLabelBackground },
      type: "server",
    },
    116: {
      label: { text: "Virtual Host 70", ...style.darkLabelBackground },
      type: "virtual",
    },
    117: {
      label: { text: "Disk Drive 69", ...style.darkLabelBackground },
      type: "disk",
    },
    118: {
      label: { text: "Virtual Host 9", ...style.darkLabelBackground },
      type: "virtual",
    },
    119: {
      label: { text: "Virtual Host 68", ...style.darkLabelBackground },
      type: "virtual",
    },
    120: {
      label: { text: "Disk Drive 9", ...style.darkLabelBackground },
      type: "disk",
    },
    121: {
      label: { text: "Virtual Host 18", ...style.darkLabelBackground },
      type: "virtual",
    },
    122: {
      label: { text: "Business Function 14", ...style.darkLabelBackground },
      type: "business",
    },
    123: {
      label: { text: "Business Function 17", ...style.darkLabelBackground },
      type: "business",
    },
    124: {
      label: { text: "Disk Drive 58", ...style.darkLabelBackground },
      type: "disk",
    },
    125: {
      label: { text: "Disk Drive 86", ...style.darkLabelBackground },
      type: "disk",
    },
    126: {
      label: { text: "Virtual Host 23", ...style.darkLabelBackground },
      type: "virtual",
    },
    127: {
      label: { text: "Virtual Host 73", ...style.darkLabelBackground },
      type: "virtual",
    },
    128: {
      label: { text: "Virtual Host 59", ...style.darkLabelBackground },
      type: "virtual",
    },
    129: {
      label: { text: "Virtual Host 46", ...style.darkLabelBackground },
      type: "virtual",
    },
    130: {
      label: { text: "Service 15", ...style.darkLabelBackground },
      type: "service",
    },
    131: {
      label: { text: "Virtual Host 63", ...style.darkLabelBackground },
      type: "virtual",
    },
    132: {
      label: { text: "Service 5", ...style.darkLabelBackground },
      type: "service",
    },
    133: {
      label: { text: "Disk Drive 26", ...style.darkLabelBackground },
      type: "disk",
    },
    134: {
      label: { text: "Virtual Host 83", ...style.darkLabelBackground },
      type: "virtual",
    },
    135: {
      label: { text: "Disk Drive 28", ...style.darkLabelBackground },
      type: "disk",
    },
    136: {
      label: { text: "Virtual Host 82", ...style.darkLabelBackground },
      type: "virtual",
    },
    137: {
      label: { text: "Virtual Host 99", ...style.darkLabelBackground },
      type: "virtual",
    },
    138: {
      label: { text: "Virtual Host 4", ...style.darkLabelBackground },
      type: "virtual",
    },
    139: {
      label: { text: "Disk Drive 34", ...style.darkLabelBackground },
      type: "disk",
    },
    140: {
      label: { text: "Virtual Host 76", ...style.darkLabelBackground },
      type: "virtual",
    },
    141: {
      label: { text: "SAN Unit 2", ...style.darkLabelBackground },
      type: "san",
    },
    142: {
      label: { text: "Disk Drive 1", ...style.darkLabelBackground },
      type: "disk",
    },
    143: {
      label: { text: "Disk Drive 7", ...style.darkLabelBackground },
      type: "disk",
    },
    144: {
      label: { text: "Service 29", ...style.darkLabelBackground },
      type: "service",
    },
    145: {
      label: { text: "Virtual Host 77", ...style.darkLabelBackground },
      type: "virtual",
    },
    146: {
      label: { text: "Virtual Host 52", ...style.darkLabelBackground },
      type: "virtual",
    },
    147: {
      label: { text: "Disk Drive 89", ...style.darkLabelBackground },
      type: "disk",
    },
    148: {
      label: { text: "Disk Drive 64", ...style.darkLabelBackground },
      type: "disk",
    },
    149: {
      label: { text: "Service 8", ...style.darkLabelBackground },
      type: "service",
    },
    150: {
      label: { text: "Virtual Host 51", ...style.darkLabelBackground },
      type: "virtual",
    },
    151: {
      label: { text: "Virtual Host 74", ...style.darkLabelBackground },
      type: "virtual",
    },
    152: {
      label: { text: "Virtual Host 29", ...style.darkLabelBackground },
      type: "virtual",
    },
    153: {
      label: { text: "Service 47", ...style.darkLabelBackground },
      type: "service",
    },
    154: {
      label: { text: "Service 37", ...style.darkLabelBackground },
      type: "service",
    },
    155: {
      label: { text: "Virtual Host 61", ...style.darkLabelBackground },
      type: "virtual",
    },
    156: {
      label: { text: "Virtual Host 79", ...style.darkLabelBackground },
      type: "virtual",
    },
    157: {
      label: { text: "Virtual Host 95", ...style.darkLabelBackground },
      type: "virtual",
    },
    158: {
      label: { text: "Virtual Host 85", ...style.darkLabelBackground },
      type: "virtual",
    },
    159: {
      label: { text: "Disk Drive 48", ...style.darkLabelBackground },
      type: "disk",
    },
    160: {
      label: { text: "Disk Drive 3", ...style.darkLabelBackground },
      type: "disk",
    },
    161: {
      label: { text: "Virtual Host 21", ...style.darkLabelBackground },
      type: "virtual",
    },
    162: {
      label: { text: "Virtual Host 17", ...style.darkLabelBackground },
      type: "virtual",
    },
    163: {
      label: { text: "Disk Drive 14", ...style.darkLabelBackground },
      type: "disk",
    },
    164: {
      label: { text: "Service 26", ...style.darkLabelBackground },
      type: "service",
    },
    165: {
      label: { text: "Disk Drive 88", ...style.darkLabelBackground },
      type: "disk",
    },
    166: {
      label: { text: "Disk Drive 37", ...style.darkLabelBackground },
      type: "disk",
    },
    167: {
      label: { text: "Virtual Host 24", ...style.darkLabelBackground },
      type: "virtual",
    },
    168: {
      label: { text: "Virtual Host 84", ...style.darkLabelBackground },
      type: "virtual",
    },
    169: {
      label: { text: "Disk Drive 38", ...style.darkLabelBackground },
      type: "disk",
    },
    170: {
      label: { text: "Virtual Host 16", ...style.darkLabelBackground },
      type: "virtual",
    },
    171: {
      label: { text: "Disk Drive 31", ...style.darkLabelBackground },
      type: "disk",
    },
    172: {
      label: { text: "Disk Drive 0", ...style.darkLabelBackground },
      type: "disk",
    },
    173: {
      label: { text: "Virtual Host 14", ...style.darkLabelBackground },
      type: "virtual",
    },
    174: {
      label: { text: "Service 18", ...style.darkLabelBackground },
      type: "service",
    },
    175: {
      label: { text: "Disk Drive 56", ...style.darkLabelBackground },
      type: "disk",
    },
    176: {
      label: { text: "Disk Drive 97", ...style.darkLabelBackground },
      type: "disk",
    },
    177: {
      label: { text: "Service 43", ...style.darkLabelBackground },
      type: "service",
    },
    178: {
      label: { text: "Disk Drive 93", ...style.darkLabelBackground },
      type: "disk",
    },
    179: {
      label: { text: "Disk Drive 43", ...style.darkLabelBackground },
      type: "disk",
    },
    180: {
      label: { text: "Server 19", ...style.darkLabelBackground },
      type: "server",
    },
    181: {
      label: { text: "Disk Drive 75", ...style.darkLabelBackground },
      type: "disk",
    },
    182: {
      label: { text: "Disk Drive 55", ...style.darkLabelBackground },
      type: "disk",
    },
    183: {
      label: { text: "Switch 4", ...style.darkLabelBackground },
      type: "switch",
    },
    184: {
      label: { text: "Disk Drive 33", ...style.darkLabelBackground },
      type: "disk",
    },
    185: {
      label: { text: "Virtual Host 13", ...style.darkLabelBackground },
      type: "virtual",
    },
    186: {
      label: { text: "Disk Drive 67", ...style.darkLabelBackground },
      type: "disk",
    },
    187: {
      label: { text: "Server 17", ...style.darkLabelBackground },
      type: "server",
    },
    188: {
      label: { text: "Disk Drive 63", ...style.darkLabelBackground },
      type: "disk",
    },
    189: {
      label: { text: "Service 20", ...style.darkLabelBackground },
      type: "service",
    },
    190: {
      label: { text: "Disk Drive 51", ...style.darkLabelBackground },
      type: "disk",
    },
    191: {
      label: { text: "Disk Drive 32", ...style.darkLabelBackground },
      type: "disk",
    },
    192: {
      label: { text: "Disk Drive 65", ...style.darkLabelBackground },
      type: "disk",
    },
    193: {
      label: { text: "Virtual Host 11", ...style.darkLabelBackground },
      type: "virtual",
    },
    194: {
      label: { text: "Disk Drive 13", ...style.darkLabelBackground },
      type: "disk",
    },
    195: {
      label: { text: "Server 16", ...style.darkLabelBackground },
      type: "server",
    },
    196: {
      label: { text: "Service 32", ...style.darkLabelBackground },
      type: "service",
    },
    197: {
      label: { text: "Virtual Host 35", ...style.darkLabelBackground },
      type: "virtual",
    },
    198: {
      label: { text: "Service 25", ...style.darkLabelBackground },
      type: "service",
    },
    199: {
      label: { text: "Virtual Host 96", ...style.darkLabelBackground },
      type: "virtual",
    },
    200: {
      label: { text: "Switch 3", ...style.darkLabelBackground },
      type: "switch",
    },
    201: {
      label: { text: "Disk Drive 5", ...style.darkLabelBackground },
      type: "disk",
    },
    202: {
      label: { text: "Business Function 11", ...style.darkLabelBackground },
      type: "business",
    },
    203: {
      label: { text: "Virtual Host 41", ...style.darkLabelBackground },
      type: "virtual",
    },
    204: {
      label: { text: "Virtual Host 98", ...style.darkLabelBackground },
      type: "virtual",
    },
    205: {
      label: { text: "Disk Drive 42", ...style.darkLabelBackground },
      type: "disk",
    },
    206: {
      label: { text: "Virtual Host 26", ...style.darkLabelBackground },
      type: "virtual",
    },
    207: {
      label: { text: "Server 11", ...style.darkLabelBackground },
      type: "server",
    },
    208: {
      label: { text: "Service 17", ...style.darkLabelBackground },
      type: "service",
    },
    209: {
      label: { text: "Disk Drive 44", ...style.darkLabelBackground },
      type: "disk",
    },
    210: {
      label: { text: "Switch 2", ...style.darkLabelBackground },
      type: "switch",
    },
    211: {
      label: { text: "Service 40", ...style.darkLabelBackground },
      type: "service",
    },
    212: {
      label: { text: "Virtual Host 42", ...style.darkLabelBackground },
      type: "virtual",
    },
    213: {
      label: { text: "Disk Drive 73", ...style.darkLabelBackground },
      type: "disk",
    },
    214: {
      label: { text: "Business Function 1", ...style.darkLabelBackground },
      type: "business",
    },
    215: {
      label: { text: "Virtual Host 81", ...style.darkLabelBackground },
      type: "virtual",
    },
    216: {
      label: { text: "Disk Drive 50", ...style.darkLabelBackground },
      type: "disk",
    },
    217: {
      label: { text: "Virtual Host 56", ...style.darkLabelBackground },
      type: "virtual",
    },
    218: {
      label: { text: "Disk Drive 80", ...style.darkLabelBackground },
      type: "disk",
    },
    219: {
      label: { text: "Virtual Host 75", ...style.darkLabelBackground },
      type: "virtual",
    },
    220: {
      label: { text: "Virtual Host 94", ...style.darkLabelBackground },
      type: "virtual",
    },
    221: {
      label: { text: "Service 34", ...style.darkLabelBackground },
      type: "service",
    },
    222: {
      label: { text: "Service 22", ...style.darkLabelBackground },
      type: "service",
    },
    223: {
      label: { text: "Business Function 5", ...style.darkLabelBackground },
      type: "business",
    },
    224: {
      label: { text: "Virtual Host 93", ...style.darkLabelBackground },
      type: "virtual",
    },
    225: {
      label: { text: "Virtual Host 40", ...style.darkLabelBackground },
      type: "virtual",
    },
    226: {
      label: { text: "Disk Drive 98", ...style.darkLabelBackground },
      type: "disk",
    },
    227: {
      label: { text: "Server 2", ...style.darkLabelBackground },
      type: "server",
    },
    228: {
      label: { text: "Switch 0", ...style.darkLabelBackground },
      type: "switch",
    },
    229: {
      label: { text: "Virtual Host 65", ...style.darkLabelBackground },
      type: "virtual",
    },
    230: {
      label: { text: "Disk Drive 19", ...style.darkLabelBackground },
      type: "disk",
    },
    231: {
      label: { text: "SAN Unit 1", ...style.darkLabelBackground },
      type: "san",
    },
    232: {
      label: { text: "Virtual Host 28", ...style.darkLabelBackground },
      type: "virtual",
    },
    233: {
      label: { text: "Service 12", ...style.darkLabelBackground },
      type: "service",
    },
    234: {
      label: { text: "Service 11", ...style.darkLabelBackground },
      type: "service",
    },
    235: {
      label: { text: "Server 13", ...style.darkLabelBackground },
      type: "server",
    },
    236: {
      label: { text: "Disk Drive 16", ...style.darkLabelBackground },
      type: "disk",
    },

// ...truncated 2255 lines
<!doctype html>
<html>
  <body>
    <div id="regraph" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.