expose configuration options of Graphviz, make cfg zoomable and fitting in size

Author: stilscher

src/Graphviz.mli

@@ -1,26 +1,44 @@
+open Js_of_ocaml
+
 val makeProps :
-     dot:Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t
+     dot: Js.js_string Js.t
+  -> options: <fit: bool Js.t Js.readonly_prop
+        ; height: Js.js_string Js.t
+        ; width: Js.js_string Js.t
+        ; zoom: bool Js.t Js.readonly_prop > Js.t
+  -> className: Js.js_string Js.t
   -> unit
-  -> < dot:
-         Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t Js_of_ocaml.Js.readonly_prop >
-     Js_of_ocaml.Js.t
+  -> < dot: Js.js_string Js.t Js.readonly_prop
+        ; options: <fit: bool Js.t Js.readonly_prop
+          ; height: Js.js_string Js.t
+          ; width: Js.js_string Js.t
+          ; zoom: bool Js.t Js.readonly_prop > Js.t Js.readonly_prop
+        ; className: Js.js_string Js.t Js.readonly_prop > Js.t
   [@@js.custom
-    let makeProps ~dot () =
+    let makeProps ~dot ~options ~className () =
       object%js
         val dot = dot
+        val options = options
+        val className = className
       end]
 
 val make :
-  < dot: Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t Js_of_ocaml.Js.readonly_prop >
-  Js_of_ocaml.Js.t
+  < dot: Js.js_string Js.t Js.readonly_prop
+    ; options: <fit: bool Js.t Js.readonly_prop
+      ; height: Js.js_string Js.t
+      ; width: Js.js_string Js.t
+      ; zoom: bool Js.t Js.readonly_prop > Js.t Js.readonly_prop
+    ; className: Js.js_string Js.t Js.readonly_prop > Js.t
   React.component
   [@@js.custom
     external to_component :
          Ojs.t
-      -> < dot:
-             Js_of_ocaml.Js.js_string Js_of_ocaml.Js.t
-             Js_of_ocaml.Js.readonly_prop >
-         Js_of_ocaml.Js.t
+      -> < dot: Js.js_string Js.t Js.readonly_prop
+            ; options: <fit: bool Js.t Js.readonly_prop
+              ; height: Js.js_string Js.t
+              ; width: Js.js_string Js.t
+              ; zoom: bool Js.t Js.readonly_prop > Js.t Js.readonly_prop
+            ; className: Js.js_string Js.t Js.readonly_prop > Js.t
          React.component = "%identity"
 
     val make_internal : Ojs.t [@@js.global "Graphviz"]

src/Main.re

@@ -61,7 +61,7 @@ let make = (~cil, ~goblint, ~warnings, ~meta, ~stats, ~file_loc) => {
         cil={state.cil}
       />
     </div>
-    <div className="col-6 d-flex flex-column">
+    <div className="col-6 d-flex flex-column h-100">
       {switch (state.display) {
       | None => <div className="d-flex flex-column h-75 overflow-auto p-4" />
       | Some(f) => <Content state display=f dispatch />

src/stylesheet.scss

@@ -186,3 +186,8 @@ ol, ul {
 .main {
   padding-top: 48px;
 }
+
+.fun-cfg {
+  min-height: 0;
+  flex-grow: 1;
+}

src/ui/content/Content.re

@@ -8,18 +8,18 @@ let make = (~state: State.t, ~display: GvDisplay.t, ~dispatch) => {
     | _ => None
     };
 
-  <div className="d-flex flex-column h-75 overflow-auto p-4">
+  <div className="d-flex flex-column h-75 p-4">
     <GvBreadcrumb display={state.display} dispatch />
     {switch display {
-     | File(file) =>
-       <GvFileView
-         goblint={state.goblint}
-         warnings={state.warnings}
-         file
-         line
-         dispatch
-       />
-     | Func(func) => <GvFuncView func dispatch />
-     }}
+    | File(file) =>
+      <GvFileView
+        goblint={state.goblint}
+        warnings={state.warnings}
+        file
+        line
+        dispatch
+      />
+    | Func(func) => <GvFuncView func dispatch />
+    }}
   </div>;
 };

src/ui/content/gvFuncView.re

@@ -25,7 +25,15 @@ let make = (~func: GvDisplay.func, ~dispatch) => {
         "Cannot display the function graph. The generated DOT file is probably too large."
         |> Js.string
       }>
-      <Graphviz dot={dot |> Js.string} />
+      <Graphviz
+        dot={dot |> Js.string}
+        options={Js.Unsafe.obj([|
+          ("height", Js.Unsafe.inject("100%")),
+          ("width", Js.Unsafe.inject("100%")),
+          ("zoom", Js.Unsafe.inject(true)),
+        |])}
+        className={"fun-cfg" |> Js.string}
+      />
     </ErrorBoundary>
   | _ => React.null
   };