From 2df8493e182c7bb8aa3a9dff72929550abf3e45d Mon Sep 17 00:00:00 2001 From: Janosh Riebesell Date: Tue, 10 Oct 2023 18:59:25 -0700 Subject: [PATCH] Add `SymmetryCard.svelte` (#42) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add SymmetryCard.svelte add superscript_digits() helper in labels.ts for pretty-printing oxidation states Cr3+ O2- Ac3+ -> Cr³⁺ O²⁻ Ac³⁺ * add test superscript_digits * delete CI install-cmd: npm install --force * update deps * mock ResizeObserver in unit tests * update molecules mention in readme --- .github/workflows/gh-pages.yml | 2 - .github/workflows/test.yml | 2 - .pre-commit-config.yaml | 2 +- package.json | 64 ++++++++++++------------ readme.md | 2 +- src/app.css | 6 ++- src/lib/InfoCard.svelte | 4 +- src/lib/labels.ts | 20 ++++++++ src/lib/material/MaterialCard.svelte | 53 +++++++++++++++----- src/lib/material/SymmetryCard.svelte | 29 +++++++++++ src/lib/structure/Structure.svelte | 6 +-- src/lib/structure/StructureCard.svelte | 7 +-- src/lib/structure/StructureLegend.svelte | 3 ++ src/routes/+page.md | 2 +- src/routes/mp-[slug]/+page.svelte | 6 +-- src/site/DemoNav.svelte | 5 +- tests/unit/ColorBar.test.ts | 9 ++-- tests/unit/index.ts | 7 +++ tests/unit/labels.test.ts | 8 +++ 19 files changed, 165 insertions(+), 72 deletions(-) create mode 100644 src/lib/material/SymmetryCard.svelte diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 71c41a3..5b6fb7a 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -10,5 +10,3 @@ 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 index 4aba752..d54ad54 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -12,5 +12,3 @@ 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 index 9b25b40..8c0ad24 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -17,7 +17,7 @@ repos: - id: trailing-whitespace - repo: https://github.com/pre-commit/mirrors-prettier - rev: v3.0.0 + rev: v3.0.1 hooks: - id: prettier args: [--write] # edit files in-place diff --git a/package.json b/package.json index fd35046..047a4d7 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,9 @@ }, "dependencies": { "@iconify/svelte": "^3.1.4", - "@sveltejs/kit": "^1.22.4", - "@threlte/core": "6.0.1", - "@threlte/extras": "5.0.2", + "@sveltejs/kit": "^1.25.2", + "@threlte/core": "6.0.10", + "@threlte/extras": "7.0.1", "d3": "^7.8.5", "d3-array": "^3.2.4", "d3-color": "^3.1.0", @@ -35,47 +35,46 @@ "d3-scale": "^4.0.2", "d3-scale-chromatic": "^3.0.0", "d3-shape": "^3.2.0", - "highlight.js": "^11.8.0", - "svelte": "4.1.2", - "svelte-multiselect": "^10.1.0", - "three": "^0.155.0" + "highlight.js": "^11.9.0", + "svelte": "4.2.1", + "svelte-multiselect": "^10.2.0", + "three": "^0.157.0" }, "devDependencies": { - "@playwright/test": "^1.36.2", + "@playwright/test": "^1.38.1", "@sveltejs/adapter-static": "2.0.3", - "@sveltejs/package": "^2.2.0", - "@types/d3-array": "^3.0.5", - "@types/d3-color": "^3.1.0", - "@types/d3-interpolate-path": "^2.0.0", - "@types/d3-scale": "^4.0.3", + "@sveltejs/package": "^2.2.2", + "@types/d3-array": "^3.0.8", + "@types/d3-color": "^3.1.1", + "@types/d3-interpolate-path": "^2.0.1", + "@types/d3-scale": "^4.0.5", "@types/d3-scale-chromatic": "^3.0.0", - "@types/d3-shape": "^3.1.1", - "@types/three": "^0.155.0", - "@typescript-eslint/eslint-plugin": "^6.2.1", - "@typescript-eslint/parser": "^6.2.1", - "@vitest/coverage-v8": "^0.34.1", - "eslint": "^8.46.0", - "eslint-plugin-svelte": "^2.32.4", + "@types/d3-shape": "^3.1.3", + "@types/three": "^0.157.0", + "@typescript-eslint/eslint-plugin": "^6.7.5", + "@typescript-eslint/parser": "^6.7.5", + "@vitest/coverage-v8": "^0.34.6", + "eslint": "^8.51.0", + "eslint-plugin-svelte": "^2.34.0", "hastscript": "^8.0.0", "jsdom": "^22.1.0", "mdsvex": "^0.11.0", - "mdsvexamples": "^0.3.3", - "prettier": "^3.0.1", + "mdsvexamples": "^0.4.1", + "prettier": "^3.0.3", "prettier-plugin-svelte": "^3.0.3", - "rehype-autolink-headings": "^6.1.1", + "rehype-autolink-headings": "^7.0.0", "rehype-katex-svelte": "^1.2.0", - "rehype-slug": "^5.1.0", + "rehype-slug": "^6.0.0", "remark-math": "3.0.0", - "rollup": "3.27.0", - "sharp": "^0.32.4", - "svelte-check": "^3.4.6", + "sharp": "^0.32.6", + "svelte-check": "^3.5.2", "svelte-preprocess": "^5.0.4", - "svelte-toc": "^0.5.5", + "svelte-toc": "^0.5.6", "svelte-zoo": "^0.4.9", - "svelte2tsx": "^0.6.19", - "typescript": "5.1.6", - "vite": "^4.4.8", - "vitest": "^0.34.1" + "svelte2tsx": "^0.6.23", + "typescript": "5.2.2", + "vite": "^4.4.11", + "vitest": "^0.34.6" }, "keywords": [ "svelte", @@ -107,6 +106,7 @@ "default": "./dist/stores.js" } }, + "types": "./dist/index.d.ts", "files": [ "dist" ] diff --git a/readme.md b/readme.md index a71440e..5454703 100644 --- a/readme.md +++ b/readme.md @@ -13,7 +13,7 @@ -`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (molecules coming soon!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏 +`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (and molecules, though needs some improvements!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏 ![Screenshot of landing page](static/2023-02-13-landing-page.webp) diff --git a/src/app.css b/src/app.css index a3cc058..dd44bf4 100644 --- a/src/app.css +++ b/src/app.css @@ -69,13 +69,17 @@ a.btn { a:hover { color: orange; } -code { +code, +kbd { overflow-wrap: break-word; padding: 1pt 3pt; border-radius: 3pt; font-size: 1.3em; background-color: black; } +kbd { + font-size: larger; +} pre code { background-color: transparent; display: inline-block; diff --git a/src/lib/InfoCard.svelte b/src/lib/InfoCard.svelte index 748f228..be6c4cd 100644 --- a/src/lib/InfoCard.svelte +++ b/src/lib/InfoCard.svelte @@ -61,8 +61,8 @@ } h2 { grid-column: 1 / -1; - margin: 1ex 0; - text-align: center; + margin: 0; + border-bottom: 1px solid var(--ic-title-border-color, rgba(255, 255, 255, 0.3)); } div { display: flex; diff --git a/src/lib/labels.ts b/src/lib/labels.ts index e588b10..5cfac94 100644 --- a/src/lib/labels.ts +++ b/src/lib/labels.ts @@ -121,3 +121,23 @@ export function choose_bw_for_contrast( luminance(get_bg_color(node, bg_color)) > text_color_threshold return light_bg ? `black` : `white` // white text for dark backgrounds, black for light } + +export const superscript_map = { + '0': `⁰`, + '1': `¹`, + '2': `²`, + '3': `³`, + '4': `⁴`, + '5': `⁵`, + '6': `⁶`, + '7': `⁷`, + '8': `⁸`, + '9': `⁹`, + '+': `⁺`, + '-': `⁻`, +} + +export function superscript_digits(input: string): string { + // use replace all signs and digits with their unicode superscript equivalent + return input.replace(/[\d+-]/g, (match) => superscript_map[match]) +} diff --git a/src/lib/material/MaterialCard.svelte b/src/lib/material/MaterialCard.svelte index 7d85100..a05ce11 100644 --- a/src/lib/material/MaterialCard.svelte +++ b/src/lib/material/MaterialCard.svelte @@ -1,6 +1,7 @@ - + + + + +
- Related materials IDs + Related material IDs {#if material.task_ids?.length}

Task IDs: {#each material.task_ids as id} @@ -99,6 +120,12 @@ p { display: flex; flex-wrap: wrap; - gap: 0 1em; + gap: 1ex 1em; + font-size: smaller; + } + p a { + background-color: rgba(255, 255, 255, 0.1); + padding: 0 3pt; + border-radius: 3pt; } diff --git a/src/lib/material/SymmetryCard.svelte b/src/lib/material/SymmetryCard.svelte new file mode 100644 index 0000000..70d39d3 --- /dev/null +++ b/src/lib/material/SymmetryCard.svelte @@ -0,0 +1,29 @@ + + + diff --git a/src/lib/structure/Structure.svelte b/src/lib/structure/Structure.svelte index ac933c9..1b0113a 100644 --- a/src/lib/structure/Structure.svelte +++ b/src/lib/structure/Structure.svelte @@ -106,7 +106,7 @@ } function on_file_drop(event: DragEvent) { - // TODO support dragging CIF files + // TODO support dragging CIF/XYZ files dragover = false if (!allow_file_drop) return const file = event.dataTransfer?.items[0].getAsFile() @@ -456,7 +456,7 @@ box-sizing: border-box; top: var(--struct-controls-top, 30pt); right: var(--struct-controls-right, 6pt); - background: var(--struct-controls-bg, rgba(0, 0, 0, 0.8)); + background: var(--struct-controls-bg, rgba(10, 10, 10, 0.8)); padding: var(--struct-controls-padding, 6pt 9pt); border-radius: var(--struct-controls-border-radius, 3pt); width: var(--struct-controls-width, 20em); @@ -509,7 +509,7 @@ .atom-label { background: var(--struct-atom-label-bg, rgba(0, 0, 0, 0.2)); border-radius: var(--struct-atom-label-border-radius, 3pt); - padding: var(--struct-atom-label-padding, 1px 6px); + padding: var(--struct-atom-label-padding, 0 3px); } input[type='color'] { width: var(--struct-input-color-width, 40px); diff --git a/src/lib/structure/StructureCard.svelte b/src/lib/structure/StructureCard.svelte index a0fa51e..6a8a332 100644 --- a/src/lib/structure/StructureCard.svelte +++ b/src/lib/structure/StructureCard.svelte @@ -4,6 +4,7 @@ import InfoCard from '../InfoCard.svelte' export let structure: PymatgenStructure + export let title: string = `Structure` $: ({ volume, a, b, c, alpha, beta, gamma } = structure?.lattice ?? {}) @@ -11,7 +12,7 @@ diff --git a/src/lib/structure/StructureLegend.svelte b/src/lib/structure/StructureLegend.svelte index 949e995..79711db 100644 --- a/src/lib/structure/StructureLegend.svelte +++ b/src/lib/structure/StructureLegend.svelte @@ -53,6 +53,9 @@ Click on an atom to make it active. Then hover another atom to get its distance to the active atom.

+

+ Hold shift or cmd or ctrl and drag to pan the scene. +

diff --git a/src/routes/+page.md b/src/routes/+page.md index 24918a8..fb50423 100644 --- a/src/routes/+page.md +++ b/src/routes/+page.md @@ -9,7 +9,7 @@ # Elementari -`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (molecules coming soon!), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏 +`elementari` is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (and molecules, though could use some improvements), Bohr atoms, nuclei, heatmaps, scatter plots. It's under active development and not yet ready for production use but we appreciate any feedback from beta testers! 🙏 Check out some of the examples in the navigation bar above. diff --git a/src/routes/mp-[slug]/+page.svelte b/src/routes/mp-[slug]/+page.svelte index 557ab01..3f0041b 100644 --- a/src/routes/mp-[slug]/+page.svelte +++ b/src/routes/mp-[slug]/+page.svelte @@ -62,9 +62,9 @@ - - - + + +

Crystal description diff --git a/src/site/DemoNav.svelte b/src/site/DemoNav.svelte index 446bc38..9b1d78f 100644 --- a/src/site/DemoNav.svelte +++ b/src/site/DemoNav.svelte @@ -12,8 +12,7 @@ @@ -21,7 +20,7 @@