wip: changes to demo, alphafold poc component

src/lib/controls/Scene.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	import type { PluginContext } from 'molstar/lib/mol-plugin/context';
+	const plugin = getContext<{ getPlugin: () => PluginContext }>('molstar').getPlugin();
+	const highlightS = plugin.behaviors.labels.highlight;
+
+	let clazz = '';
+	export { clazz as class };
+</script>
+
+<!-- <ul>
+	{#each plugin.log.entries as log}
+		<li>{log.type} - {log.message}</li>
+	{/each}
+</ul>
+
+<ul>
+	{#each plugin.hierarchy.current.structures as structure}
+		<li>{structure.label}</li>
+	{/each}
+</ul> -->
+
+<style lang="postcss">
+	.molstar-svelte-highlight-info {
+	}
+</style>

src/lib/elements/StructureAlphaFold.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	/**
+	 * Load a structure from an URL
+	 * @param url URL to load the structure from
+	 * @param type Type of the structure
+	 */
+
+	import { getContext, onMount, onDestroy } from 'svelte';
+	import { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+	import { PluginCommands } from 'molstar/lib/mol-plugin/commands.js';
+	import { DownloadStructure } from 'molstar/lib/mol-plugin-state/actions/structure.js';
+	import { QualityAssessmentPLDDTPreset } from 'molstar/lib/extensions/model-archive/quality-assessment/behavior.js';
+	import type { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory.js';
+	import { StructureRepresentationPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/representation-preset.js';
+	import { PluginConfig } from 'molstar/lib/mol-plugin/config.js';
+
+	export let url: string;
+	export let type: BuiltInTrajectoryFormat;
+	export let alphaDBId: string;
+	type Preset =
+		| 'auto'
+		| 'empty'
+		| 'illustrative'
+		| 'atomic-detail'
+		| 'polymer-cartoon'
+		| 'polymer-and-ligand'
+		| 'protein-and-nucleic'
+		| 'coarse-surface'
+		| undefined;
+
+	const plugin = getContext<{ getPlugin: () => PluginContext }>('molstar').getPlugin();
+	let structure: Awaited<ReturnType<typeof plugin.builders.structure.createStructure>>;
+
+	//plugin.representation.structure.themes.colorThemeRegistry.add();
+	plugin.builders.structure.representation.registerPreset(QualityAssessmentPLDDTPreset);
+
+	const init = async () => {
+		let data;
+
+		const params = DownloadStructure.createDefaultParams(plugin.state.data.root.obj!, plugin);
+
+		data = await plugin.builders.data.download({ url: url }, { state: { isGhost: false } });
+		const trajectory = await plugin.builders.structure.parseTrajectory(data, type);
+		const model = await plugin.builders.structure.createModel(trajectory);
+		const struct = await plugin.builders.structure.createStructure(model);
+		structure = struct;
+
+		console.log('structure', structure);
+
+		await plugin.builders.structure.hierarchy.applyPreset(
+			trajectory,
+			'preset-structure-representation-ma-quality-assessment-plddt'
+		);
+		//await plugin.builders.structure.hierarchy.applyPreset(model, 'default', params);
+
+		//const model = await plugin.builders.structure.createModel(trajectory);
+		//const params = StructureRepresentationPresetProvider.CommonParams;
+		//await QualityAssessmentPLDDTPreset.apply(model.ref, params, plugin);
+		//const struct = await plugin.builders.structure.createStructure(model);
+		//structure = struct;
+
+		//await plugin.managers.structure.component.updateRepresentationsTheme();
+
+		//await plugin.builders.structure.hierarchy.applyPreset(structure, 'default', params);
+		//await plugin.builders.structure.hierarchy.applyPreset(structure, 'default');
+		//QualityAssessmentPLDDTPreset.apply(structure, params, plugin);
+		// await plugin.managers.structure.component.applyPreset(
+		// 	structure,
+		// 	QualityAssessmentPLDDTPreset,
+		// 	params
+		// );
+
+		// const params = DownloadStructure.createDefaultParams(plugin.state.data.root.obj!, plugin);
+		//  await plugin.runTask(
+		// 	plugin.state.data.applyAction(DownloadStructure, {
+		// 		source: {
+		// 			name: 'alphafolddb' as const,
+		// 			params: {
+		// 				id: alphaDBId,
+		// 				options: {
+		// 					...params.source.params.options,
+		// 					representation: 'preset-structure-representation-ma-quality-assessment-plddt'
+		// 				}
+		// 			}
+		// 		}
+		// 	})
+		// );
+
+		return;
+		//return;
+	};
+	onMount(async () => {
+		await init();
+	});
+	onDestroy(() => {
+		plugin.commands.dispatch(PluginCommands.State.RemoveObject, {
+			state: plugin.state.data,
+			ref: structure.ref
+		});
+	});
+</script>

src/lib/elements/StructureURL.svelte

@@ -33,7 +33,7 @@
 		const model = await plugin.builders.structure.createModel(trajectory);
 		const struct = await plugin.builders.structure.createStructure(model);
 		structure = struct;
-		await plugin.builders.structure.hierarchy.applyPreset(structure, 'default');
+		await plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default');
 	};
 	onMount(() => {
 		init();

src/routes/components/simple-controls/+page.md

@@ -7,14 +7,31 @@
 			return m.default;
 		});
 
+		const loadComponentDemoWithControls2 = async () =>
+		import('./DemoControls2.svelte').then((m) => {
+			return m.default;
+		});
+
 </script>
 
 # SimpleWrapper + controls
 
-## Highlight info
+## Highlight info + ButtonBar
 
 {#if browser}
 	{#await loadComponentDemoWithControls() then MolstarComp}
+	<div class="not-prose">
+		<svelte:component this={MolstarComp} />
+	</div>
+	{/await}
+{/if}
+
+## Highlight info + ButtonBar variant
+
+{#if browser}
+	{#await loadComponentDemoWithControls2() then MolstarComp}
+	<div class="not-prose">
 		<svelte:component this={MolstarComp} />
+	</div>
 	{/await}
 {/if}

src/routes/components/simple-controls/DemoControls.svelte

@@ -2,22 +2,23 @@
 	import StructureURL from '$lib/elements/StructureURL.svelte';
 	import HighlightInfo from '$lib/controls/HighlightInfo.svelte';
 	import MolstarWrapper from '$lib/wrappers/SimpleWrapper.svelte';
-
+	import ButtonBar from '$lib/controls/ButtonBar.svelte';
 	export let structuresURLs = [
 		{ url: 'https://files.rcsb.org/view/7YUB.cif', type: 'mmcif' },
 		{ url: 'https://alphafold.ebi.ac.uk/files/AF-P00533-F1-model_v4.cif', type: 'mmcif' }
 	];
 	let selectedStructuresURLs = [...structuresURLs];
 </script>
 
-<MolstarWrapper class="h-96 relative">
+<MolstarWrapper class="h-96">
 	<svelte:fragment slot="inside">
 		{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)}
 			<StructureURL url={structureURL.url} type={structureURL.type} />
 		{/each}
 		<HighlightInfo />
 	</svelte:fragment>
 	<svelte:fragment slot="outside">
+		<ButtonBar />
 		<div>
 			Displaying:
 			{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)}

src/routes/components/simple-controls/DemoControls2.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import StructureURL from '$lib/elements/StructureURL.svelte';
+	import StructureAlphaFold from '$lib/elements/StructureAlphaFold.svelte';
+	import HighlightInfo from '$lib/controls/HighlightInfo.svelte';
+	import DebugPanel from '$lib/controls/debug/DebugPanel.svelte';
+	import Scene from '$lib/controls/Scene.svelte';
+	import MolstarWrapper from '$lib/wrappers/SimpleWrapper.svelte';
+	import ButtonBar from '$lib/controls/ButtonBar.svelte';
+	export let structuresURLs = [
+		{ url: 'https://alphafold.ebi.ac.uk/files/AF-Q8W3K0-F1-model_v4.cif', type: 'mmcif' }
+	];
+	let selectedStructuresURLs = [...structuresURLs];
+</script>
+
+<div>
+	<MolstarWrapper pluginCssClasses="h-96 w-full" class="flex">
+		<svelte:fragment slot="inside">
+			<StructureAlphaFold
+				url={selectedStructuresURLs[0].url}
+				type={selectedStructuresURLs[0].type}
+			/>
+
+			<HighlightInfo />
+		</svelte:fragment>
+		<div slot="outside" class="flex flex-col">
+			<ButtonBar class="flex flex-col bg-red-500" />
+			<DebugPanel panelOpen={false} />
+			<Scene />
+			<div>
+				Displaying:
+				{#each selectedStructuresURLs as structureURL (`${structureURL.url}-${structureURL.type}`)}
+					<p class="text-xs"><span>{structureURL.url}</span> <span>({structureURL.type})</span></p>
+				{/each}
+			</div>
+		</div>
+	</MolstarWrapper>
+</div>