Merge pull request #20 from goblint/layout-usability-changes

Some layout/UI improvements for better usability

Author: stilscher

README.md

@@ -1,5 +1,10 @@
-# Web Frontend for Goblint
+# GobView
 
-Originally developed by Alex Micheli for his Bachelor's thesis at TUM i2.
+A Web Frontend for Goblint.
 
-Based on [jsoo-react](https://github.com/jchavarri/jsoo-react).
+It allows inspecting the analyzed files and results of an analysis run with Goblint.
+It is based on [jsoo-react](https://github.com/jchavarri/jsoo-react) and was originally developed by Alex Micheli for his Bachelor's thesis at TUM i2, significantly extended by Kerem Cakirer, and is now maintained by the Goblint team.
+
+## Installing
+
+Follow the instructions in the [Read the Docs](https://goblint.readthedocs.io/en/latest/user-guide/inspecting/).

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>Gobview</title>
+  <title>GobView</title>
 
   <link rel="icon" href="https://avatars.githubusercontent.com/u/917621?s=96&v=4"/>
 </head>

src/Content.re

@@ -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/DeadCodeView.re

@@ -49,19 +49,33 @@ let make = (~cil, ~goblint, ~warnings, ~meta, ~stats, ~file_loc) => {
   );
 
   <div className="container-fluid">
-    <div className="row">
-      <div className="col-3 border-end overflow-auto vh-100">
-        <Sidebar
-          active={state.selected_sidebar}
+  <header className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap shadow p-1">
+    <div className="navbar-brand mx-2" >{React.string("Gobview")}</div>
+  </header>
+  <div className="main row vh-100">
+    <div className="col-3 border-end overflow-auto bg-light py-2 h-100">
+      <SidebarLeft
+        active={state.selected_sidebar_left}
+        dispatch
+        search={state.search}
+        cil={state.cil}
+      />
+    </div>
+    <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 />
+      }}
+      <Panel state dispatch />
+    </div>
+    <div className="col-3 border-start overflow-auto py-2 h-100">
+        <SidebarRight
+          active={state.selected_sidebar_right}
           goblint
           inspect={state.inspect}
           dispatch
         />
-      </div>
-      <div className="col-9 d-flex flex-column vh-100">
-        <Content state dispatch />
-        <Panel state dispatch />
-      </div>
     </div>
+  </div>
   </div>;
 };

src/Graphviz.mli

@@ -10,6 +10,13 @@ module Message = struct
     | Single p -> loc p
     | Group { pieces; _ } -> pieces |> List.filter_map loc |> List.enum |> Enum.get
 
+  let severity_to_bs_alert m = match m.severity with
+    | Error -> "alert-danger"
+    | Warning -> "alert-warning"
+    | Info -> "alert-info"
+    | Debug -> "alert-light"
+    | Success -> "alert-success"
+
   let to_string msg =
     let out = IO.output_string () in
     let fmt = Format.formatter_of_output out in

src/Main.re

@@ -1,5 +1,6 @@
 let reducer (s : State.t) = function
-  | `SwitchSidebar selected_sidebar -> { s with selected_sidebar }
+  | `SwitchSidebarLeft selected_sidebar_left -> { s with selected_sidebar_left }
+  | `SwitchSidebarRight selected_sidebar_right -> { s with selected_sidebar_right }
   | `SwitchPanel selected_panel -> { s with selected_panel }
   | (`DisplayNothing | `DisplayFile _ | `DisplayFunc _ | `UpdateFileContents _ | `UpdateFuncDot _)
     as a ->