From e3f4674d27a00f0f09a792bc654a8b784339295c Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Thu, 21 Sep 2023 12:42:29 +0200 Subject: [PATCH 1/3] feat: add button bar and debug-related components --- src/lib/controls/ButtonBar.svelte | 54 +++++++++++ .../debug/CollapsableDebugDetail.svelte | 28 ++++++ src/lib/controls/debug/DebugPanel.svelte | 90 +++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 src/lib/controls/ButtonBar.svelte create mode 100644 src/lib/controls/debug/CollapsableDebugDetail.svelte create mode 100644 src/lib/controls/debug/DebugPanel.svelte diff --git a/src/lib/controls/ButtonBar.svelte b/src/lib/controls/ButtonBar.svelte new file mode 100644 index 0000000..e1e25ba --- /dev/null +++ b/src/lib/controls/ButtonBar.svelte @@ -0,0 +1,54 @@ + + +
+ +
+ + diff --git a/src/lib/controls/debug/CollapsableDebugDetail.svelte b/src/lib/controls/debug/CollapsableDebugDetail.svelte new file mode 100644 index 0000000..dc23593 --- /dev/null +++ b/src/lib/controls/debug/CollapsableDebugDetail.svelte @@ -0,0 +1,28 @@ + + +
+ {title} + +
+ {#if isOpen} + + 
+{JSON.stringify(dataToDisplay, null, 2)}
+
+ + {/if} +
+
+ + diff --git a/src/lib/controls/debug/DebugPanel.svelte b/src/lib/controls/debug/DebugPanel.svelte new file mode 100644 index 0000000..b8abb66 --- /dev/null +++ b/src/lib/controls/debug/DebugPanel.svelte @@ -0,0 +1,90 @@ + + +
+

+ +

+ +
+ + From 4f82ef74e66cab14342b601c184c9966455545e3 Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Thu, 21 Sep 2023 15:02:46 +0200 Subject: [PATCH 2/3] doc: adjust the project README and use it as the Homepage of the showcase website --- README.md | 42 ++++++++++++++++++++++++++++----------- src/app.d.ts | 9 ++++++++- src/routes/+page.md | 44 ----------------------------------------- src/routes/+page.svelte | 8 ++++++++ src/routes/+page.ts | 9 +++++++++ vite.config.ts | 5 +++++ 6 files changed, 60 insertions(+), 57 deletions(-) delete mode 100644 src/routes/+page.md create mode 100644 src/routes/+page.svelte create mode 100644 src/routes/+page.ts diff --git a/README.md b/README.md index 2b99ccc..79223f5 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,37 @@ # Molstar Svelte Library -This is a collection of [Svelte](https://svelte.dev) components for [Mol\*](https://molstar.org) visualizations. +*A collection of [Svelte](https://svelte.dev) components for [Mol\*](https://molstar.org)-based visualizations* -![build status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/build.yml/badge.svg?event=push) ![deploy status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/deploy.yml/badge.svg?event=push) ![publish status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/publish.yml/badge.svg?event=release) +![build status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/build.yml/badge.svg?event=push) ![deploy status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/deploy.yml/badge.svg?event=push) ![publish status badge](https://github.com/0gust1/molstar-svelte/actions/workflows/publish.yml/badge.svg?event=release) ## Goals - **Provide a set of composable components** that can be used to build web applications, websites or components enabling visualization and analysis of biomolecular structures. - **Provide a set of examples** of how to use the components in a Svelte application. -- **Keep the components as simple as possible**, and let the user decide how to use them: The goal **is not** to provide a full set of components with extensive Molstar API coverage, but rather a set of building blocks (and examples/inspirations) that can be used to build a custom application. +- **Keep the components as simple as possible**, and let the user decide how to use them. +- **The goal is not** to redo the Molstar Viewer in Svelte. +- **The goal is not** to provide a full set of components with extensive Molstar API coverage, but rather a set of building blocks (and examples/inspirations) that can be used to build a custom application. + -The components are designed to be used in a [Svelte](https://svelte.dev) application, ~~but could be used in any framework that supports [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)~~ (later). +The components are designed to be used in a [Svelte](https://svelte.dev) or [SvelteKit](https://kit.svelte.dev/) application. ~~They could be also be used in any framework that supports [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)~~ (later). -## Please Note +## Please Note! -This package is still in early development, and the API is not stable. Until it reaches version 1.0.0, breaking changes may be introduced in any versions. +**This package is still in early development, and the API is not stable.** Until it reaches version 1.0.0, breaking changes may be introduced in any versions. -__Pin your dependencies__ if you're bold enough to use it! (and drop me a message, I'd love to hear about it!). +**Pin your dependencies if you're bold enough to use it!** (and drop me a message, I'd really love to hear about it!). -## Getting Started, Documentation, Showcase +## Usage, Getting Started, Documentation, Showcase [https://0gust1.github.io/molstar-svelte/](https://0gust1.github.io/molstar-svelte/) -## Development +See the dedicated [Get started](https://0gust1.github.io/molstar-svelte/getting-started) page. + +## Feedback, issues, contributions, questions + +Feel free to initiate a discussion in the [Repository Discussions](https://github.com/0gust1/molstar-svelte/discussions) or [Repository Issues](https://github.com/0gust1/molstar-svelte/issues). + +## Library Development Install the dependencies... @@ -37,7 +46,7 @@ npm run dev -- --open Everything inside `src/lib` is part of the library, everything inside `src/routes` is used to generate the documentation/showcase/e2e website. -## Building +### Building To build the library: @@ -53,10 +62,19 @@ npm run build You can preview the production build with `npm run preview`. -## Updating the documentation/showcase +### Updating the documentation/showcase website Website/doc deployment is done through github actions, on push on `master` -## Publishing +### Publishing on npmjs.com Publishing is done through github actions, on release creation on `master`. + +## Licensing and attributions + +`molstar-svelte` is licensed under the [MIT License](https://opensource.org/license/mit/). + +**Mol\*:** +> David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: +> [Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, Nucleic Acids Research, 2021; 10.1093/nar/gkab31](https://academic.oup.com/nar/article/49/W1/W431/6270780). +In memory of Jaroslav Koča. \ No newline at end of file diff --git a/src/app.d.ts b/src/app.d.ts index 629c7a3..80908c8 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -5,7 +5,14 @@ declare global { // interface Error {} // interface Locals {} // interface PageData {} - // interface Platform { + // interface Platform {} + + interface MdsvexFile { + default: import('svelte/internal').SvelteComponent; + metadata: Record; + } + + type MdsvexResolver = () => Promise; } declare const __PKG_VERSION__: string; declare const __PKG_NAME__: string; diff --git a/src/routes/+page.md b/src/routes/+page.md deleted file mode 100644 index 5da8887..0000000 --- a/src/routes/+page.md +++ /dev/null @@ -1,44 +0,0 @@ - - -# A collection of Svelte components for Mol* visualizations - - -[Mol\*](https://molstar.org) (/'molstar/) is a modern web-based open-source toolkit for visualisation and analysis of large-scale molecular data. - -This package is a collection of [Svelte](https://svelte.dev) components for [Mol\*](https://molstar.org) visualizations. - - -## Goals -- **Provide a set of composable components** that can be used to build web applications, websites or components enabling visualization and analysis of biomolecular structures. -- **Provide a set of examples** of how to use the components in a Svelte application. -- **Keep the components as simple as possible**, and let the user decide how to use them: The goal **is not** to provide a full set of components with extensive Molstar API coverage, but rather a set of building blocks (and examples/inspirations) that can be used to build a custom application. - -The components are designed to be used in a [Svelte](https://svelte.dev) application, ~~but could be used in any framework that supports [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)~~ (later). - -## Please Note - -This package is still in early development, and the API is not stable. Until it reaches version 1.0.0, breaking changes may be introduced in any versions. - -__Pin your dependencies__ if you're bold enough to use it! (and drop me a message, I'd love to hear about it!). - - -## Installation / getting started - -See the dedicated [Get started]({base}/getting-started) page. - -## Feedback, issues, contributions, questions - -Feel free to initiate a discussion in the [Repository Discussions](https://github.com/0gust1/molstar-svelte/discussions) or [Repository Issues](https://github.com/0gust1/molstar-svelte/issues). - - -## Licensing and attributions - -`molstar-svelte` is licensed under the [MIT License](https://opensource.org/license/mit/). - -**Mol\*:** -> David Sehnal, Sebastian Bittrich, Mandar Deshpande, Radka Svobodová, Karel Berka, Václav Bazgier, Sameer Velankar, Stephen K Burley, Jaroslav Koča, Alexander S Rose: -> [Mol* Viewer: modern web app for 3D visualization and analysis of large biomolecular structures, Nucleic Acids Research, 2021; 10.1093/nar/gkab31](https://academic.oup.com/nar/article/49/W1/W431/6270780). -In memory of Jaroslav Koča. diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte new file mode 100644 index 0000000..47a4f3a --- /dev/null +++ b/src/routes/+page.svelte @@ -0,0 +1,8 @@ + + + diff --git a/src/routes/+page.ts b/src/routes/+page.ts new file mode 100644 index 0000000..8d195f7 --- /dev/null +++ b/src/routes/+page.ts @@ -0,0 +1,9 @@ +export const load = async () => { + const readmeComponentImporter = (await import.meta.glob('../../README.md')) as unknown as Record< + string, + App.MdsvexResolver + >; + const postResolver = await readmeComponentImporter['../../README.md'](); + const post = await postResolver.default; + return { content: post }; +}; diff --git a/vite.config.ts b/vite.config.ts index 68f9efd..8fbdb3e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -7,6 +7,11 @@ export default defineConfig({ test: { include: ['src/**/*.{test,spec}.{js,ts}'] }, + server: { + fs: { + allow: ['..'] + } + }, // https://vitejs.dev/config/shared-options.html#define // used to expose info from package.json to app code // DO NOT expose secrets here From a1f87d01d5080e49d683b3d8f0c9df885d4bb626 Mon Sep 17 00:00:00 2001 From: Augustin Chassine Date: Thu, 21 Sep 2023 17:55:22 +0200 Subject: [PATCH 3/3] doc: demo and roadmap updates --- .../components/simple-elements/+page.md | 26 ++++++++++++++----- src/routes/roadmap/+page.md | 2 +- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/routes/components/simple-elements/+page.md b/src/routes/components/simple-elements/+page.md index e95b962..3f5d836 100644 --- a/src/routes/components/simple-elements/+page.md +++ b/src/routes/components/simple-elements/+page.md @@ -58,7 +58,9 @@ {#if browser} {#await loadComponentDemoWithPDB() then MolstarComp} +
+
{/await} {/if} @@ -66,7 +68,9 @@ {#if browser} {#await loadComponentDemoWithPDB() then MolstarComp} +
+
{/await} {/if} @@ -79,24 +83,32 @@ ### URL, with one instance {#if browser} - {#await loadComponentDemoWithURLs() then MolstarComp} - - {/await} +{#await loadComponentDemoWithURLs() then MolstarComp} +
+ +
+{/await} {/if} ### URL, with several instances (reactive) + (todo: fix this, some problems with the reactive part/each keyed loop) + {#if browser} - {#await loadComponentDemoWithURLs() then MolstarComp} - - {/await} +{#await loadComponentDemoWithURLs() then MolstarComp} +
+ +
+{/await} {/if} ### URLChain one instance {#if browser} {#await loadComponentDemoWithURLChains() then MolstarComp} +
+
{/await} {/if} @@ -106,6 +118,8 @@ {#if browser} {#await loadComponentDemoWithURLChains() then MolstarComp} +
+
{/await} {/if} \ No newline at end of file diff --git a/src/routes/roadmap/+page.md b/src/routes/roadmap/+page.md index a91ec06..2d885d0 100644 --- a/src/routes/roadmap/+page.md +++ b/src/routes/roadmap/+page.md @@ -17,7 +17,7 @@ More sophisticated design (like component factories / programmaic components) co - [ ] create a set of controls components (button-bar, debug ui, etc.), refine styling concerns (outside plugin) - [ ] refine the API around representation and coloring (in plugin) - [ ] A drag and drop component to load a file (most common formats, including `ply`). -- [ ] explore a dedicated synchronized grid component +- [ ] explore a dedicated synchronized grid component, with zoomable/focusable thumbnails - [ ] explore a dedicated superposition component ## References / resources