v0.1.8

Author: janosh

changelog.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [v0.1.8](https://github.com/janosh/matterviz/compare/v0.1.7...v0.1.8)
+
+> 17 August 2025
+
+### 🛠 Enhancements
+
+- Measure distances and angles between selected `Structure` sites by @janosh in https://github.com/janosh/matterviz/pull/137
+- Optimade page 3-column layout (providers, suggestions, structure) by @janosh in https://github.com/janosh/matterviz/pull/126
+
+### 🐛 Bug Fixes
+
+- Fix parsing `mof-issue-127.cif` by @janosh in https://github.com/janosh/matterviz/pull/128
+- Disable `Structure`/`Trajectory` fullscreen buttons in non-browser contexts by @janosh in https://github.com/janosh/matterviz/pull/133
+- Set VSCode preferred extension location by @janosh in https://github.com/janosh/matterviz/pull/136
+
 ## [v0.1.7](https://github.com/janosh/matterviz/compare/v0.1.6...v0.1.7)
 
 > 11 August 2025

extensions/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "matterviz",
   "displayName": "MatterViz",
   "description": "Visualize crystal structures and MD trajectories in VSCode",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "publisher": "janosh",
   "icon": "icon.png",
   "repository": "https://github.com/janosh/matterviz",
@@ -17,7 +17,10 @@
     "vscode": "^1.96.0"
   },
   "main": "./dist/extension.cjs",
-  "extensionKind": ["ui", "workspace"],
+  "extensionKind": [
+    "ui",
+    "workspace"
+  ],
   "activationEvents": [
     "onStartupFinished"
   ],

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/matterviz",
   "repository": "https://github.com/janosh/matterviz",
   "license": "MIT",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/matterviz/issues",

src/lib/math.ts

@@ -4,8 +4,10 @@ export type Vec3 = [number, number, number]
 export type Matrix3x3 = [Vec3, Vec3, Vec3]
 export type NdVector = number[]
 
-export const LOG_EPS = 1e-9 // Constants
+export const LOG_EPS = 1e-9
 export const EPS = 1e-10
+export const RAD_TO_DEG = 180 / Math.PI
+export const DEG_TO_RAD = Math.PI / 180
 
 // Calculate all lattice parameters in a single efficient pass
 export function calc_lattice_params(
@@ -31,10 +33,9 @@ export function calc_lattice_params(
   const dot_bc = b_vec[0] * c_vec[0] + b_vec[1] * c_vec[1] + b_vec[2] * c_vec[2]
 
   // Convert to angles in degrees
-  const rad_to_deg = 180 / Math.PI
-  const alpha = Math.acos(dot_bc / (b * c)) * rad_to_deg
-  const beta = Math.acos(dot_ac / (a * c)) * rad_to_deg
-  const gamma = Math.acos(dot_ab / (a * b)) * rad_to_deg
+  const alpha = Math.acos(dot_bc / (b * c)) * RAD_TO_DEG
+  const beta = Math.acos(dot_ac / (a * c)) * RAD_TO_DEG
+  const gamma = Math.acos(dot_ab / (a * b)) * RAD_TO_DEG
 
   return { a, b, c, alpha, beta, gamma, volume }
 }
@@ -173,10 +174,11 @@ export function dot(vec1: NdVector, vec2: NdVector): number | number[] | number[
     if (!mat2.every((row) => row.length === cols)) {
       throw new Error(`Second matrix must be rectangular`)
     }
-    return mat1.map((_, i) =>
+    return mat1.map((_, ii) =>
       Array.from(
         { length: cols },
-        (_, j) => mat1[i].reduce((sum, _val, k) => sum + mat1[i][k] * mat2[k][j], 0),
+        (_, jj) =>
+          mat1[ii].reduce((sum, _val, kk) => sum + mat1[ii][kk] * mat2[kk][jj], 0),
       )
     )
   }
@@ -247,9 +249,9 @@ export function cell_to_lattice_matrix(
   gamma: number,
 ): Matrix3x3 {
   // Convert angles to radians
-  const alpha_rad = (alpha * Math.PI) / 180
-  const beta_rad = (beta * Math.PI) / 180
-  const gamma_rad = (gamma * Math.PI) / 180
+  const alpha_rad = alpha * DEG_TO_RAD
+  const beta_rad = beta * DEG_TO_RAD
+  const gamma_rad = gamma * DEG_TO_RAD
 
   const cos_alpha = Math.cos(alpha_rad)
   const cos_beta = Math.cos(beta_rad)

src/lib/periodic-table/PeriodicTable.svelte

@@ -364,7 +364,7 @@
     position: absolute;
     transform: translate(-50%, -10%);
     background: var(--tooltip-bg, rgba(0, 0, 0, 0.8));
-    color: var(--tooltip-color, white);
+    color: var(--tooltip-color, light-dark(black, white));
     padding: var(--tooltip-padding, 4px 6px);
     border-radius: var(--tooltip-border-radius, 6px);
     font-size: var(--tooltip-font-size, 14px);

src/lib/plot/ScatterPlot.svelte

@@ -1843,16 +1843,13 @@
         // 5. Final fallback
         return `rgba(0, 0, 0, 0.7)`
       })()}
-
         {@const cx = x_format?.startsWith(`%`) ? x_scale_fn(new Date(x)) : x_scale_fn(x)}
         {@const cy = (hovered_series?.y_axis === `y2` ? y2_scale_fn : y_scale_fn)(y)}
         {@const x_formatted = format_value(x, x_format)}
         {@const y_formatted = format_value(y, y_format)}
         {@const label = point_label?.text ?? null}
-
         {@const tooltip_lum = luminance(tooltip_bg_color ?? `rgba(0, 0, 0, 0.7)`)}
         {@const tooltip_text_color = tooltip_lum > 0.5 ? `#000000` : `#ffffff`}
-
         <foreignObject x={cx + 5} y={cy}>
           <div
             class="tooltip"
@@ -2038,7 +2035,7 @@
     opacity: 0.8;
   }
   .tooltip {
-    color: var(--scatter-tooltip-color, white);
+    color: var(--scatter-tooltip-color, light-dark(black, white));
     padding: var(--scatter-tooltip-padding, 1px 4px);
     border-radius: var(--scatter-tooltip-border-radius, 3px);
     font-size: var(--scatter-tooltip-font-size, 0.8em);

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

@@ -106,7 +106,7 @@
 
 {#if (element?.discoverer && !element.discoverer.startsWith(`unknown`)) ||
     element?.year}
-  <p class="discovery">
+  <p style="text-align: center">
     Discovered
     {#if element?.discoverer && !element.discoverer.startsWith(`unknown`)}
       by <strong>{element.discoverer}</strong>

src/site/PeriodicTableControls.svelte

@@ -12,7 +12,6 @@
     value_font_size?: number
     tooltip_font_size?: number
     tooltip_bg_color?: string
-    tooltip_text_color?: string
     tile_border_radius?: number
     inner_transition_offset?: number
     tile_font_color?: string
@@ -35,7 +34,6 @@
     value_font_size = $bindable(18),
     tooltip_font_size = $bindable(14),
     tooltip_bg_color = $bindable(`#000000`),
-    tooltip_text_color = $bindable(`#ffffff`),
     tile_border_radius = $bindable(1),
     inner_transition_offset = $bindable(0.5),
     tile_font_color = $bindable(`#ffffff`),
@@ -60,7 +58,6 @@
     value_font_size: 18,
     tooltip_font_size: 14,
     tooltip_bg_color: `#000000`,
-    tooltip_text_color: `#ffffff`,
     tile_border_radius: 1,
     inner_transition_offset: 0.5,
     tile_font_color: `#ffffff`,
@@ -85,7 +82,6 @@
         '--elem-value-font-size': `${value_font_size}cqw`,
         '--tooltip-font-size': `${tooltip_font_size}px`,
         '--tooltip-bg': tooltip_bg_color,
-        '--tooltip-color': tooltip_text_color,
         '--elem-tile-border-radius': `${tile_border_radius}pt`,
         '--ptable-spacer-ratio': `${1 / inner_transition_offset}`,
         '--elem-tile-font-color': tile_font_color,
@@ -126,7 +122,6 @@
     else if (prop === `value_font_size`) value_font_size = default_value as number
     else if (prop === `tooltip_font_size`) tooltip_font_size = default_value as number
     else if (prop === `tooltip_bg_color`) tooltip_bg_color = default_value as string
-    else if (prop === `tooltip_text_color`) tooltip_text_color = String(default_value)
     else if (prop === `tile_border_radius`) tile_border_radius = Number(default_value)
     else if (prop === `inner_transition_offset`) {
       inner_transition_offset = Number(default_value)
@@ -177,7 +172,6 @@
   let tooltip_modified = $derived(
     tooltip_font_size !== defaults.tooltip_font_size ||
       tooltip_bg_color !== defaults.tooltip_bg_color ||
-      tooltip_text_color !== defaults.tooltip_text_color ||
       tooltip_border_radius !== defaults.tooltip_border_radius ||
       tooltip_padding !== defaults.tooltip_padding ||
       tooltip_line_height !== defaults.tooltip_line_height ||
@@ -212,7 +206,6 @@
   function reset_tooltip(): void {
     tooltip_font_size = defaults.tooltip_font_size
     tooltip_bg_color = defaults.tooltip_bg_color
-    tooltip_text_color = defaults.tooltip_text_color
     tooltip_border_radius = defaults.tooltip_border_radius
     tooltip_padding = defaults.tooltip_padding
     tooltip_line_height = defaults.tooltip_line_height
@@ -425,12 +418,6 @@
       <button onclick={() => reset_property(`tooltip_bg_color`)}>reset</button>
     </label>
 
-    <label>
-      <span>Text color</span>
-      <input type="color" bind:value={tooltip_text_color} />
-      <button onclick={() => reset_property(`tooltip_text_color`)}>reset</button>
-    </label>
-
     <label>
       <span>Border radius (px)</span>
       <input type="range" min="0" max="20" step="1" bind:value={tooltip_border_radius} />

src/site/PeriodicTableDemo.svelte

@@ -21,7 +21,6 @@
   let value_font_size: number = $state(18)
   let tooltip_font_size: number = $state(14)
   let tooltip_bg_color: string = $state(`rgba(0, 0, 0, 0.8)`)
-  let tooltip_text_color: string = $state(`white`)
   let tile_border_radius: number = $state(1)
   let inner_transition_offset: number = $state(0.5)
   let tile_font_color: string = $state(`#ffffff`)
@@ -147,7 +146,6 @@
   bind:value_font_size
   bind:tooltip_font_size
   bind:tooltip_bg_color
-  bind:tooltip_text_color
   bind:tile_border_radius
   bind:inner_transition_offset
   bind:tile_font_color

tests/vitest/colors.test.ts

@@ -1,4 +1,10 @@
-import { element_color_schemes, is_color } from '$lib/colors'
+import {
+  element_color_schemes,
+  get_bg_color,
+  is_color,
+  luminance,
+  pick_color_for_contrast,
+} from '$lib/colors'
 import { elem_symbols } from '$lib/labels'
 import { describe, expect, test } from 'vitest'
 
@@ -227,3 +233,58 @@ describe(`is_color function`, () => {
     expect(is_color(element_color_schemes.Vesta.He)).toBe(true)
   })
 })
+
+test.each([
+  [`#000000`, 0, `black`],
+  [`#ffffff`, 1, `white`],
+  [`#ff0000`, 0.299, `red`],
+  [`#00ff00`, 0.587, `green`],
+  [`#0000ff`, 0.114, `blue`],
+  [`#808080`, 0.502, `gray`],
+  [`#ff8000`, 0.594, `orange`],
+  [`red`, 0.299, `named color`],
+  [`rgb(255, 0, 0)`, 0.299, `rgb format`],
+  [`hsl(0, 100%, 50%)`, 0.299, `hsl format`],
+])(`luminance(%s) = %s (%s)`, (color, expected) => {
+  expect(luminance(color)).toBeCloseTo(expected, 3)
+})
+
+test.each([
+  [null, undefined, `rgba(0, 0, 0, 0)`, `null element`],
+  [document.createElement(`div`), `#ff0000`, `#ff0000`, `explicit bg_color`],
+])(`get_bg_color: %s`, (elem, bg_color, expected, _desc) => {
+  expect(get_bg_color(elem, bg_color)).toBe(expected)
+})
+
+test(`get_bg_color returns transparent for transparent background`, () => {
+  const mock_elem = document.createElement(`div`)
+  Object.defineProperty(window, `getComputedStyle`, {
+    value: () => ({ backgroundColor: `rgba(0, 0, 0, 0)` }),
+    writable: true,
+  })
+  expect(get_bg_color(mock_elem)).toBe(`rgba(0, 0, 0, 0)`)
+})
+
+test.each([
+  [`#ffffff`, `black`, `light background`],
+  [`#000000`, `white`, `dark background`],
+])(`pick_color_for_contrast: %s → %s (%s)`, (bg_color, expected) => {
+  const mock_elem = document.createElement(`div`)
+  expect(pick_color_for_contrast(mock_elem, bg_color)).toBe(expected)
+})
+
+test(`pick_color_for_contrast uses custom threshold`, () => {
+  const mock_elem = document.createElement(`div`)
+  expect(pick_color_for_contrast(mock_elem, `#808080`, 0.5)).toBe(`black`)
+})
+
+test(`pick_color_for_contrast uses custom colors`, () => {
+  const mock_elem = document.createElement(`div`)
+  expect(pick_color_for_contrast(mock_elem, `#000000`, 0.7, [`blue`, `yellow`])).toBe(
+    `yellow`,
+  )
+})
+
+test(`pick_color_for_contrast handles null element gracefully`, () => {
+  expect(pick_color_for_contrast(null, `#ffffff`)).toBe(`black`)
+})