From ebcb0a32456dcfbff0686c0a948780adb4c8f382 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Wed, 8 Feb 2023 20:55:02 -0800
Subject: [PATCH] add color scale ramp slots to ColorScaleSelect to provide
 visual preview of color scale

fix color scale on element detail pages scatter plot
fix ElementPhoto not working when imported from NPM package
---
 package.json                    |  4 ++--
 src/app.css                     |  5 ++---
 src/app.html                    |  6 ++++++
 src/lib/ColorScaleSelect.svelte | 31 +++++++++++++++++++++++++++++--
 src/lib/ElementPhoto.svelte     | 13 ++++++++++---
 src/lib/PropertySelect.svelte   | 10 +++++++++-
 src/lib/ScatterPlot.svelte      | 14 ++++++++++----
 src/routes/+page.svelte         | 19 +++++++++++++------
 src/routes/[slug]/+page.svelte  | 19 +++++++++++--------
 src/site/Footer.svelte          |  2 +-
 10 files changed, 93 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 8aaccb4..8229be0 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,8 @@
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "d3-scale-chromatic": "^3.0.0"
+    "d3-scale-chromatic": "^3.0.0",
+    "svelte-multiselect": "^8.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.30.0",
@@ -58,7 +59,6 @@
     "remark-math": "3.0.0",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.3",
-    "svelte-multiselect": "^8.3.0",
     "svelte-preprocess": "^5.0.1",
     "svelte-toc": "^0.5.2",
     "svelte-zoo": "^0.2.4",
diff --git a/src/app.css b/src/app.css
index 1f6efb5..66da276 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,9 +21,8 @@
   --zoo-github-corner-color: var(--page-bg);
   --zoo-github-corner-bg: white;
 
-  --sms-margin: auto;
-  --sms-options-bg: black;
-  --sms-max-width: 22em;
+  --sms-options-bg: rgb(20, 18, 36);
+  --sms-max-width: 19em;
   --sms-border: 1px dotted teal;
   --sms-focus-border: 1px dotted cornflowerblue;
   --sms-active-color: cornflowerblue;
diff --git a/src/app.html b/src/app.html
index 9a7e8c5..706eb2d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,6 +15,12 @@
     />
     <meta property="og:image:alt" content="Interactive Periodic Table" />
 
+    <script
+      defer
+      data-domain="sveriodic-table.janosh.dev"
+      src="https://plausible.io/js/plausible.js"
+    ></script>
+
     <link rel="icon" href="favicon.svg" />
     <link rel="stylesheet" href="prism-vsc-dark-plus.css" />
     <!-- math display -->
diff --git a/src/lib/ColorScaleSelect.svelte b/src/lib/ColorScaleSelect.svelte
index 1f1a6b1..11bd1dd 100644
--- a/src/lib/ColorScaleSelect.svelte
+++ b/src/lib/ColorScaleSelect.svelte
@@ -3,17 +3,44 @@
   import Select from 'svelte-multiselect'
 
   export let value: string | null = null
-  export let selected: string[] = []
+  export let selected: string[] = [`Viridis`]
+  export let minSelect: number = 0
 
   const options = Object.keys(d3sc)
     .filter((key) => key.startsWith(`interpolate`))
     .map((key) => key.replace(`interpolate`, ``))
+
+  const ramp_color_scale = (name: string) =>
+    [...Array(10).keys()].map((idx) => d3sc[`interpolate${name}`](idx / 10))
 </script>
 
 <Select
   {options}
   maxSelect={1}
+  {minSelect}
   bind:value
   bind:selected
   placeholder="Select a color scale"
-/>
+>
+  <div slot="option" let:option>
+    {option}
+    <span style:background="linear-gradient(to right, {ramp_color_scale(option)})" />
+  </div>
+  <div slot="selected" let:option>
+    {option}
+    <span style:background="linear-gradient(to right, {ramp_color_scale(option)})" />
+  </div>
+</Select>
+
+<style>
+  div {
+    display: flex;
+    justify-content: space-between;
+    gap: 5pt;
+  }
+  span {
+    border-radius: 2pt;
+    min-height: 1em;
+    min-width: 8em;
+  }
+</style>
diff --git a/src/lib/ElementPhoto.svelte b/src/lib/ElementPhoto.svelte
index 73848f8..5f2e70f 100644
--- a/src/lib/ElementPhoto.svelte
+++ b/src/lib/ElementPhoto.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { homepage } from '$root/package.json'
   import { Icon, type ChemicalElement } from '.'
 
   export let element: ChemicalElement
@@ -8,13 +9,19 @@
 
   $: ({ name, number } = element ?? {})
 
-  $: src = `/elements/${number}-${name?.toLowerCase()}.jpg`
+  $: file = `elements/${number}-${name?.toLowerCase()}.jpg`
   let hidden = false
-  $: src, (hidden = false) // reset hidden to false when src changes
+  $: file, (hidden = false) // reset hidden to false when src changes
 </script>
 
 {#if name && number}
-  <img {src} alt={name} on:error={() => (hidden = true)} {style} {hidden} />
+  <img
+    src="{homepage}/{file}"
+    alt={name}
+    on:error={() => (hidden = true)}
+    {style}
+    {hidden}
+  />
   {#if hidden && missing_msg}
     <div {style}>
       <span>
diff --git a/src/lib/PropertySelect.svelte b/src/lib/PropertySelect.svelte
index 316b70f..8b3208d 100644
--- a/src/lib/PropertySelect.svelte
+++ b/src/lib/PropertySelect.svelte
@@ -8,8 +8,16 @@
   const options = Object.keys(heatmap_labels)
   export let empty: boolean = false
   export let selected: string[] = empty ? [] : [options[0]]
+  export let minSelect: number = 0
 
   $: $heatmap_key = heatmap_labels[value ?? ``] ?? null
 </script>
 
-<Select {options} {selected} maxSelect={1} bind:value placeholder="Select a heat map" />
+<Select
+  {options}
+  {selected}
+  maxSelect={1}
+  {minSelect}
+  bind:value
+  placeholder="Select a heat map"
+/>
diff --git a/src/lib/ScatterPlot.svelte b/src/lib/ScatterPlot.svelte
index d7c1401..1220285 100644
--- a/src/lib/ScatterPlot.svelte
+++ b/src/lib/ScatterPlot.svelte
@@ -22,6 +22,7 @@
   export let y_unit = ``
   export let tooltip_point: Coords
   export let hovered = false
+  export let markers: 'line' | 'points' | 'line+points' = `line+points`
 
   const dispatcher = createEventDispatcher()
   const axis_label_offset = { x: 15, y: 20 } // pixels
@@ -74,10 +75,15 @@
       on:mouseleave={() => (hovered = false)}
       on:mouseleave
     >
-      <Line points={scaled_data} origin={[x_scale(x_range[0]), y_scale(y_range[0])]} />
-      {#each scaled_data as [x, y, fill]}
-        <ScatterPoint {x} {y} {fill} />
-      {/each}
+      {#if markers.includes(`line`)}
+        <Line points={scaled_data} origin={[x_scale(x_range[0]), y_scale(y_range[0])]} />
+      {/if}
+
+      {#if markers.includes(`points`)}
+        {#each scaled_data as [x, y, fill]}
+          <ScatterPoint {x} {y} {fill} />
+        {/each}
+      {/if}
 
       <!-- x axis -->
       <g class="x-axis">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c3153ce..bce369c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -29,10 +29,12 @@
 
 <h1>Periodic Table of Elements</h1>
 
-<PropertySelect empty />
-{#if $heatmap_key}
-  <ColorScaleSelect bind:value={color_scale} selected={[`Viridis`]} />
-{/if}
+<label for="heatmap-select">
+  <PropertySelect empty id="heatmap-select" />
+  {#if $heatmap_key}
+    <ColorScaleSelect bind:value={color_scale} minSelect={1} />
+  {/if}
+</label>
 
 {#if $last_element && window_width > 1100}
   {@const { shells, name, symbol } = $last_element}
@@ -84,7 +86,12 @@
   }
   a[href='bohr-atoms'] {
     position: absolute;
-    top: 8%;
-    right: 10%;
+    top: 2%;
+    left: 2%;
+  }
+  label {
+    display: flex;
+    place-content: center;
+    gap: 1em;
   }
 </style>
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 54a465b..3329e6f 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -2,6 +2,7 @@
   import type { ChemicalElement } from '$lib'
   import {
     BohrAtom,
+    ColorScaleSelect,
     ElementHeading,
     ElementPhoto,
     ElementScatter,
@@ -13,8 +14,6 @@
   import { pretty_num, property_labels } from '$lib/labels'
   import { active_element, heatmap_key } from '$lib/stores'
   import { PrevNextElement } from '$site'
-  import { extent } from 'd3-array'
-  import { scaleLinear } from 'd3-scale'
   import type { PageData } from './$types'
 
   export let data: PageData
@@ -64,11 +63,8 @@
   }
 
   $: scatter_plot_values = element_data.map((el) => el[$heatmap_key])
-  $: color_scale = scaleLinear()
-    .domain(extent(scatter_plot_values))
-    .range([`blue`, `red`])
-
   $: [y_label, y_unit] = property_labels[$heatmap_key] ?? []
+  let color_scale: string
 </script>
 
 <svelte:window bind:innerWidth={window_width} />
@@ -93,8 +89,10 @@
     </p>
   {/if}
 
-  <PropertySelect />
-
+  <label>
+    <PropertySelect minSelect={1} />
+    <ColorScaleSelect bind:value={color_scale} minSelect={1} />
+  </label>
   <section class="viz">
     <ElementPhoto
       element={$active_element}
@@ -247,4 +245,9 @@
   table tr:hover {
     background-color: rgba(150, 150, 255, 0.2);
   }
+  label {
+    display: flex;
+    place-content: center;
+    gap: 1em;
+  }
 </style>
diff --git a/src/site/Footer.svelte b/src/site/Footer.svelte
index 23c2adb..70892c5 100644
--- a/src/site/Footer.svelte
+++ b/src/site/Footer.svelte
@@ -26,7 +26,7 @@
   </p>
   <p>
     <small>
-      Pro tip: Use arrow keys &thinsp;&larr; &rarr;&thinsp; to navigate between elements.
+      Use arrow keys &thinsp;&larr; &rarr;&thinsp; to navigate between elements.
     </small>
   </p>
 </footer>