Skip to content

add molstar viewer to orca opt xyz viewer #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jacobfilik merged 1 commit into from
Oct 23, 2025
Merged

add molstar viewer to orca opt xyz viewer #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 25 additions & 26 deletions web-conexs-client/src/components/MolstarCrystalViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,42 @@ const Default3DSpec: PluginSpec = {
config: [[PluginConfig.VolumeStreaming.Enabled, false]],
};

let molstar: PluginContext | null = null;

export function MolStarCrystalWrapper(props: {
cif: string | null;
labelledAtomIndex: number | undefined;
}) {
const viewerDiv = useRef<HTMLDivElement>(null);
console.log("Mount");
const molstar = useRef<PluginContext | null>(null);

useEffect(() => {
console.log("GO");
const init = async (rawData: string) => {
molstar = new PluginContext(Default3DSpec);
molstar.current = new PluginContext(Default3DSpec);

await molstar.init();
await molstar.mountAsync(viewerDiv.current!);
await molstar.current.init();
await molstar.current.mountAsync(viewerDiv.current!);

if (rawData == null) {
return;
}

const data = await molstar.builders.data.rawData(
const data = await molstar.current.builders.data.rawData(
{ data: props.cif! },
{ state: { isGhost: true } }
);

const trajectory = await molstar.builders.structure.parseTrajectory(
data,
"cifCore"
);

const model = await molstar.builders.structure.createModel(trajectory);
const trajectory =
await molstar.current.builders.structure.parseTrajectory(
data,
"cifCore"
);

const s = await molstar.builders.structure.createStructure(model);
const model = await molstar.current.builders.structure.createModel(
trajectory
);

console.log(model);
const s = await molstar.current.builders.structure.createStructure(model);

console.log(s);
molstar
molstar.current
.build()
.to(s)
.apply(StructureRepresentation3D, {
Expand All @@ -73,12 +71,13 @@ export function MolStarCrystalWrapper(props: {
})
.commit();

await molstar.builders.structure.tryCreateUnitcell(model);
await molstar.current.builders.structure.tryCreateUnitcell(model);

const hierarchy = await molstar.builders.structure.hierarchy.applyPreset(
trajectory,
"default"
);
const hierarchy =
await molstar.current.builders.structure.hierarchy.applyPreset(
trajectory,
"default"
);

const struct = hierarchy!.structure.data!;

Expand All @@ -90,7 +89,7 @@ export function MolStarCrystalWrapper(props: {
});
const selection = query(new QueryContext(struct));
const loci = StructureSelection.toLociWithCurrentUnits(selection);
molstar.managers.interactivity.lociSelects.select({ loci });
molstar.current.managers.interactivity.lociSelects.select({ loci });
}
};

Expand All @@ -99,8 +98,8 @@ export function MolStarCrystalWrapper(props: {
}

return () => {
molstar?.dispose();
molstar = null;
molstar.current?.dispose();
molstar.current = null;
};
}, [viewerDiv, props.cif, props.labelledAtomIndex]);

Expand Down
48 changes: 19 additions & 29 deletions web-conexs-client/src/components/MolstarMoleculeViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,38 @@ const Default3DSpec: PluginSpec = {
config: [[PluginConfig.VolumeStreaming.Enabled, false]],
};

let molstar: PluginContext | null = null;

export function MolStarMoleculeWrapper(props: { xyz: string | null }) {
export function MolStarMoleculeWrapper(props: {
xyz: string | null | undefined;
}) {
const viewerDiv = useRef<HTMLDivElement>(null);
const molstar = useRef<PluginContext | null>(null);

useEffect(() => {
const init = async (rawData: string) => {
molstar = new PluginContext(Default3DSpec);
molstar.current = new PluginContext(Default3DSpec);

await molstar.init();
await molstar.mountAsync(viewerDiv.current!);
await molstar.current.init();
await molstar.current.mountAsync(viewerDiv.current!);

if (rawData == null) {
return;
}

const data = await molstar.builders.data.rawData(
const data = await molstar.current.builders.data.rawData(
{ data: rawData! },
{ state: { isGhost: true } }
);

const trajectory = await molstar.builders.structure.parseTrajectory(
data,
"xyz"
);
const trajectory =
await molstar.current.builders.structure.parseTrajectory(data, "xyz");

const model = await molstar.builders.structure.createModel(trajectory);
const model = await molstar.current.builders.structure.createModel(
trajectory
);

const s = await molstar.builders.structure.createStructure(model);
const s = await molstar.current.builders.structure.createStructure(model);

molstar
molstar.current
.build()
.to(s)
.apply(StructureRepresentation3D, {
Expand All @@ -59,7 +61,7 @@ export function MolStarMoleculeWrapper(props: { xyz: string | null }) {
})
.commit();

await molstar.builders.structure.hierarchy.applyPreset(
await molstar.current.builders.structure.hierarchy.applyPreset(
trajectory,
"default"
);
Expand All @@ -70,8 +72,8 @@ export function MolStarMoleculeWrapper(props: { xyz: string | null }) {
}

return () => {
molstar?.dispose();
molstar = null;
molstar.current?.dispose();
molstar.current = null;
};
}, [viewerDiv, props.xyz]);

Expand All @@ -86,17 +88,5 @@ export function MolStarMoleculeWrapper(props: { xyz: string | null }) {
minWidth: "100px",
}}
/>
// <Box position="relative" display="flex" flexGrow={5} h="100%" w="100%">
// <Box
// style={{
// width: "300px",
// height: "300px",
// position: "relative",
// minHeight: "100px",
// minWidth: "100px",
// }}
// ref={viewerDiv}
// ></Box>
// </Box>
);
}
34 changes: 16 additions & 18 deletions web-conexs-client/src/components/MolstarOrbitalViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,42 @@ const Default3DSpec: PluginSpec = {
config: [[PluginConfig.VolumeStreaming.Enabled, false]],
};

let molstar: PluginContext | null = null;

export function MolStarOrbitalWrapper(props: {
cube: string | null;
isoValue: number;
}) {
const viewerDiv = useRef<HTMLDivElement>(null);
console.log("Mount");
const molstar = useRef<PluginContext | null>(null);

useEffect(() => {
console.log("GO");
const init = async (rawData: string) => {
molstar = new PluginContext(Default3DSpec);
molstar.current = new PluginContext(Default3DSpec);

await molstar.init();
await molstar.mountAsync(viewerDiv.current!);
await molstar.current.init();
await molstar.current.mountAsync(viewerDiv.current!);

if (rawData == null) {
return;
}

const data = await molstar.builders.data.rawData(
const data = await molstar.current.builders.data.rawData(
{ data: rawData! },
{ state: { isGhost: true } }
);

const parsed = await molstar.dataFormats
const parsed = await molstar.current.dataFormats
.get("cube")!
.parse(molstar, data);
.parse(molstar.current, data);

const volume: StateObjectSelector<PluginStateObject.Volume.Data> =
parsed.volumes?.[0] ?? parsed.volume;

const positive = molstar
const positive = molstar.current
.build()
.to(volume)
.apply(
StateTransforms.Representation.VolumeRepresentation3D,
createVolumeRepresentationParams(molstar, volume.data!, {
createVolumeRepresentationParams(molstar.current, volume.data!, {
type: "isosurface",
color: "uniform",

Expand All @@ -73,12 +71,12 @@ export function MolStarOrbitalWrapper(props: {
})
);

const negative = molstar
const negative = molstar.current
.build()
.to(volume)
.apply(
StateTransforms.Representation.VolumeRepresentation3D,
createVolumeRepresentationParams(molstar, volume.data!, {
createVolumeRepresentationParams(molstar.current, volume.data!, {
type: "isosurface",
color: "uniform",
typeParams: {
Expand All @@ -97,7 +95,7 @@ export function MolStarOrbitalWrapper(props: {
})
);

molstar
molstar.current
.build()
.to(parsed.structure)
.apply(StructureRepresentation3D, {
Expand All @@ -115,7 +113,7 @@ export function MolStarOrbitalWrapper(props: {
})
.commit();

await molstar.builders.structure.hierarchy.applyPreset(
await molstar.current.builders.structure.hierarchy.applyPreset(
parsed.structure,
"default"
);
Expand All @@ -129,8 +127,8 @@ export function MolStarOrbitalWrapper(props: {
}

return () => {
molstar?.dispose();
molstar = null;
molstar.current?.dispose();
molstar.current = null;
};
}, [viewerDiv, props.cube, props.isoValue]);

Expand Down
2 changes: 0 additions & 2 deletions web-conexs-client/src/components/StructureViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ export default function StructureViewer(props: {
xyzData = moleculeInputToXYZ(query.data);
}

console.log(xyzData);

return (
<Box width={"100%"} height={"100%"}>
{molecule ? (
Expand Down
26 changes: 13 additions & 13 deletions web-conexs-client/src/components/orca/OrcaResultsTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,57 +43,57 @@ function getTabs(calcType: string, id: number, value: number) {
let index = 0;

if (calcType == "opt") {
tabs.push(<Tab label="Results XYZ" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="Results XYZ" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<CustomTabPanel key={index} value={value} index={index++}>
<OrcaXYZViewer id={id} />
</CustomTabPanel>
);
}

if (calcType == "xas") {
tabs.push(<Tab label="XAS Plot" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="XAS Plot" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<OrcaChart id={id}></OrcaChart>
</CustomTabPanel>
);
tabs.push(<Tab label="Orbital Viewer" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="Orbital Viewer" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<CustomTabPanel key={index} value={value} index={index++}>
<OrcaOrbitalView id={id} />
</CustomTabPanel>
);
}

if (calcType == "xes") {
tabs.push(<Tab label="XES Plot" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="XES Plot" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<CustomTabPanel key={index} value={value} index={index++}>
<OrcaChart id={id}></OrcaChart>
</CustomTabPanel>
);
}

if (calcType == "scf") {
tabs.push(<Tab label="Core Orbitals" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="Core Orbitals" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<CustomTabPanel key={index} value={value} index={index++}>
<OrcaCoreOrbitals id={id} />
</CustomTabPanel>
);
}

tabs.push(<Tab label="Results Log" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="Results Log" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<CustomTabPanel key={index} value={value} index={index++}>
<OrcaLogViewer id={id} />
</CustomTabPanel>
);

tabs.push(<Tab label="Input Job File" {...a11yProps(index)} />);
tabs.push(<Tab key={index} label="Input Job File" {...a11yProps(index)} />);
panels.push(
<CustomTabPanel value={value} index={index++}>
<CustomTabPanel key={index} value={value} index={index++}>
<OrcaJobFileViewer id={id} />
</CustomTabPanel>
);
Expand Down
Loading