minimal code

visualisers/gmvis/public/css/main.css

@@ -30,3 +30,23 @@ body
 { margin: 0.5em
 }
 
+.stack-view
+{}
+
+.dump-view
+{}
+
+.heap-view
+{}
+
+.code-view
+{ display: grid
+}
+
+.code-view.instr
+{ }
+
+.code-view > .instr:nth-of-type(odd)
+{ background: #00000032;
+}
+

visualisers/gmvis/src/ui.cljs

@@ -36,24 +36,33 @@
 ;------------------------------------------------------------------------------;
 
 (defn Stack []
-  [:div {:class "pane-content"}
+  [:div {:class "pane-content stack-view"}
    [:h1 "Stack"]])
 
 (defn Dump []
-  [:div {:class "pane-content"}
+  [:div {:class "pane-content dump-view"}
    [:h1 "Dump"]])
 
 (defn Heap []
-  [:div {:class "pane-content"}
+  [:div {:class "pane-content heap-view"}
    [:h1 "Heap"]])
 
-(defn Code []
-  [:div {:class "pane-content"}
-   [:h1 "Code"]])
-
 ;------------------------------------------------------------------------------;
 
-(defn GM [{st :st}]
+(defn ppr-instr [{op :tag c :contents}]
+  (str op " " c))
+
+(defn Instr [instr]
+  [:code {:class "instr"}
+   (ppr-instr instr)])
+
+(defn Code [code]
+  [:div {:class "pane-content code-view"}
+   [:<> (map Instr code)]])
+
+;------------------------------------------------------------------------------;
+
+(defn GM [{code :_gmCode}]
   [Root {:direction "horizontal"}
    [Pane {:order 0 :initialSize "0.333fr"}
     [Heap]]
@@ -64,7 +73,7 @@
       [Stack]]
      [Splitter {:order 1 :size +split-width+}]
      [Pane {:order 2 :initialSize "0.2fr"}
-      [Code]]]]
+      [Code code]]]]
    [Splitter {:order 3 :size +split-width+}]
     [Pane {:order 5 :initialSize "0.333fr"}
      [Dump]]])
@@ -75,6 +84,6 @@
   (if-let [st (nth @current-evaluation
                    @current-index
                    nil)]
-    [GM {:st st}]
+    [GM st]
     [:h1 "no evaluation"]))