rivet/rivet_graph.html at main · TheSpaceEgg/rivet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rivet System Architecture</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; }
        #graph { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
        svg { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <div id="graph">Loading Diagram...</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js"></script>
    <script>
        var dotLines = `digraph RivetArchitecture {
  rankdir=LR;
  node [fontname="Arial", shape=box, style=filled, fillcolor=white];
  edge [fontname="Arial", fontsize=10];
  graph [style=filled, fillcolor="#eeeeee"];

  subgraph cluster_CommandCenter {
    label = "CommandCenter : GroundControl";
    style = rounded;
    color = black;
    bgcolor = white;
    CommandCenter [label="CommandCenter", shape=component, fillcolor="#d0e0ff"];
    CommandCenter__hb [label="sys/hb\n<int>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    CommandCenter__ready [label="sys/ready\n<bool>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    CommandCenter__gate [label="sys/gate\n<bool>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    CommandCenter__ping [label="sys/ping\n<int>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    CommandCenter__fping [label="sys/fping\n<float>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    CommandCenter__msg [label="sys/msg\n<string>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    CommandCenter__stage [label="sys/stage\n<int>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
  }

  subgraph cluster_MathHarness {
    label = "MathHarness : DataCollector";
    style = rounded;
    color = black;
    bgcolor = white;
    MathHarness [label="MathHarness", shape=component, fillcolor="#d0e0ff"];
    MathHarness__done [label="math/done\n<bool>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
    MathHarness__score [label="math/score\n<int>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
  }

  subgraph cluster_ModeWatcher {
    label = "ModeWatcher : Monitor";
    style = rounded;
    color = black;
    bgcolor = white;
    ModeWatcher [label="ModeWatcher", shape=component, fillcolor="#d0e0ff"];
    ModeWatcher__seen [label="watch/seen\n<int>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
  }

  subgraph cluster_LoggerNode {
    label = "LoggerNode : DataRecorder";
    style = rounded;
    color = black;
    bgcolor = white;
    LoggerNode [label="LoggerNode", shape=component, fillcolor="#d0e0ff"];
    LoggerNode__lines [label="log/lines\n<int>", shape=ellipse, style=filled, fillcolor="#ddffdd"];
  }
    CommandCenter -> CommandCenter__gate [color=blue];
  CommandCenter__ready -> MathHarness [color=green];
  CommandCenter__ping -> MathHarness [color=green];
  CommandCenter__fping -> MathHarness [color=green];
  CommandCenter__stage -> MathHarness [color=green];
  CommandCenter__msg -> MathHarness [color=green];
    MathHarness -> MathHarness__done [color=blue];
  CommandCenter__msg -> ModeWatcher [color=green];
  CommandCenter__gate -> ModeWatcher [color=green];
  MathHarness__done -> ModeWatcher [color=green];
  MathHarness__score -> ModeWatcher [color=green];
    ModeWatcher -> ModeWatcher__seen [color=blue];
    ModeWatcher -> ModeWatcher__seen [color=blue];
  CommandCenter__hb -> LoggerNode [color=green];
  CommandCenter__ready -> LoggerNode [color=green];
  CommandCenter__ping -> LoggerNode [color=green];
  CommandCenter__fping -> LoggerNode [color=green];
  CommandCenter__msg -> LoggerNode [color=green];
  CommandCenter__gate -> LoggerNode [color=green];
  CommandCenter__stage -> LoggerNode [color=green];
  MathHarness__done -> LoggerNode [color=green];
  MathHarness__score -> LoggerNode [color=green];
  ModeWatcher__seen -> LoggerNode [color=green];
    CommandCenter -> CommandCenter [style=dashed, label="boot"];
    CommandCenter -> CommandCenter__hb [color=blue];
    CommandCenter -> CommandCenter__msg [color=blue];
    CommandCenter -> CommandCenter__gate [color=blue];
    CommandCenter -> CommandCenter__stage [color=blue];
    CommandCenter -> CommandCenter__ready [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__fping [color=blue];
    CommandCenter -> CommandCenter__fping [color=blue];
    CommandCenter -> CommandCenter__stage [color=blue];
    CommandCenter -> CommandCenter [style=dashed, label="flipGate"];
    CommandCenter -> CommandCenter [style=dashed, label="toActive"];
    CommandCenter -> CommandCenter__hb [color=blue];
    CommandCenter -> CommandCenter__msg [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__fping [color=blue];
    CommandCenter -> CommandCenter__fping [color=blue];
    CommandCenter -> CommandCenter__stage [color=blue];
    CommandCenter -> CommandCenter [style=dashed, label="flipGate"];
    CommandCenter -> CommandCenter [style=dashed, label="toDiag"];
    CommandCenter -> CommandCenter__hb [color=blue];
    CommandCenter -> CommandCenter__msg [color=blue];
    CommandCenter -> CommandCenter__stage [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__ping [color=blue];
    CommandCenter -> CommandCenter__fping [color=blue];
    CommandCenter -> CommandCenter__fping [color=blue];
    CommandCenter -> CommandCenter [style=dashed, label="toSafe"];
    CommandCenter -> CommandCenter__hb [color=blue];
    CommandCenter -> CommandCenter__msg [color=blue];
    CommandCenter -> CommandCenter__gate [color=blue];
    CommandCenter -> CommandCenter__stage [color=blue];
    MathHarness -> MathHarness__score [color=blue];
    MathHarness -> MathHarness__score [color=blue];
    MathHarness -> MathHarness__score [color=blue];
}
`;
        var viz = new Viz();
        viz.renderSVGElement(dotLines)
            .then(function(element) {
                var container = document.getElementById("graph");
                container.innerHTML = "";
                container.appendChild(element);
            })
            .catch(function(error) {
                console.error(error);
                document.getElementById("graph").innerHTML =
                    "<h3 style='color:red'>Error rendering graph</h3><pre>" + error + "</pre>";
            });
    </script>
</body>
</html>