From d6d4b2013d9bd5c4bae5c060787f43a54b9b1c67 Mon Sep 17 00:00:00 2001 From: disconcision Date: Sun, 5 Jan 2025 23:35:37 -0500 Subject: [PATCH] telescope (ap) probes style --- src/haz3lcore/prog/Dynamics.re | 4 +- src/haz3lcore/zipper/projectors/ProbeProj.re | 85 +++++++++-------- .../www/img/noun-telescope-7245201.svg | 6 ++ .../www/img/noun-telescope-7441220.svg | 4 + src/haz3lweb/www/style/projectors/probe.css | 94 +++++++++++-------- 5 files changed, 115 insertions(+), 78 deletions(-) create mode 100644 src/haz3lweb/www/img/noun-telescope-7245201.svg create mode 100644 src/haz3lweb/www/img/noun-telescope-7441220.svg diff --git a/src/haz3lcore/prog/Dynamics.re b/src/haz3lcore/prog/Dynamics.re index 352a20d981..79ad337e33 100644 --- a/src/haz3lcore/prog/Dynamics.re +++ b/src/haz3lcore/prog/Dynamics.re @@ -63,6 +63,7 @@ module Probe = { [@deriving (show({with_path: false}), sexp, yojson)] type t = { closure_id: Id.t, /* Primary ID (Unique) */ + env_id: Id.t, /* To track across callstack */ value: DHExp.t, env: Env.t, stack: Probe.stack, @@ -71,10 +72,11 @@ module Probe = { let mk = (value: DHExp.t, env: ClosureEnvironment.t, pr: Probe.t) => { closure_id: Id.mk(), + env_id: ClosureEnvironment.id_of(env), value, + env: Env.mk(ClosureEnvironment.map_of(env), pr.refs), stack: ClosureEnvironment.stack_of(env), dyn_stack: ClosureEnvironment.dyn_stack_of(env), - env: Env.mk(ClosureEnvironment.map_of(env), pr.refs), }; }; diff --git a/src/haz3lcore/zipper/projectors/ProbeProj.re b/src/haz3lcore/zipper/projectors/ProbeProj.re index 61d6ad3410..90af070a97 100644 --- a/src/haz3lcore/zipper/projectors/ProbeProj.re +++ b/src/haz3lcore/zipper/projectors/ProbeProj.re @@ -45,6 +45,7 @@ let stack = stack => let env_cursor: ref(list(Id.t)) = ref([]); let last_target: ref(list('a)) = ref([]); let cur_ap: ref(option(Id.t)) = ref(Option.None); +let cur_ap_depth: ref(option(int)) = ref(Option.None); let mousedown: ref(option(Js.t(Dom_html.element))) = ref(Option.None); let comparor = (a: Dynamics.Probe.Closure.t, b: Dynamics.Probe.Closure.t) => { @@ -104,6 +105,7 @@ let value_view = env_cursor := Probe.env_stack(closure.stack); last_target := [target]; cur_ap := cur_ap_id(info); + cur_ap_depth := Some(List.length(closure.dyn_stack)); Effect.Ignore; }; @@ -145,6 +147,12 @@ let value_view = } ) @ (Option.is_some(cur_ap_id(info)) ? ["ap"] : []) + @ ( + switch (cur_ap_depth^) { + | Some(0) => ["top-ap"] + | _ => [] + } + ) @ (show_indicator(closure.stack) ? ["cursor"] : []), ), Attr.on_double_click(_ => local(ToggleShowAllVals)), @@ -162,7 +170,7 @@ let value_view = ); }; -let env_val = (en: Dynamics.Probe.Env.entry, utility: utility) => { +let env_val = (utility: utility, en: Dynamics.Probe.Env.entry) => { Node.div( ~attrs=[Attr.classes(["live-env-entry"])], [ @@ -188,14 +196,15 @@ let rm_opaques: /* Is the underlying syntax a variable reference? */ let is_var_ref = (info: info): bool => switch (info.statics) { - | Some(InfoExp({term: {term: Var(_), _}, _})) => true + | Some(InfoExp({term: {term: Var(_), _}, _})) + | Some(InfoPat({term: {term: Var(_), _}, _})) => true | _ => false }; let env_view = (closure: Dynamics.Probe.Closure.t, utility: utility): Node.t => Node.div( ~attrs=[Attr.classes(["live-env"])], - closure.env |> rm_opaques |> List.map(en => env_val(en, utility)), + closure.env |> ListUtil.dedup |> rm_opaques |> List.map(env_val(utility)), ); let closure_view = @@ -232,6 +241,36 @@ let offside_pos = utility => Printf.sprintf("position: absolute; left: %fpx;", utility.offside_offset), ); +let nav_back = (di, model, local, left_cond) => + List.length(di) > model.max_closures + ? [ + Node.div( + ~attrs=[ + Attr.classes( + ["closures-header"] @ (left_cond ? ["disabled"] : []), + ), + Attr.on_click(_ => left_cond ? Effect.Ignore : local(Offset(1))), + ], + [Node.text("<")], + ), + ] + : []; + +let nav_forward = (di, model, local, right_cond) => + List.length(di) > model.max_closures + ? [ + Node.div( + ~attrs=[ + Attr.classes( + ["closures-tail"] @ (right_cond ? ["disabled"] : []), + ), + Attr.on_click(_ => right_cond ? Effect.Ignore : local(Offset(-1))), + ], + [Node.text(">")], + ), + ] + : []; + let offside_view = (info, ~model: model, ~local, ~utility: utility) => { Node.div( ~attrs=[Attr.classes(["live-offside"]), offside_pos(utility)], @@ -240,40 +279,10 @@ let offside_view = (info, ~model: model, ~local, ~utility: utility) => { let vals = select_vals(model, di); let left_cond = model.index_offset >= List.length(di) - model.max_closures; - let hd = - List.length(di) > model.max_closures - ? [ - Node.div( - ~attrs=[ - Attr.classes( - ["closures-header"] @ (left_cond ? ["disabled"] : []), - ), - Attr.on_click(_ => - left_cond ? Effect.Ignore : local(Offset(1)) - ), - ], - [Node.text("<")], - ), - ] - : []; let right_cond = model.index_offset <= 0; - let tl = - List.length(di) > model.max_closures - ? [ - Node.div( - ~attrs=[ - Attr.classes( - ["closures-tail"] @ (right_cond ? ["disabled"] : []), - ), - Attr.on_click(_ => - right_cond ? Effect.Ignore : local(Offset(-1)) - ), - ], - [Node.text(">")], - ), - ] - : []; - hd @ tl @ List.map(closure_view(info, utility, model, local), vals); + nav_back(di, model, local, left_cond) + @ nav_forward(di, model, local, right_cond) + @ List.map(closure_view(info, utility, model, local), vals); | _ => [] }, ); @@ -317,7 +326,9 @@ let view = (model: model, ~info, ~local, ~parent as _, ~utility: utility) => { offside_view(info, ~model, ~local, ~utility), div( ~attrs=[ - Attr.classes(["main"]), + Attr.classes( + ["main"] @ (Option.is_some(cur_ap_id(info)) ? ["ap"] : []), + ), Attr.on_click(_ => { env_cursor := []; cur_ap := None; diff --git a/src/haz3lweb/www/img/noun-telescope-7245201.svg b/src/haz3lweb/www/img/noun-telescope-7245201.svg new file mode 100644 index 0000000000..7dd546ec55 --- /dev/null +++ b/src/haz3lweb/www/img/noun-telescope-7245201.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/haz3lweb/www/img/noun-telescope-7441220.svg b/src/haz3lweb/www/img/noun-telescope-7441220.svg new file mode 100644 index 0000000000..13f532480a --- /dev/null +++ b/src/haz3lweb/www/img/noun-telescope-7441220.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/haz3lweb/www/style/projectors/probe.css b/src/haz3lweb/www/style/projectors/probe.css index b24c5f1715..6a61ad8ff2 100644 --- a/src/haz3lweb/www/style/projectors/probe.css +++ b/src/haz3lweb/www/style/projectors/probe.css @@ -16,11 +16,10 @@ --pat-base: hsl(170, 40%, 85%); --exp-shadow: oklch(0.55 0.15 150); - --pat-shadow: oklch(0.50 0.10 245); + --pat-shadow: oklch(0.5 0.1 245); --exp-cell: hsl(115, 30%, 70%); --pat-cell: hsl(165, 30%, 70%); - } .projector.probe { @@ -61,6 +60,9 @@ background-size: cover; filter: invert(1) brightness(0.4) sepia(1) saturate(1.8) hue-rotate(75deg); } +.projector.probe .main.ap .icon { + background-image: url(../../img/noun-telescope-7245201.svg); +} .projector.probe.indicated .main .icon { filter: invert(1); } @@ -88,8 +90,10 @@ .projector.probe.selected .num-closures { background-color: var(--num-closures); } -.projector.probe.indicated.Right .num-closures { +.projector.probe.indicated .num-closures { background-color: var(--num-closures-indicated); +} +.projector.probe.indicated.Right .num-closures { right: -0.8em; top: -0.5em; } @@ -107,53 +111,74 @@ display: none; } -.projector.probe .closure:hover .live-env:empty { - display: none; -} - .projector.probe .val-resize { cursor: pointer; } +/* .projector.probe .closure:first-child .val-resize:hover .code-text { + cursor: col-resize; +} */ + +/* TOKEN BKG */ .projector.probe .val-resize .code-text { - background-color: var(--exp-cell); + background-color: var(--exp-base); border-bottom: 1px solid var(--exp-shadow); - border-radius: 0.3em 0.1em 0.1em 0.1em; + border-radius: 0.05em 0.05em 0.05em 0.2em; } .projector.probe.Pat .val-resize .code-text { border-color: var(--pat-shadow); + background-color: var(--pat-base); } -.projector.probe.Pat .val-resize .code-text { - background-color: var(--pat-cell); -} -/* .projector.probe .closure:first-child .val-resize:hover .code-text { - cursor: col-resize; -} */ +/* TOKEN OPACITY */ .projector.probe .val-resize.cursor .code-text { - filter: none; opacity: 100%; } -.projector.probe .val-resize.dyn-cursor .code-text { - filter: none; +.projector.probe .val-resize.dyn-cursor.cursor .code-text, +.projector.probe .val-resize.dyn-cursor.top-ap .code-text { + opacity: 100%; + outline: 1px solid var(--TYP); +} +.projector.probe .val-resize.dyn-cursor:not(.cursor):not(.top-ap) .code-text { opacity: 100%; - background-color: var(--exp-ap); + /* outline: 1px solid var(--TYP); */ + outline: 1px dotted var(--TYP); +} +.projector.probe .val-resize .code-text { + opacity: 51%; } .projector.probe .val-resize.dyn-cursor.light .code-text { + opacity: 45%; +} +.projector.probe.indicated .val-resize .code-text { opacity: 60%; } -.projector.probe.Pat .val-resize.dyn-cursor .code-text { - background-color: var(--pat-ap); +.projector.probe.indicated .val-resize.cursor .code-text { + opacity: 100%; + background: none; + outline: 2.8px solid var(--exp-indicated); } - -.projector.probe .val-resize .code-text { - opacity: 40%; +.projector.probe.indicated .val-resize.cursor.ap .code-text { + outline-color: var(--TYP); } -.projector.probe .val-resize .code-text:hover { - filter: brightness(1.05) saturate(1.05); +/* TOKENS */ +.projector.probe + .val-resize.dyn-cursor:not(.cursor):not(.top-ap) + .code-text + .token { + filter: invert(1) brightness(10); + /* color: var(--TYP); */ } -.projector.probe .val-resize:not(.cursor) .code-text .token { +.projector.probe .val-resize:not(.dyn-cursor):not(.cursor) .code-text .token { filter: invert(1) brightness(10); } +.projector.probe .val-resize.dyn-cursor.cursor .code-text .token, +.projector.probe .val-resize.dyn-cursor.top-ap .code-text .token { + color: var(--TYP); +} + +.projector.probe .val-resize .code-text:hover { + filter: brightness(1.05) saturate(1.05); +} .projector.probe .live-env { background-color: var(--live-env-bkg); @@ -178,23 +203,13 @@ .projector.probe.indicated.Pat > svg { fill: var(--pat-indicated); } - -.projector.probe.indicated .val-resize .code-text { - opacity: 60%; +.projector.probe.indicated:has(.main.ap) > svg { } .projector.probe.indicated .main { color: white; } -.projector.probe.indicated .val-resize.cursor .code-text { - opacity: 100%; - background: none; - outline: 2.8px solid var(--exp-indicated); -} -.projector.probe.indicated .val-resize.cursor.ap .code-text { - outline-color: var(--exp-ap); -} .projector.probe.indicated.Pat .val-resize.cursor .code-text { outline-color: var(--pat-indicated); } @@ -202,8 +217,7 @@ .projector.probe.indicated .closure:hover .live-env { display: block; } - -.projector.probe.indicated .closure.cursor .live-env:empty { +.projector.probe.indicated .closure:hover .live-env:empty { display: none; }