From b9bc39247dbb4522704e0f9a000a709a59f141a5 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sun, 19 Mar 2023 20:42:47 -0700
Subject: [PATCH] add precision prop to ColorBar

fix ElementScatter max-height applying to element detail pages
set container-type: inline-size on TableInset wrapper
---
 src/lib/ColorBar.svelte                   | 3 ++-
 src/lib/ElementScatter.svelte             | 5 +----
 src/lib/ScatterPlot.svelte                | 2 +-
 src/lib/TableInset.svelte                 | 1 +
 src/routes/(demos)/element-tile/+page.svx | 2 --
 src/routes/+page.svelte                   | 3 +++
 src/routes/[slug]/+page.svelte            | 7 +------
 7 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/lib/ColorBar.svelte b/src/lib/ColorBar.svelte
index e7fc054..2772c65 100644
--- a/src/lib/ColorBar.svelte
+++ b/src/lib/ColorBar.svelte
@@ -13,6 +13,7 @@
   export let tick_side: 'top' | 'bottom' | 'center' = `bottom`
   // TODO vertical not fully implemented yet
   export let orientation: 'horizontal' | 'vertical' = `horizontal`
+  export let precision: number = 1
 
   $: if (
     tick_labels?.length == 0 ||
@@ -64,7 +65,7 @@
   <div style:background="linear-gradient({grad_dir}, {ramped})" {style}>
     {#each tick_labels || [] as tick_label, idx}
       <span style="left: calc(100% * {idx} / {tick_labels?.length - 1}); {tick_pos}">
-        {pretty_num(tick_label, 1)}
+        {pretty_num(tick_label, precision)}
       </span>
     {/each}
   </div>
diff --git a/src/lib/ElementScatter.svelte b/src/lib/ElementScatter.svelte
index 5fae77f..88fc50f 100644
--- a/src/lib/ElementScatter.svelte
+++ b/src/lib/ElementScatter.svelte
@@ -22,8 +22,6 @@
   }
 </script>
 
-<!-- set max-height to ensure ScatterPlot is never taller than 3 Ptable rows
-  so it doesn't stretch the table. assumes Ptable has 18 rows -->
 <ScatterPlot
   {y}
   x={[...Array(y.length + 1).keys()].slice(1)}
@@ -32,7 +30,6 @@
   {x_label}
   on:change
   {...$$props}
-  style="max-height: calc(100cqw / 18 * 3);"
 >
   <div slot="tooltip" let:x let:y>
     {#if $active_element}
@@ -50,6 +47,6 @@
     width: max-content;
     box-sizing: border-box;
     border-radius: 3pt;
-    font-size: 2.3cqw;
+    font-size: min(2.3cqw, 12pt);
   }
 </style>
diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
index 2e4e7ca..f4bde0f 100644
--- a/src/lib/ScatterPlot.svelte
+++ b/src/lib/ScatterPlot.svelte
@@ -147,7 +147,7 @@
     font-weight: lighter;
     overflow: visible;
     z-index: 1;
-    font-size: 2.3cqw;
+    font-size: min(2.3cqw, 12pt);
   }
   line {
     stroke: gray;
diff --git a/src/lib/TableInset.svelte b/src/lib/TableInset.svelte
index 9dd8100..7017273 100644
--- a/src/lib/TableInset.svelte
+++ b/src/lib/TableInset.svelte
@@ -14,5 +14,6 @@
     box-sizing: border-box;
     grid-row: 1 / span 3;
     grid-column: 3 / span 10;
+    container-type: inline-size;
   }
 </style>
diff --git a/src/routes/(demos)/element-tile/+page.svx b/src/routes/(demos)/element-tile/+page.svx
index a3ee107..f89caa7 100644
--- a/src/routes/(demos)/element-tile/+page.svx
+++ b/src/routes/(demos)/element-tile/+page.svx
@@ -1,7 +1,5 @@
 `ElementTile.svelte` automatically changes text color to ensure high contrast with its background. If its background is transparent, it traverses up the DOM tree to find the first element with non-transparent background color. This an, of course, go wrong e.g. if the tile is absolutely positioned outside its parent element. In that case, pass an explicit `text_color` prop and `text_color_threshold={null}` to `ElementTile` to override the automatic color selection.
 
-```svelte example stackblitz code_above
-
 ```svelte example stackblitz code_above
 <script>
   import { ElementTile, element_data } from '$lib'
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f3bd3ee..00ba4f5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -63,6 +63,8 @@
   bind:active_category={$active_category}
   links="name"
 >
+  <!-- set max-height to ensure ScatterPlot is never taller than 3 PeriodicTable
+  rows so it doesn't stretch the table. assumes PeriodicTable has 18 rows -->
   <TableInset slot="inset">
     {#if heatmap_key}
       <ElementScatter
@@ -73,6 +75,7 @@
         on:change={(e) => ($active_element = element_data[e.detail.x - 1])}
         x_label_yshift={42}
         {color_scale}
+        style="max-height: calc(100cqw / 10 * 3);"
       />
     {:else}
       <ElementStats --font-size="1vw" element={$last_element} />
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 4ba1f69..9ba3b86 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -188,12 +188,7 @@
   >
     <a href={item.name.toLowerCase()} style="display: flex; flex-direction: column;">
       <h3>
-        {#if kind == `next`}
-          Next
-          <Icon icon="carbon:next-filled" inline />
-        {:else}
-          <Icon icon="carbon:previous-filled" inline />Previous
-        {/if}
+        {@html kind == `next` ? `Next &rarr;` : `&larr; Previous`}
       </h3>
       <ElementPhoto element={item} style="width: 200px; border-radius: 4pt;" />
       <ElementTile