Skip to content

Commit 59010fa

Browse files
janoshjanosh
committed
add CmdPalette invoked with cmd+k for keyboard-only site navigation
1 parent cddda31 commit 59010fa

File tree

6 files changed

+98
-30
lines changed

6 files changed

+98
-30
lines changed

‎scripts/hist_classified_stable_vs_hull_dist_models.py

+9-13
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,7 @@
1111

1212
from matbench_discovery import ROOT, STATIC, today
1313
from matbench_discovery.plots import hist_classified_stable_vs_hull_dist, plt
14-
from matbench_discovery.preds import (
15-
df_metrics,
16-
df_wbm,
17-
e_form_col,
18-
each_true_col,
19-
models,
20-
)
14+
from matbench_discovery.preds import df_metrics, df_wbm, e_form_col, each_true_col
2115

2216
__author__ = "Janosh Riebesell"
2317
__date__ = "2022-12-01"
@@ -28,11 +22,12 @@
2822
e_form_preds = "e_form_per_atom_pred"
2923
each_pred_col = "e_above_hull_pred"
3024
facet_col = "Model"
25+
models = list(df_metrics)
26+
# models = df_metrics.T.MAE.nsmallest(6).index # top 6 models by MAE
3127

3228
df_melt = df_wbm.melt(
3329
id_vars=hover_cols,
34-
# value_vars=models,
35-
value_vars=list(df_metrics),
30+
value_vars=models,
3631
var_name=facet_col,
3732
value_name=e_form_preds,
3833
)
@@ -96,9 +91,10 @@
9691
)
9792
anno.text = f"{model_name} · {F1=:.2f} · {FPR=:.2f} · {FNR=:.2f} · {DAF=:.2f}"
9893

99-
# horizontal legend at the top
100-
legend = dict(yanchor="top", y=1, xanchor="right", x=1)
101-
fig.update_layout(legend=legend, margin=dict(t=50, b=30, l=40, r=0))
94+
fig.layout.margin.update(t=50, b=30, l=40, r=0)
95+
fig.layout.legend.update(
96+
y=1.15, xanchor="center", x=0.5, bgcolor="rgba(0,0,0,0)", orientation="h"
97+
)
10298
fig.update_yaxes(range=[0, 3_000], title_text=None)
10399

104100
# for trace in fig.data:
@@ -115,4 +111,4 @@
115111
# save_fig(fig, f"{FIGS}/{img_name}.svelte")
116112
n_models = len(fig.layout.annotations)
117113
save_fig(fig, f"{STATIC}/{img_name}.webp", scale=3, height=100 * n_models)
118-
save_fig(fig, f"{ROOT}/tmp/figures/{img_name}.pdf", height=600, width=600)
114+
save_fig(fig, f"{ROOT}/tmp/figures/{img_name}.pdf", height=550, width=600)

‎site/package.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@
2020
"@iconify/svelte": "^3.1.0",
2121
"@rollup/plugin-yaml": "^4.0.1",
2222
"@sveltejs/adapter-static": "^2.0.1",
23-
"@sveltejs/kit": "^1.8.3",
24-
"@sveltejs/vite-plugin-svelte": "^2.0.2",
25-
"@typescript-eslint/eslint-plugin": "^5.53.0",
26-
"@typescript-eslint/parser": "^5.53.0",
23+
"@sveltejs/kit": "^1.9.2",
24+
"@sveltejs/vite-plugin-svelte": "^2.0.3",
25+
"@typescript-eslint/eslint-plugin": "^5.54.0",
26+
"@typescript-eslint/parser": "^5.54.0",
2727
"elementari": "^0.1.0",
28-
"eslint": "^8.34.0",
28+
"eslint": "^8.35.0",
2929
"eslint-plugin-svelte3": "^4.0.0",
3030
"hastscript": "^7.2.0",
3131
"js-yaml": "^4.1.0",
@@ -38,15 +38,15 @@
3838
"rehype-slug": "^5.1.0",
3939
"remark-math": "3.0.0",
4040
"svelte": "^3.55.1",
41-
"svelte-check": "^3.0.3",
42-
"svelte-multiselect": "^8.3.0",
41+
"svelte-check": "^3.0.4",
42+
"svelte-multiselect": "^8.4.0",
4343
"svelte-preprocess": "^5.0.1",
4444
"svelte-toc": "^0.5.2",
4545
"svelte-zoo": "^0.3.4",
46-
"svelte2tsx": "^0.6.1",
46+
"svelte2tsx": "^0.6.2",
4747
"tslib": "^2.5.0",
4848
"typescript": "^4.9.5",
49-
"vite": "^4.1.3"
49+
"vite": "^4.1.4"
5050
},
5151
"prettier": {
5252
"semi": false,

‎site/src/app.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@
1818
--zoo-tooltip-bg: rgb(2, 17, 30);
1919

2020
--sms-margin: 1em auto;
21-
--sms-options-bg: rgb(20, 18, 36);
21+
--sms-options-bg: rgb(50, 48, 66);
2222
--sms-max-width: 22em;
23-
--sms-border: 1px dotted teal;
24-
--sms-focus-border: 1px dotted cornflowerblue;
23+
--sms-border: 0.1px solid gray;
24+
--sms-focus-border: 0.1px solid white;
2525
--sms-active-color: cornflowerblue;
2626
}
2727
body {

‎site/src/lib/Footer.svelte

+63-4
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,82 @@
11
<script lang="ts">
22
import { repository } from '$site/package.json'
33
import Icon from '@iconify/svelte'
4+
import { fade } from 'svelte/transition'
5+
6+
let show_tips: boolean
7+
const tips_title = `Tips for using this site`
8+
let dialog: HTMLDialogElement
9+
let btn: HTMLButtonElement
10+
11+
function close_if_outside_click(event: MouseEvent) {
12+
if (
13+
dialog &&
14+
show_tips &&
15+
!dialog.contains(event.target as Node) &&
16+
!btn.contains(event.target as Node)
17+
) {
18+
show_tips = false
19+
}
20+
}
21+
22+
function close_on_escape(event: KeyboardEvent) {
23+
if (event.key === `Escape`) show_tips = false
24+
}
425
</script>
526

27+
<svelte:window on:click={close_if_outside_click} on:keydown={close_on_escape} />
28+
629
<footer>
730
Questions/feedback?
831
<a href="{repository}/issues"><Icon icon="octicon:mark-github" inline /></a>
932
<a href="mailto:[email protected]?subject=Matbench Discovery">
1033
<Icon icon="mdi:email" inline />
1134
</a>
35+
<!-- open modal on clicking tips icon -->
36+
<button on:click={() => (show_tips = true)} bind:this={btn} title={tips_title}>
37+
<Icon icon="mdi:lightbulb-on-outline" inline />
38+
</button>
1239
</footer>
1340

41+
{#if show_tips}
42+
<dialog bind:this={dialog} transition:fade={{ duration: 150 }}>
43+
<h3>{tips_title}</h3>
44+
<p title="For keyboad-only site navigation">
45+
Use <kbd>cmd+k</kbd> to bring up a nav palette.
46+
</p>
47+
</dialog>
48+
{/if}
49+
1450
<style>
1551
footer {
16-
display: flex;
17-
gap: 1ex;
18-
place-content: center;
19-
place-items: center;
2052
padding: 3vh 3vw;
2153
background: #00061a;
54+
text-align: center;
55+
}
56+
footer > a {
57+
margin: 0 0 0 4pt;
58+
}
59+
footer > button {
60+
background: none;
61+
color: var(--blue);
62+
}
63+
dialog {
64+
position: fixed;
65+
top: 40%;
66+
background: var(--sms-options-bg);
67+
color: var(--text-color);
68+
display: grid;
69+
border: none;
70+
border-radius: 3pt;
71+
padding: 1ex 2ex;
72+
}
73+
dialog > * {
74+
margin: 0;
75+
}
76+
p kbd {
77+
background-color: rgba(255, 255, 255, 0.1);
78+
padding: 1pt 3pt;
79+
font-size: larger;
80+
border-radius: 2pt;
2281
}
2382
</style>

‎site/src/lib/ModelCard.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@
183183
}
184184
p {
185185
display: grid;
186-
gap: 3pt;
186+
gap: 5pt;
187187
grid-template-columns: 1fr 1fr;
188188
}
189189
div {

‎site/src/routes/+layout.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts">
2+
import { goto } from '$app/navigation'
23
import { page } from '$app/stores'
34
import { Footer, Nav } from '$lib'
45
import { repository } from '$site/package.json'
6+
import { CmdPalette } from 'svelte-multiselect'
57
import Toc from 'svelte-toc'
68
import { GitHubCorner } from 'svelte-zoo'
79
import '../app.css'
@@ -31,8 +33,19 @@
3133
}[$page.route.id ?? ``]
3234
if (!description) console.warn(`No description for route ${$page.route.id}`)
3335
$: title = $page.route.id == `/` ? `` : `${$page.route.id} • `
36+
37+
const actions = Object.keys(import.meta.glob(`./**/+page.{svx,svelte,md}`)).map(
38+
(filename) => {
39+
const parts = filename.split(`/`).filter((part) => !part.startsWith(`(`)) // remove hidden route segments
40+
const route = `/${parts.slice(1, -1).join(`/`)}`
41+
42+
return { label: route, action: () => goto(route) }
43+
}
44+
)
3445
</script>
3546

47+
<CmdPalette {actions} />
48+
3649
<svelte:head>
3750
<title>{title}Matbench Discovery</title>
3851
<meta name="description" content={description} />

0 commit comments

Comments
 (0)