Support partial site occupancies by rendering atoms as multiple spher…

…e slices (#46) * add hint how to change element color in StructureLegend.svelte * add structure Bi2Zr2O7-Fm3m.json with partial site occupancy * StructureScene support rendering partial site occupancies as differently-colored sphere slices * add prop gizmo: boolean | ComponentProps<Gizmo> to StructureScene, will render threlte/extras Gizmo if truthy * bump pre-commit hooks * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Structure.svelte bundle all pass-through child props for StructureScene as scene_props and for Lattice as lattice_props * StructureScene type and tweak gizmo_defaults fix vite import.meta.glob 'as' deprecation * bump deps, migrate to eslint flat config, fix pkg.json import for node 22 * default node version to 22 in pre-commit config * CI install-cmd: npm install --force * skip: [eslint] in prec-commit CI * fix polar coordinate calculation of disordered site labels * add /disordered demo page default missing atomic_radius values to 1 in lib/structure/index.ts --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
janosh · Jun 27, 2024 · e27443c · e27443c
1 parent 85a044c
commit e27443c
Show file tree

Hide file tree

Showing 17 changed files with 383 additions and 232 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -10,3 +10,5 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
+    with:
+      install-cmd: npm install --force
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -12,3 +12,5 @@ on:
 jobs:
   tests:
     uses: janosh/workflows/.github/workflows/npm-test-release.yml@main
+    with:
+      install-cmd: npm install --force
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -1,11 +1,15 @@
 ci:
   autoupdate_schedule: quarterly
+  skip: [eslint]
 
 default_install_hook_types: [pre-commit, commit-msg]
 
+default_language_version:
+  node: '22.0.0'
+
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.4.0
+    rev: v4.6.0
     hooks:
       - id: check-case-conflict
       - id: check-symlinks
@@ -17,7 +21,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.1
+    rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -29,24 +33,24 @@ repos:
         exclude: ^changelog.md|.*/(structures|molecules)/.*\.json|.py$
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.46.0
+    rev: v9.5.0
     hooks:
       - id: eslint
         types: [file]
         args: [--fix]
         files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
-          - svelte
-          - typescript
           - eslint-plugin-svelte
-          - '@typescript-eslint/eslint-plugin'
-          - '@typescript-eslint/parser'
+          - svelte
           - svelte-eslint-parser
+          - typescript
+          - typescript-eslint
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.5
+    rev: v2.3.0
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
-        args: [--ignore-words-list, 'te,ba,nd,ore,claus', --check-filenames]
+        args:
+          [--ignore-words-list, 'te,ba,nd,ore,claus,manuel', --check-filenames]
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,32 @@
+import svelte from 'eslint-plugin-svelte'
+import tslint from 'typescript-eslint'
+
+/** @type { import("eslint").Linter.FlatConfig[] } */
+export default [
+  ...tslint.configs.recommended,
+  ...svelte.configs[`flat/recommended`],
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        `error`,
+        { argsIgnorePattern: `^_`, varsIgnorePattern: `^_` },
+      ],
+      '@typescript-eslint/quotes': [`error`, `backtick`, { avoidEscape: true }],
+      'svelte/no-at-html-tags': `off`,
+    },
+  },
+  {
+    languageOptions: { ecmaVersion: 2020 },
+  },
+  {
+    files: [`**/*.svelte`],
+    languageOptions: {
+      parserOptions: {
+        parser: tslint.parser,
+      },
+    },
+  },
+  {
+    ignores: [`build/`],
+  },
+]
diff --git a/package.json b/package.json
@@ -23,59 +23,58 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "@iconify/svelte": "^3.1.6",
-    "@sveltejs/kit": "^2.5.0",
-    "@threlte/core": "7.0.12",
-    "@threlte/extras": "8.3.0",
-    "d3": "^7.8.5",
+    "@iconify/svelte": "^4.0.2",
+    "@sveltejs/kit": "^2.5.17",
+    "@threlte/core": "7.3.1",
+    "d3": "^7.9.0",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-format": "^3.1.0",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.0.0",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-shape": "^3.2.0",
     "highlight.js": "^11.9.0",
-    "svelte": "4.2.9",
-    "svelte-multiselect": "^10.2.0",
-    "svelte-zoo": "^0.4.9",
-    "three": "^0.160.1"
+    "svelte": "4.2.18",
+    "svelte-multiselect": "^10.3.0",
+    "svelte-zoo": "^0.4.10",
+    "three": "^0.165.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.1",
-    "@sveltejs/adapter-static": "3.0.1",
-    "@sveltejs/package": "^2.2.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@playwright/test": "^1.45.0",
+    "@sveltejs/adapter-static": "3.0.2",
+    "@sveltejs/package": "^2.3.2",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@threlte/extras": "8.11.4",
     "@types/d3-array": "^3.2.1",
     "@types/d3-color": "^3.1.3",
     "@types/d3-interpolate-path": "^2.0.3",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/d3-shape": "^3.1.6",
-    "@types/three": "^0.160.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
-    "@vitest/coverage-v8": "^1.2.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "@types/three": "^0.165.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "eslint": "^9.5.0",
+    "eslint-plugin-svelte": "^2.41.0",
     "hastscript": "^9.0.0",
-    "jsdom": "^24.0.0",
-    "mdsvex": "^0.11.0",
+    "jsdom": "^24.1.0",
+    "mdsvex": "^0.11.2",
     "mdsvexamples": "^0.4.1",
-    "prettier": "^3.2.4",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-katex-svelte": "^1.2.0",
     "rehype-slug": "^6.0.0",
     "remark-math": "3.0.0",
-    "sharp": "^0.33.2",
-    "svelte-check": "^3.6.3",
-    "svelte-preprocess": "^5.1.3",
-    "svelte-toc": "^0.5.7",
-    "svelte2tsx": "^0.7.0",
-    "typescript": "5.3.3",
-    "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "sharp": "^0.33.4",
+    "svelte-check": "^3.8.4",
+    "svelte-preprocess": "^6.0.1",
+    "svelte-toc": "^0.5.9",
+    "svelte2tsx": "^0.7.13",
+    "typescript": "5.5.2",
+    "typescript-eslint": "^7.14.1",
+    "vite": "^5.3.2",
+    "vitest": "^1.6.0"
   },
   "keywords": [
     "svelte",

diff --git a/src/lib/element/data.ts b/src/lib/element/data.ts
@@ -3327,7 +3327,7 @@ export default [
     atomic_mass: 190.233,
     category: `transition metal`,
     density: 22.59,
-    discoverer: `Smithson Tennant`,
+    discoverer: `Smithson Tennant`, // codespell:ignore
     molar_heat: 24.7,
     number: 76,
     period: 6,
@@ -3370,7 +3370,7 @@ export default [
     atomic_mass: 192.2173,
     category: `transition metal`,
     density: 22.56,
-    discoverer: `Smithson Tennant`,
+    discoverer: `Smithson Tennant`, // codespell:ignore
     molar_heat: 25.1,
     number: 77,
     period: 6,

diff --git a/src/lib/structure/Lattice.svelte b/src/lib/structure/Lattice.svelte
@@ -5,62 +5,64 @@
   import { BoxGeometry, Matrix4, Vector3 } from 'three'
   import Bond from './Bond.svelte'
 
-  export let matrix: [Vector, Vector, Vector]
+  export let matrix: [Vector, Vector, Vector] | undefined = undefined
   export let show_cell: 'surface' | 'wireframe' | null = `wireframe`
   // thickness of the wireframe lines that indicate the lattice's unit cell
   // due to limitations of OpenGL with WebGL renderer, on most platforms linewidth will be 1 regardless of set value
   // see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial.wireframe
   export let cell_color: string = `white`
   export let cell_line_width: number = 1
   // cell opacity
-  export let cell_opacity: number = 1
+  export let cell_opacity: number | undefined = show_cell == `surface` ? 0.2 : 0.4
   // whether to show the lattice vectors
   export let show_vectors: boolean = true
   // lattice vector colors
   export let vector_colors: [string, string, string] = [`red`, `green`, `blue`]
   // lattice vector origin (all arrows start from this point)
   export let vector_origin: Vector = [-1, -1, -1]
 
-  $: lattice_center = scale(add(...matrix), 0.5)
+  $: lattice_center = scale(add(...(matrix ?? [])), 0.5)
 </script>
 
-{#key matrix}
-  {#if show_cell}
-    {@const shear_matrix = new Matrix4().makeBasis(
-      ...matrix.map((vec) => new Vector3(...vec, 0))
-    )}
-    {@const geometry = new BoxGeometry(1, 1, 1).applyMatrix4(shear_matrix)}
-    <T.Mesh {geometry} position={lattice_center}>
-      <T.MeshBasicMaterial
-        color={cell_color}
-        opacity={cell_opacity}
-        transparent={cell_opacity !== undefined}
-        wireframe={show_cell === `wireframe`}
-        line_width={cell_line_width}
-      />
-    </T.Mesh>
-  {/if}
+{#if matrix}
+  {#key matrix}
+    {#if show_cell}
+      {@const shear_matrix = new Matrix4().makeBasis(
+        ...matrix.map((vec) => new Vector3(...vec, 0)),
+      )}
+      {@const geometry = new BoxGeometry(1, 1, 1).applyMatrix4(shear_matrix)}
+      <T.Mesh {geometry} position={lattice_center}>
+        <T.MeshBasicMaterial
+          color={cell_color}
+          opacity={cell_opacity}
+          transparent={cell_opacity !== undefined}
+          wireframe={show_cell === `wireframe`}
+          line_width={cell_line_width}
+        />
+      </T.Mesh>
+    {/if}
 
-  {#if show_vectors}
-    <T.Group position={vector_origin}>
-      <!-- arrow shafts -->
-      <InstancedMesh>
-        <T.CylinderGeometry args={[0.1, 0.1, 1, 16]} />
-        <T.MeshStandardMaterial />
-        {#each matrix as vec, idx}
-          <Bond to={scale(vec, 0.5)} color={vector_colors[idx]} />
-        {/each}
-      </InstancedMesh>
+    {#if show_vectors}
+      <T.Group position={vector_origin}>
+        <!-- arrow shafts -->
+        <InstancedMesh>
+          <T.CylinderGeometry args={[0.1, 0.1, 1, 16]} />
+          <T.MeshStandardMaterial />
+          {#each matrix as vec, idx}
+            <Bond to={scale(vec, 0.5)} color={vector_colors[idx]} />
+          {/each}
+        </InstancedMesh>
 
-      <!-- arrow tips -->
-      <InstancedMesh>
-        <T.MeshStandardMaterial />
-        <!-- args=[thickness, length, radial segments] -->
-        <T.ConeGeometry args={[0.25, 0.12, 32]} />
-        {#each matrix as vec, idx}
-          <Bond to={vec} color={vector_colors[idx]} />
-        {/each}
-      </InstancedMesh>
-    </T.Group>
-  {/if}
-{/key}
+        <!-- arrow tips -->
+        <InstancedMesh>
+          <T.MeshStandardMaterial />
+          <!-- args=[thickness, length, radial segments] -->
+          <T.ConeGeometry args={[0.25, 0.12, 32]} />
+          {#each matrix as vec, idx}
+            <Bond to={vec} color={vector_colors[idx]} />
+          {/each}
+        </InstancedMesh>
+      </T.Group>
+    {/if}
+  {/key}
+{/if}