diff --git a/visualisers/gmvis/package-lock.json b/visualisers/gmvis/package-lock.json index 10903af..77e0e86 100644 --- a/visualisers/gmvis/package-lock.json +++ b/visualisers/gmvis/package-lock.json @@ -12,7 +12,8 @@ "react": "^18.3.0", "react-ace": "11.0.1", "react-dom": "18.3.0", - "react-resplit": "^1.3.1" + "react-resplit": "^1.3.1", + "react-tooltip": "^5.26.3" }, "devDependencies": { "shadow-cljs": "2.28.3" @@ -29,6 +30,28 @@ "node": ">=6.9.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dependencies": { + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", @@ -272,6 +295,11 @@ "safe-buffer": "^5.0.1" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/console-browserify": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz", @@ -1002,6 +1030,19 @@ "react-dom": ">=16" } }, + "node_modules/react-tooltip": { + "version": "5.26.3", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.26.3.tgz", + "integrity": "sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==", + "dependencies": { + "@floating-ui/dom": "^1.6.1", + "classnames": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/readable-stream": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", diff --git a/visualisers/gmvis/package.json b/visualisers/gmvis/package.json index 39e9816..48d5cea 100644 --- a/visualisers/gmvis/package.json +++ b/visualisers/gmvis/package.json @@ -1 +1 @@ -{"name":"gmvis","version":"0.0.1","private":true,"devDependencies":{"shadow-cljs":"2.28.3"},"dependencies":{"ace-builds":"^1.32.7","react":"^18.3.0","react-ace":"11.0.1","react-dom":"18.3.0","react-resplit":"^1.3.1"}} \ No newline at end of file +{"name":"gmvis","version":"0.0.1","private":true,"devDependencies":{"shadow-cljs":"2.28.3"},"dependencies":{"ace-builds":"^1.32.7","react":"^18.3.0","react-ace":"11.0.1","react-dom":"18.3.0","react-resplit":"^1.3.1","react-tooltip":"^5.26.3"}} \ No newline at end of file diff --git a/visualisers/gmvis/public/css/main.css b/visualisers/gmvis/public/css/main.css index 7c6aebf..c1b2232 100644 --- a/visualisers/gmvis/public/css/main.css +++ b/visualisers/gmvis/public/css/main.css @@ -30,8 +30,31 @@ body { margin: 0.5em } +.split-pane:has(> .stack-view) +{ display: flex +; flex-direction: column-reverse +} + .stack-view -{} +{ display: flex +; flex-direction: column-reverse +; align-content: flex-end +} + +.stack-view > .stack-entry:nth-of-type(odd) +{ background: #0000007f +} + +.stack-entry +{ display: flex +; flex-direction: row +; justify-content: space-between +} + +.stack-entry-addr +{ align-self: flex-end +; opacity: 70% +} .dump-view {} @@ -44,9 +67,9 @@ body } .code-view.instr -{ } +{} .code-view > .instr:nth-of-type(odd) -{ background: #00000032; +{ background: #0000007f } diff --git a/visualisers/gmvis/src/ui.cljs b/visualisers/gmvis/src/ui.cljs index 1b0a9fb..cb91b93 100644 --- a/visualisers/gmvis/src/ui.cljs +++ b/visualisers/gmvis/src/ui.cljs @@ -15,7 +15,7 @@ ;------------------------------------------------------------------------------; (def current-evaluation (r/atom [])) -(def current-index (r/atom 0)) +(def current-index (r/atom 5)) (def +split-width+ "4px") @@ -35,10 +35,6 @@ ;------------------------------------------------------------------------------; -(defn Stack [] - [:div {:class "pane-content stack-view"} - [:h1 "Stack"]]) - (defn Dump [] [:div {:class "pane-content dump-view"} [:h1 "Dump"]]) @@ -49,6 +45,41 @@ ;------------------------------------------------------------------------------; +(defn deref-addr [heap addr] + (get heap + (keyword (str addr)) + (str ""))) + +(defn words [& ws] + (->> ws + (map str) + (str/join \space))) + +(defn ppr-node [heap n] + (match n + {:tag "NGlobal" :contents [arity code]} + (words "Global" arity "") + + {:tag "NNum" :contents k} + (words "Num" k) + a (str "other" a))) + +(defn StackEntry [heap addr] + (let [node (deref-addr heap addr)] + [:div {:class "stack-entry"} + (ppr-node heap node) + [:div {:class "stack-entry-addr"} + (str "&" addr)]])) + +(defn Stack [heap s] + [:div {:class "pane-content stack-view"} + [:<> (map (partial StackEntry heap) s)]]) + +#_ (swap! current-index #(+ % 1)) +#_ (swap! current-index #(- % 1)) + +;------------------------------------------------------------------------------; + (defn ppr-instr [{op :tag c :contents}] (str op " " c)) @@ -62,7 +93,9 @@ ;------------------------------------------------------------------------------; -(defn GM [{code :_gmCode}] +(defn GM [{code :_gmCode + stack :_gmStack + heap :_gmHeap}] [Root {:direction "horizontal"} [Pane {:order 0 :initialSize "0.333fr"} [Heap]] @@ -70,7 +103,7 @@ [Pane {:order 2 :initialSize "0.333fr"} [Root {:direction "vertical"} [Pane {:order 0 :initialSize "0.8fr"} - [Stack]] + [Stack heap stack]] [Splitter {:order 1 :size +split-width+}] [Pane {:order 2 :initialSize "0.2fr"} [Code code]]]]