fix: visually unbreak the demo (because of a CSS api change on the wr…

…apper component)
0gust1 · Sep 21, 2023 · 72c3816 · 72c3816
1 parent eb9092c
commit 72c3816
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 7 deletions.
diff --git a/src/lib/elements/StructureAlphaFold.svelte b/src/lib/elements/StructureAlphaFold.svelte
@@ -29,9 +29,11 @@
 		| undefined;
 
 	const plugin = getContext<{ getPlugin: () => PluginContext }>('molstar').getPlugin();
+
 	let structure: Awaited<ReturnType<typeof plugin.builders.structure.createStructure>>;
 
-	//plugin.representation.structure.themes.colorThemeRegistry.add();
+	// FIXME: move this at molstar wrapper level.
+	// when unmounting + mounting again, molstar understably complains about the preset already being registred.
 	plugin.builders.structure.representation.registerPreset(QualityAssessmentPLDDTPreset);
 
 	const init = async () => {
@@ -49,7 +51,8 @@
 
 		await plugin.builders.structure.hierarchy.applyPreset(
 			trajectory,
-			'preset-structure-representation-ma-quality-assessment-plddt'
+			'preset-structure-representation-ma-quality-assessment-plddt',
+			params
 		);
 		//await plugin.builders.structure.hierarchy.applyPreset(model, 'default', params);
 

diff --git a/src/routes/components/simple-controls/DemoControls.svelte b/src/routes/components/simple-controls/DemoControls.svelte
@@ -10,7 +10,7 @@
 	let selectedStructuresURLs = [...structuresURLs];
 </script>
 
-<MolstarWrapper class="h-96">
+<MolstarWrapper class="" pluginCssClasses="h-96 w-full">
 	<svelte:fragment slot="inside">
 		{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)}
 			<StructureURL url={structureURL.url} type={structureURL.type} />

diff --git a/src/routes/components/simple-elements/DemoRCSB.svelte b/src/routes/components/simple-elements/DemoRCSB.svelte
@@ -10,7 +10,7 @@
 <p class="text-xs">
 	Selected: <span class="text-violet-500">{selectedPdbIds.join(', ')}</span>
 </p>
-<MolstarWrapper class="h-96">
+<MolstarWrapper class="h-96" pluginCssClasses="h-96 w-full">
 	<svelte:fragment slot="inside">
 		{#each selectedPdbIds as pdbId (pdbId)}
 			<StructureRCSB {pdbId} />

diff --git a/src/routes/components/simple-elements/DemoURL.svelte b/src/routes/components/simple-elements/DemoURL.svelte
@@ -17,7 +17,7 @@
 		>{selectedStructuresURLs.map((e) => e.url).join(', ')}</span
 	>
 </p>
-<MolstarWrapper class="h-96">
+<MolstarWrapper class="h-96" pluginCssClasses="h-96 w-full">
 	<svelte:fragment slot="inside">
 		{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)}
 			<StructureURL url={structureURL.url} type={structureURL.type} />

diff --git a/src/routes/components/simple-elements/DemoURLChain.svelte b/src/routes/components/simple-elements/DemoURLChain.svelte
@@ -21,7 +21,7 @@
 		>{selectedStructuresURLs.map((e) => e.url).join(', ')}</span
 	>
 </p>
-<MolstarWrapper class="h-96">
+<MolstarWrapper class="" pluginCssClasses="h-96 w-full">
 	<svelte:fragment slot="inside">
 		{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}-${structureURL.chainId}`)}
 			<StructureURLChain

diff --git a/src/routes/getting-started/+page.md b/src/routes/getting-started/+page.md
@@ -34,7 +34,7 @@ export let structureType = 'mmcif';
 
 #### Slots
 
-You'll get 2 slots: `elements` and `controls`. 
+You'll get 2 slots: `inside` and `outside`. 
 
 Each component you'll inject in these two slots:
 - will be rendered in a different container (depending on the slot).