Skip to content

Commit

Permalink
telescope (ap) probes style
Browse files Browse the repository at this point in the history
  • Loading branch information
@disconcision
disconcision committed Jan 6, 2025
1 parent b4ddee2 commit d6d4b20
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 78 deletions.
4 changes: 3 additions & 1 deletion src/haz3lcore/prog/Dynamics.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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),
};
};

Expand Down
85 changes: 48 additions & 37 deletions src/haz3lcore/zipper/projectors/ProbeProj.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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;
};

Expand Down Expand Up @@ -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)),
Expand All @@ -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"])],
[
Expand All @@ -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 =
Expand Down Expand Up @@ -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)],
Expand All @@ -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);
| _ => []
},
);
Expand Down Expand Up @@ -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;
Expand Down
6 changes: 6 additions & 0 deletions src/haz3lweb/www/img/noun-telescope-7245201.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/haz3lweb/www/img/noun-telescope-7441220.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 54 additions & 40 deletions src/haz3lweb/www/style/projectors/probe.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
Expand All @@ -178,32 +203,21 @@
.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);
}

.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;
}

Expand Down

0 comments on commit d6d4b20

Please sign in to comment.