Local view network chart

Impressive software, just way too expensive in my opinion.

by saurabhkolhe

HTML

<script src="https://gojs.net/latest/release/go.js"></script>
<script src="https://gojs.net/latest/extensions/RadialLayout.js"></script>
<div id="sample">
  <div id="fullDiagram" style="border: solid 1px black; width:100%; height:200px"></div>
</div>
<div id="sample">
  <div id="localDiagram" style="border: solid 1px black; width:100%; height:650px"></div>
</div>

<! This is tree layout >

JavaScript

init();

function init() {
  const $ = go.GraphObject.make;

  myFullDiagram =
    new go.Diagram("fullDiagram",
      {
        initialAutoScale: go.Diagram.Uniform,
        contentAlignment: go.Spot.Center,
        isReadOnly: true,
        "animationManager.isEnabled": false,
        layout: $(go.TreeLayout, {
          angle: 90,
          sorting: go.TreeLayout.SortingAscending
        }),
        maxSelectionCount: 1,
        "ChangedSelection": showLocalOnFullClick
      });

  myLocalDiagram = 
    new go.Diagram("localDiagram", {
      initialAutoScale: go.Diagram.UniformToFill,
      contentAlignment: go.Spot.Center,
      isReadOnly: true,
      "animationManager.isInitial": false,
      layout: $(go.TreeLayout, {
        angle: 90,
        sorting: go.TreeLayout.SortingAscending
      }),
      "LayoutCompleted": e => {
        var sel = e.diagram.selection.first();
        if (sel !== null) myLocalDiagram.scrollToRect(sel.actualBounds);
      },
      maxSelectionCount: 1,
     
      "ChangedSelection": showLocalOnLocalClick
    });
  var myNodeTemplate =
    $(go.Node, "Auto", {
        locationSpot: go.Spot.Center
      },
      new go.Binding("text", "key", go.Binding.toString), // for sorting
      $(go.Shape, "Rectangle",
        new go.Binding("fill", "color"), {
          stroke: null
        }),
      $(go.TextBlock, {
          margin: 5
        },
        new go.Binding("text", "key", k => "node" + k))
    );
  myFullDiagram.nodeTemplate = myNodeTemplate;
  myLocalDiagram.nodeTemplate = myNodeTemplate;

  // Define a basic link template, not selectable, shared by both diagrams
  var myLinkTemplate =
    $(go.Link, {
        routing: go.Link.Normal,
        selectable: false
      },
      $(go.Shape, {
        strokeWidth: 1
      })
    );
  myFullDiagram.linkTemplate = myLinkTemplate;
  myLocalDiagram.linkTemplate = myLinkTemplate;

  setupDiagram(100);
  highlighter =
    $(go.Part, "Auto", {
        layerName: "Background",
       ...