rename prop site_labels -> show_site_labels, default to true + fix si…

…te site_labels rendering acknowledge important open source libs in readme and /acknowledgements page change all .svx files to .md
janosh · Jul 17, 2023 · ff0336a · ff0336a
1 parent bda2e5f
commit ff0336a
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 21 deletions.
diff --git a/readme.md b/readme.md
@@ -88,3 +88,10 @@ See `DispatchPayload` and `PeriodicTableEvents` in `src/lib/index.ts`
 - Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.
 - Big thanks to all sources of element images. See [`fetch-elem-images.ts`](https://github.com/janosh/elementari/blob/-/src/fetch-elem-images.ts) and [`static/elements`](https://github.com/janosh/elementari/tree/main/static/elements).
 - Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for a lot of great suggestions, UX ideas, helping me learn [`threlte`](https://threlte.xyz) and contributing the [`Bond.svelte`](https://github.com/janosh/elementari/blob/-/src/lib/structure/Bond.svelte) component.
+
+This project would not have been possible as a one-man side project without many fine open-source projects. 🙏 To name just the most important ones:
+
+|           3D graphics           |               2D graphics                |                     Docs                     |               Bundler               |               Testing                |
+| :-----------------------------: | :--------------------------------------: | :------------------------------------------: | :---------------------------------: | :----------------------------------: |
+| [three.js](https://threejs.org) |          [d3](https://d3js.org)          |         [mdsvex](https://mdsvex.com)         |     [vite](https://vitejs.dev)      | [playwright](https://playwright.dev) |
+| [threlte](https://threlte.xyz)  | [sharp](https://sharp.pixelplumbing.com) | [rehype](https://github.com/rehypejs/rehype) | [sveltekit](https://kit.svelte.dev) |     [vitest](https://vitest.dev)     |
diff --git a/src/app.css b/src/app.css
@@ -149,3 +149,20 @@ input[type='color']::-webkit-color-swatch-wrapper {
 input[type='color']::-webkit-color-swatch {
   border: none;
 }
+
+table {
+  display: block;
+  max-width: 100%;
+  overflow: scroll;
+  border-collapse: collapse;
+}
+table :is(td, th) {
+  border: 1px solid gray;
+  padding: 3pt 12pt;
+}
+table.roomy :is(td, th) {
+  padding: 5pt 9pt;
+}
+tbody tr:nth-child(odd) {
+  background: black;
+}
diff --git a/src/lib/structure/Structure.svelte b/src/lib/structure/Structure.svelte
@@ -66,7 +66,8 @@
   export let save_png_btn_text: string = `✎ Save as PNG`
   // boolean or map from element symbols to labels
   // use slot='atom-label' to include HTML and event handlers
-  export let site_labels: boolean | Record<ElementSymbol, string | number> = false
+  export let show_site_labels: boolean | Record<ElementSymbol, string | number> =
+    (structure?.sites?.length ?? 0) < 20
   export let atom_labels_style: string | null = null
   export let bonding_strategy: 'max_dist' | 'nearest_neighbor' = `nearest_neighbor`
   export let bond_color_mode: 'single' | 'split-midpoint' | 'gradient' = `single`
@@ -214,7 +215,7 @@
           image atoms
         </label>
         <label>
-          <input type="checkbox" bind:checked={site_labels} />
+          <input type="checkbox" bind:checked={show_site_labels} />
           site labels
         </label>
         <label>
@@ -374,11 +375,11 @@
         {bonding_strategy}
         {rotation_damping}
       >
-        <!-- above let:elem needed to fix false positive eslint no-undef -->
         <slot slot="atom-label" name="atom-label" let:elem>
-          {#if site_labels}
+          <!-- let:elem needed to fix false positive eslint no-undef -->
+          {#if show_site_labels}
             <span class="atom-label" style={atom_labels_style}>
-              {site_labels === true ? elem : site_labels[elem]}
+              {show_site_labels === true ? elem : show_site_labels[elem]}
             </span>
           {/if}
         </slot>
@@ -497,9 +498,9 @@
     text-align: center;
   }
   .atom-label {
-    background: var(--struct-atom-label-bg, rgba(255, 255, 255, 0.4));
+    background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.2));
     border-radius: var(--struct-atom-label-border-radius, 3pt);
-    padding: var(--struct-atom-label-padding, 0 3pt);
+    padding: var(--struct-atom-label-padding, 1px 6px);
   }
   input[type='color'] {
     width: var(--struct-input-color-width, 40px);

diff --git a/src/lib/structure/StructureScene.svelte b/src/lib/structure/StructureScene.svelte
@@ -109,19 +109,14 @@
         }}
         scale={radius}
       />
+
+      {#if $$slots[`atom-label`]}
+        <HTML center as="div" position={xyz}>
+          <slot name="atom-label" {elem} {xyz} {species} />
+        </HTML>
+      {/if}
     {/each}
   </InstancedMesh>
-  <!-- TODO find a performant way of rendering labels for each site -->
-  <!-- {#each structure.sites as site, idx}
-    {@const { species, xyz } = site}
-    {@const elem = species[0].element}
-
-    {#if $$slots[`atom-label`]}
-      <HTML center as="div">
-        <slot name="atom-label" {elem} {xyz} {species} />
-      </HTML>
-    {/if}
-  {/each} -->
 {/if}
 
 {#if show_bonds}
@@ -174,9 +169,9 @@
       <!-- distance from hovered to active site -->
       <!-- TODO this doesn't handle periodic boundaries yet, so is currently grossly misleading -->
       {#if active_site && active_site != hovered_site && active_hovered_dist}
-        {@const distance = pretty_num(euclidean_dist(hovered_site.xyz, active_site.xyz))}
+        {@const distance = euclidean_dist(hovered_site.xyz, active_site.xyz)}
         <br />
-        dist={distance} Å (no PBC yet)
+        dist={pretty_num(distance)} Å (no PBC yet)
       {/if}
     </div>
   </HTML>

diff --git a/src/routes/(demos)/color-scales/+page.svx → src/routes/(demos)/color-scales/+page.md b/src/routes/(demos)/color-scales/+page.svx → src/routes/(demos)/color-scales/+page.md
diff --git a/...s/(demos)/element-color-schemes/+page.svx → ...es/(demos)/element-color-schemes/+page.md b/...s/(demos)/element-color-schemes/+page.svx → ...es/(demos)/element-color-schemes/+page.md
diff --git a/src/routes/(demos)/element-tile/+page.svx → src/routes/(demos)/element-tile/+page.md b/src/routes/(demos)/element-tile/+page.svx → src/routes/(demos)/element-tile/+page.md
diff --git a/src/routes/(demos)/nucleus/+page.svx → src/routes/(demos)/nucleus/+page.md b/src/routes/(demos)/nucleus/+page.svx → src/routes/(demos)/nucleus/+page.md
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -15,7 +15,7 @@
       return { route: `/${parts.slice(1, -1).join(`/`)}`, filename }
     }
   )
-  let mp_id = `/mp-756175`
+  let mp_id = `/mp-1234`
 
   if (routes.length < 3) {
     console.error(`Too few demo routes found: ${routes.length}`)

diff --git a/src/routes/acknowledgements/+page.svx → src/routes/acknowledgements/+page.md b/src/routes/acknowledgements/+page.svx → src/routes/acknowledgements/+page.md
@@ -13,6 +13,15 @@
 - Thanks to [@kadinzhang](https://github.com/kadinzhang) and their [Periodicity project](https://ptable.netlify.app) [[code](https://github.com/kadinzhang/Periodicity)] for the idea to display animated Bohr model atoms and inset a scatter plot into the periodic table to visualize the periodic nature of elemental properties.
 - Thanks to [@ixxie](https://github.com/ixxie) ([shenhav.fyi](https://shenhav.fyi)) for a lot of great suggestions, UX ideas, helping me learn [`threlte`](https://threlte.xyz) and contributing the [`Bond.svelte`](https://github.com/janosh/elementari/blob/-/src/lib/structure/Bond.svelte) component.
 
+This project would not have been possible as a one-man side project without many fine open-source projects. 🙏 To name just the most important ones:
+
+|           3D graphics           |               2D graphics                |                     Docs                     |               Bundler               |               Testing                |
+| :-----------------------------: | :--------------------------------------: | :------------------------------------------: | :---------------------------------: | :----------------------------------: |
+| [three.js](https://threejs.org) |          [d3](https://d3js.org)          |         [mdsvex](https://mdsvex.com)         |     [vite](https://vitejs.dev)      | [playwright](https://playwright.dev) |
+| [threlte](https://threlte.xyz)  | [sharp](https://sharp.pixelplumbing.com) | [rehype](https://github.com/rehypejs/rehype) | [sveltekit](https://kit.svelte.dev) |     [vitest](https://vitest.dev)     |
+
+Note that the last two cells are empty because there were only 8 items in the list. In markdown tables, if you have less items in a row than there are columns, the remaining cells will just be empty.
+
 ## Element Images
 
 Big thanks to the element image providers listed below. Each image caption links back to the source website. See [`fetch-elem-images.ts`](https://github.com/janosh/elementari/blob/-/src/fetch-elem-images.ts) for details.