feat(srcts): Show edge line styles in the legend

NEWS.md

@@ -2,6 +2,8 @@
 
 - `reactlog_show()` now uses `shiny::reactlog()` as its default `log`, so `reactlog_show()` works with no arguments after running an app (#91)
 
+- The graph legend now shows that a solid line is a dependency, a dashed line is an `isolate()`d dependency, and a dotted line is an inactive dependency (one that existed earlier but is not active at the current step) (#76)
+
 - Migrated project license from GPL-3 to the MIT License.
 
 - Documented that `reactlog_show()` passes `...` on to `reactlog_render()`, so `session_token` can be set from `reactlog_show()`. The docs used to say `...` was ignored (#120)

inst/reactlog/reactlog.html

@@ -64,6 +64,9 @@
         <div class="legendRow legendRowTopMiddle"><div id="legendInvalidating" class="legendColor"></div><div class="legendLabel">Invalidating</div></div>
         <div class="legendRow" id="legendRowInvalidated"><div id="legendInvalidated" class="legendColor"></div><div class="legendLabel">Invalidated</div></div>
         <div class="legendRow" id="legendRowFrozen" style="display:none"><div id="legendFrozen" class="legendColor"></div><div class="legendLabel">Frozen</div></div>
+        <div class="legendRow legendRowTopMiddle legendRowSection"><div id="legendDependency" class="legendLine"></div><div class="legendLabel">Dependency</div></div>
+        <div class="legendRow"><div id="legendIsolate" class="legendLine"></div><div class="legendLabel">Isolated dependency</div></div>
+        <div class="legendRow"><div id="legendGhost" class="legendLine"></div><div class="legendLabel">Inactive dependency</div></div>
       </div>
       <div id="logEntry" style="display: none;"></div>
     </div>

inst/reactlog/reactlogAsset/reactlog.css

@@ -289,6 +289,20 @@ text {
   min-height: 14px;
   border-radius: 2px;
 }
+.legendRowSection {
+  margin-top: 12px;
+}
+.legendLine {
+  border-top: 2px solid;
+  width: 14px;
+  min-width: 14px;
+}
+#legendIsolate {
+  border-top-style: dashed;
+}
+#legendGhost {
+  border-top-style: dotted;
+}
 .legendLabel {
   -ms-flex-preferred-size: 0;
   flex: 0 0 auto;

srcts/index.ts

@@ -67,6 +67,9 @@ $(function () {
   $("#legendInvalidated").css("background-color", colors.nodes.invalidated);
   $("#legendCalculating").css("background-color", colors.nodes.calculating);
   $("#legendReady").css("background-color", colors.nodes.ready);
+  $("#legendDependency").css("border-top-color", colors.edges.running);
+  $("#legendIsolate").css("border-top-color", colors.edges.isolate);
+  $("#legendGhost").css("border-top-color", colors.ghostEdges.default);
   {
     // display the frozen legend item only if a frozen state exists
     let entry;