Make the trace viewer easier to use for large graphs.

diff --git a/src/FormView.css b/src/FormView.css
index fbd10ac25bbd6261587c70aa70adb80565028d9b..660c464a81b5119cdab65c3d9dbfd859aa39d359 100644 (file)
--- 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 823b14bd465671b956142bc2bf00d1d2b829df87..b9cede6b391284f3c7141327b9ee357bf511e3fa 100644 (file)
--- 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>
   );