fix ElementTile dispatch event payload name dom_event

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.1.3",
-    "@sveltejs/kit": "^1.15.7",
+    "@sveltejs/kit": "^1.15.9",
     "d3-array": "^3.2.3",
     "d3-color": "^3.1.0",
     "d3-format": "^3.1.0",
@@ -33,10 +33,10 @@
     "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^3.2.0",
     "svelte": "^3.58.0",
-    "svelte-multiselect": "^8.6.0"
+    "svelte-multiselect": "^8.6.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.32.3",
+    "@playwright/test": "^1.33.0",
     "@sveltejs/adapter-static": "2.0.2",
     "@sveltejs/package": "^2.0.2",
     "@threlte/core": "^5.0.9",
@@ -47,32 +47,32 @@
     "@types/d3-scale": "^4.0.3",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/d3-shape": "^3.1.1",
-    "@types/three": "^0.150.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@types/three": "^0.151.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
     "@vitest/coverage-c8": "^0.30.1",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
-    "jsdom": "^21.1.1",
+    "jsdom": "^21.1.2",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex-svelte": "^1.1.2",
     "rehype-slug": "^5.1.0",
     "remark-math": "3.0.0",
-    "sharp": "^0.32.0",
+    "sharp": "^0.32.1",
     "svelte-check": "^3.2.0",
     "svelte-preprocess": "^5.0.3",
     "svelte-sequential-preprocessor": "^1.0.0",
-    "svelte-toc": "^0.5.4",
-    "svelte-zoo": "^0.4.3",
+    "svelte-toc": "^0.5.5",
+    "svelte-zoo": "^0.4.5",
     "svelte2tsx": "^0.6.11",
-    "three": "^0.151.3",
+    "three": "^0.152.2",
     "typescript": "5.0.4",
-    "vite": "^4.3.0",
+    "vite": "^4.3.3",
     "vitest": "^0.30.1"
   },
   "keywords": [

src/lib/ElementTile.svelte

@@ -26,7 +26,7 @@
   // background color defaults to category color (initialized in colors.ts, user editable in ColorCustomizer.ts)
   const dispatch = createEventDispatcher<PeriodicTableEvents>()
   function payload_event(dom_event: Event) {
-    dispatch(dom_event.type, { element, event: dom_event, active })
+    dispatch(dom_event.type, { element, dom_event, active })
   }
 
   function luminance(clr: string) {

src/routes/[slug]/+page.svelte

@@ -7,19 +7,19 @@
     ElementHeading,
     ElementPhoto,
     ElementScatter,
-    element_data,
     Icon,
     PeriodicTable,
     PropertySelect,
+    element_data,
   } from '$lib'
   import { pretty_num, property_labels } from '$lib/labels'
   import { active_element, heatmap_key } from '$lib/stores'
   import ElementTile from '$root/src/lib/ElementTile.svelte'
   import { PrevNext } from 'svelte-zoo'
 
   export let data
-
-  $: [$active_element, element] = [data.element, data.element]
+  $: ({ element } = data)
+  $: $active_element = element
 
   $: key_vals = Object.keys(property_labels)
     .filter((key) => element[key])
@@ -63,8 +63,10 @@
     Electronegativity: `mdi:electron-framework`,
   }
 
-  $: scatter_plot_values = element_data.map((el) => el[$heatmap_key])
-  $: [y_label, y_unit] = property_labels[$heatmap_key] ?? []
+  $: scatter_plot_values = element_data.map((el) =>
+    $heatmap_key ? el[$heatmap_key] : null
+  )
+  $: [y_label, y_unit] = $heatmap_key ? property_labels[$heatmap_key] ?? [] : []
   let color_scale: string
   let selected: string[]
 

tests/periodic-table.test.ts

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

tests/unit/PeriodicTable.test.ts

@@ -1,3 +1,4 @@
+import type { Category } from '$lib'
 import { element_data, PeriodicTable, PropertySelect } from '$lib'
 import { category_counts, heatmap_labels } from '$lib/labels'
 import { tick } from 'svelte'
@@ -88,7 +89,9 @@ describe(`PeriodicTable`, () => {
     const heatmap_key = heatmap_labels[heatmap_label]
 
     expect(heatmap_key).toBe(`atomic_mass`)
-    ptable.$set({ heatmap_values: element_data.map((e) => e[heatmap_key]) })
+    ptable.$set({
+      heatmap_values: element_data.map((elem) => elem[heatmap_key]),
+    })
     await tick()
 
     const element_tile = doc_query(`div.element-tile`)
@@ -118,12 +121,12 @@ describe(`PeriodicTable`, () => {
     let expected_active = false
 
     let emitted = false
-    ptable.$on(`click`, (e) => {
+    ptable.$on(`click`, (event) => {
       emitted = true
-      expect(e.detail.element).toBe(element_data[0])
-      expect(e.detail.active).toBe(expected_active)
-      expect(e.detail.event).toBeInstanceOf(MouseEvent)
-      expect(e.detail.event.type).toBe(`click`)
+      expect(event.detail.element).toBe(element_data[0])
+      expect(event.detail.active).toBe(expected_active)
+      expect(event.detail.dom_event).toBeInstanceOf(MouseEvent)
+      expect(event.detail.dom_event.type).toBe(`click`)
     })
 
     const element_tile = doc_query(`.element-tile`)
@@ -149,7 +152,9 @@ describe(`PeriodicTable`, () => {
     (active_category, expected_active) => {
       new PeriodicTable({
         target: document.body,
-        props: { active_category: active_category.replaceAll(` `, `-`) },
+        props: {
+          active_category: active_category.replaceAll(` `, `-`) as Category,
+        },
       })
 
       const active_tiles = document.querySelectorAll(`.element-tile.active`)
@@ -175,13 +180,14 @@ describe(`PeriodicTable`, () => {
     }
   )
 
-  test.each([{ foo: 42 }], [{}])(
-    `raises error when heatmap_values is object with unknown element symbols`,
+  test.each([[{ he: 0 }], [{ foo: 42 }]])(
+    `raises error when heatmap_values=%o is object with unknown element symbols`,
     (heatmap_values) => {
       console.error = vi.fn()
 
       new PeriodicTable({
         target: document.body,
+        // @ts-expect-error testing invalid input
         props: { heatmap_values },
       })