From fc0bce106adbb6ae320b8375c55deb29b7629256 Mon Sep 17 00:00:00 2001
From: Robert Sesek <rsesek@bluestatic.org>
Date: Mon, 16 Mar 2020 23:58:12 -0400
Subject: [PATCH] Make the trace viewer easier to use for large graphs.

---
 src/FormView.css |  7 +++++++
 src/FormView.tsx | 13 ++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/FormView.css b/src/FormView.css
index fbd10ac..660c464 100644
--- a/src/FormView.css
+++ b/src/FormView.css
@@ -73,6 +73,9 @@
   background-color: #fffdf1;
   padding: 10px;
   border: 1px solid red;
+  box-sizing: border-box;
+  width: var(--form-width);
+  margin: 0 auto;
 }
 
 .trace-viewer h2 {
@@ -88,3 +91,7 @@
   border: 1px solid #444;
   padding: 4px;
 }
+
+.large {
+  width: auto;
+}
diff --git a/src/FormView.tsx b/src/FormView.tsx
index 823b14b..b9cede6 100644
--- a/src/FormView.tsx
+++ b/src/FormView.tsx
@@ -71,7 +71,7 @@ function LineView(props: LineProps) {
         <div class={S.value}>{value()}</div>
       </div>
       <Show when={state.showTrace}>
-        <TraceViewer line={line} trace={state.trace} />
+        <TraceViewer line={line} trace={state.trace} onClose={() => setState('showTrace', false)} />
       </Show>
     </>
   );
@@ -80,6 +80,8 @@ function LineView(props: LineProps) {
 interface TraceProps {
   line: Line<any>;
   trace: readonly Edge[];
+
+  onClose: () => void;
 }
 
 function TraceViewer(props: TraceProps) {
@@ -89,11 +91,16 @@ function TraceViewer(props: TraceProps) {
       graph += `"${edge[1]}" -> "${edge[0]}"; `;
     }
     graphviz(ref)
-      .renderDot(`digraph { ${graph} }`);
+      .zoomScaleExtent([0.1, 1])
+      .renderDot(`digraph { ${graph} }`, () => {
+        if (ref.querySelector('svg').clientWidth > ref.parentNode.clientWidth) {
+          ref.parentNode.classList.add(S.large);
+        }
+      });
   };
   return (
     <div class={S.traceViewer}>
-      <h2>Trace {props.line.id}</h2>
+      <h2>Trace {props.line.id}  <button class={S.close} onclick={props.onClose}>\u24E7</button></h2>
       <div forwardRef={renderGraph}></div>
     </div>
   );
-- 
2.22.5