add prop precision: number = 2 to ElementTile

remove session_store() replaced by svelte-zoo's implementation
allow setting pretty_num() precision globally for an app through precision_store

package.json

@@ -32,7 +32,7 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "svelte": "^3.57.0",
-    "svelte-multiselect": "^8.5.0"
+    "svelte-multiselect": "^8.6.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.31.2",

src/lib/ElementTile.svelte

@@ -18,6 +18,7 @@
   // at what background color lightness text color switches from black to white
   export let text_color_threshold = 0.7
   export let text_color: string | null = null
+  export let precision: number = 2
 
   type $$Events = PeriodicTableEvents // for type-safe event listening on this component
 
@@ -86,7 +87,7 @@
   {/if}
   {#if value}
     <span class="value">
-      {pretty_num(value)}
+      {pretty_num(value, precision)}
     </span>
   {:else if show_name}
     <span class="name">

src/lib/PeriodicTable.svelte

@@ -11,6 +11,7 @@
     show_number?: boolean
     show_symbol?: boolean
     text_color_threshold?: number
+    precision?: number
   } = {}
   export let show_photo = true
   export let style = ``

src/lib/labels.ts

@@ -1,4 +1,7 @@
+import { get } from 'svelte/store'
 import type { Category, ChemicalElement } from '.'
+// .ts ext needed for Playwright to be able to resolve import
+import { precision_store } from './stores.ts'
 
 // TODO add labels and units for all elemental properties
 export const property_labels: Partial<
@@ -41,7 +44,10 @@ export const heatmap_labels: Partial<Record<string, keyof ChemicalElement>> =
     })
   )
 
-export const pretty_num = (num: number | null, precision = 2) => {
+export const pretty_num = (
+  num: number | null,
+  precision: number = get(precision_store)
+) => {
   if (num === null) return ``
   if ((Math.abs(num) < 0.01 && Math.abs(num) > 0) || num > 1e6) {
     return num.toExponential(precision)

src/lib/stores.ts

@@ -1,3 +1,4 @@
+import { session_store } from 'svelte-zoo/stores'
 import { writable } from 'svelte/store'
 import type { Category, ChemicalElement } from '.'
 
@@ -12,24 +13,6 @@ active_element.subscribe((el) => {
 
 export const heatmap_key = writable<keyof ChemicalElement | null>(null)
 
-function session_store<T>(name: string, initialValue: T) {
-  if (typeof sessionStorage !== `undefined` && sessionStorage[name]) {
-    initialValue = JSON.parse(sessionStorage[name])
-  }
-
-  const { subscribe, set } = writable(initialValue)
-
-  return {
-    subscribe,
-    set: (val: T) => {
-      if (val !== undefined && typeof sessionStorage !== `undefined`) {
-        sessionStorage[name] = JSON.stringify(val)
-      }
-      set(val)
-    },
-  }
-}
-
 export const show_icons = session_store<boolean>(`show-icons`, true)
 
 // color values have to be in hex format as that's the only format
@@ -51,3 +34,5 @@ export const category_colors = session_store<Record<string, string>>(
   `category-colors`,
   { ...default_category_colors }
 )
+
+export const precision_store = session_store<number>(`elementari-precision`, 2)

tests/periodic-table.test.ts

@@ -49,7 +49,7 @@ test.describe(`Periodic Table`, () => {
       await element_tile.hover()
     }
 
-    expect(logs).toHaveLength(0)
+    expect(logs, logs).toHaveLength(0)
   })
 
   test.describe(`in heatmap mode`, () => {