label absorbing atom in 3d structure (#36)

Author: jacobfilik

web-conexs-client/src/components/React3dMol.tsx

@@ -8,6 +8,7 @@ interface Molecule3DProps {
   moleculedata: MoleculeInput | CrystalInput | null;
   style: string;
   orbital: Orbital | null;
+  labelledAtom: number | undefined;
 }
 
 interface Orbital {
@@ -92,6 +93,16 @@ export default function React3dMol(props: Molecule3DProps) {
           blabel: "Y",
           clabel: "Z",
         });
+
+        if (props.labelledAtom != undefined) {
+          viewer.addLabel(
+            "*",
+            { backgroundOpacity: 0, fontSize: 28 },
+            { index: props.labelledAtom }
+          );
+
+          
+        }
       } else if (props.moleculedata) {
         const xyz = moleculeInputToXYZ(props.moleculedata);
 
@@ -110,8 +121,6 @@ export default function React3dMol(props: Molecule3DProps) {
         }
       }
 
-      // viewer.addLabel("*", {}, { index: 3 });
-
       viewer.zoomTo();
       viewer.render();
       return () => {

web-conexs-client/src/components/StructureTable.tsx

@@ -59,7 +59,6 @@ function StructureMetadata(props: {
   return (
     <StyledTableRow
       onClick={() => {
-        console.log("click");
         props.setSelectedRow(props.key);
         props.clickStructure(props.structure);
       }}

web-conexs-client/src/components/StructureViewer.tsx

@@ -3,7 +3,10 @@ import { skipToken, useQuery } from "@tanstack/react-query";
 import { getStructure } from "../queryfunctions";
 import React3dMol from "./React3dMol";
 
-export default function StructureViewer(props: { id: number | undefined }) {
+export default function StructureViewer(props: {
+  id: number | undefined;
+  labelledAtomIndex?: number | undefined;
+}) {
   const id = props.id;
   const query = useQuery({
     queryKey: ["structure", id],
@@ -17,6 +20,7 @@ export default function StructureViewer(props: { id: number | undefined }) {
         color="#3465A4"
         style="Stick"
         orbital={null}
+        labelledAtom={props.labelledAtomIndex}
       ></React3dMol>
     </Box>
   );

web-conexs-client/src/components/crystals/CrystalPage.tsx

@@ -30,7 +30,6 @@ export default function CrystalPage() {
     }
   }
 
-  console.log(finalCrystal);
   return (
     <MainPanel>
       <Stack spacing={"10px"}>

web-conexs-client/src/components/qe/QEForm.tsx

@@ -90,7 +90,14 @@ export default function QEForm(props: {
             </Button>
           </Stack>
           <Stack flex={1}>
-            <StructureViewer id={props.data.chemical_structure_id} />
+            <StructureViewer
+              id={props.data.chemical_structure_id}
+              labelledAtomIndex={
+                props.data.absorbing_atom
+                  ? props.data.absorbing_atom - 1
+                  : undefined
+              }
+            />
           </Stack>
           <Paper
             flex={1}