JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.5/go.js"></script>
<body>
  <div id="myDiagramDiv"></div>
  <table id="content-table">
    <tr>
      <th>Key</th>
      <th>Parent</th>
    </tr>
    <tr>
      <td class="level-0">1</td>
      <td>-</td>
    </tr>
    <tr>
      <td class="level-1">2</td>
      <td>1</td>
    </tr>
    <tr>
      <td class="level-1">3</td>
      <td>1</td>
    </tr>
    <tr>
      <td class="level-0">4</td>
      <td>-</td>
    </tr>
    <tr>
      <td class="level-1">5</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="level-1">6</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="level-1">7</td>
      <td>4</td>
    </tr>
    <tr>
      <td class="level-0">8</td>
      <td>-</td>
    </tr>
    <tr>
      <td class="level-1">9</td>
      <td>8</td>
    </tr>
    <tr>
      <td class="level-2">10</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="level-2">11</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="level-2">12</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="level-2">13</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="level-2">14</td>
      <td>9</td>
    </tr>
  </table>
  <div class="zoom-container">
    <span>Zoom:</span>
    <!--<button id="decrease" type="button" (click)="decreaseDiagram()">-</button>-->
    <button type="button" id="decrease">-</button>
    <span id="scale"></span>
    <button type="button" id="increase">+</button>

    <button type="button" id="switch">Switch model</button>

  </div>
  <div id="myOverviewDiv"></div>
</body>

SCSS

body {
  background-color: #3c3c3c;
  
  table, th, td {
    border: 1px solid black;
    color: white;
  }
  
  td {
    cursor: pointer;
  }
  
  td:last-child {
    text-align: right;
  }

  .level-0 {
    padding-left: 5px;
  }

  .level-1 {
    padding-left: 15px;
  }

  .level-2 {
    padding-left: 25px;
  }
  
  .zoom-container{
    span{
      color: white;
    }
  }
  
  #content-table {
    width:100px;
    height:350px; 
    display: inline-block;
  }
  
  #myDiagramDiv {
    border: solid 1px black; 
    width:450px; 
    height:350px; 
    display: inline-block
  }
  
  #myOverviewDiv {
    border: 1px solid #aeaeb5 !important;
    width:250px; 
    height:100px
  }
}

JavaScript

var myDiagram;
var $ = go.GraphObject.make;
var scale = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5];
var currentScale = 1;
var currentModel = 1;
var currentSelected = 1;
var key1Nodes = [
{
  "key": 1,
  "parent": 0,
  "id": "1",
  "name": "Key1"
}, {
  "key": 2,
  "parent": 1,
  "id": "2",
  "name": "Key2"
}, {
  "key": 3,
  "parent": 1,
  "id": "3",
  "name": "Key3"
}];
var key4Nodes = [
{
  "key": 4,
  "parent": 0,
  "id": "4",
  "name": "Key4"
}, {
  "key": 5,
  "parent": 4,
  "id": "5",
  "name": "Key5"
}, {
  "key": 6,
  "parent": 4,
  "id": "6",
  "name": "Key6"
}, {
  "key": 7,
  "parent": 4,
  "id": "7",
  "name": "Key7"
}];
var key8Nodes = [
{
  "key": 8,
  "parent": 0,
  "id": "8",
  "name": "Key8"
}, {
  "key": 9,
  "parent": 8,
  "id": "9",
  "name": "Key9"
}, {
  "key": 10,
  "parent": 9,
  "id": "10",
  "name": "Key10"
}, {
  "key": 11,
  "parent": 9,
  "id": "11",
  "name": "Key11"
}, {
  "key": 12,
  "parent": 9,
  "id": "12",
  "name": "Key12"
}, {
  "key": 13,
  "parent": 9,
  "id": "13",
  "name": "Key13"
}, {
  "key": 14,
  "parent": 9,
  "id": "14",
  "name": "Key14"
}];
document.getElementById("scale").innerHTML = '100%';

init();

document.getElementById("decrease").onclick = function() {
  var currentIndexScale = scale.indexOf(currentScale);
  if (currentIndexScale === 0) {
    return;
  }
  currentScale = scale[currentIndexScale - 1];
  myDiagram.scale = currentScale;
  document.getElementById("scale").innerHTML = `${currentScale*100}%`;
}
document.getElementById("increase").onclick = function() {
  var currentIndexScale = scale.indexOf(currentScale);
  if (currentIndexScale === scale.length - 1) {
    return;
  }
  currentScale = scale[currentIndexScale + 1];
  myDiagram.scale = currentScale;
  document.getElementById("scale").innerHTML = `${currentScale*100}%`;
}
var table = document.getElementById("content-table");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
  var currentRow =...