add custom form renderer to make forms more compact (#9)

Author: jacobfilik

web-conexs-client/src/components/fdmnes/FdmnesForm.tsx

@@ -12,6 +12,15 @@ import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import CrystalViewer from "../crystals/CrystalViewer";
 
+import CompactGroupRenderer, {
+  CompactGroupTester,
+} from "../renderers/CompactGroup";
+
+const renderers = [
+  ...materialRenderers,
+  { tester: CompactGroupTester, renderer: CompactGroupRenderer },
+];
+
 export default function FdmnesForm() {
   const [selectedCrystalID, setSelectedCrystalId] = useState<null | number>(
     null
@@ -50,13 +59,15 @@ export default function FdmnesForm() {
       className="jsonFormsContainer"
       direction="row"
       justifyContent="space-between"
+      margin="5px"
+      spacing="5px"
     >
-      <Box>
+      <Stack>
         {hasData ? (
           <JsonForms
             schema={schema}
             data={data}
-            renderers={materialRenderers}
+            renderers={renderers}
             uischema={uischema}
             cells={materialCells}
             onChange={({ data }) => {
@@ -67,13 +78,6 @@ export default function FdmnesForm() {
         ) : (
           <Skeleton animation="wave" width={210} height={118} />
         )}
-      </Box>
-      <Stack flex={1}>
-        <Box flex={1}>
-          {selectedCrystalID != null && (
-            <CrystalViewer id={selectedCrystalID} />
-          )}
-        </Box>
         <Button
           variant="contained"
           onClick={() => {
@@ -84,6 +88,13 @@ export default function FdmnesForm() {
           Submit Simulation
         </Button>
       </Stack>
+      <Stack flex={1}>
+        <Box flex={1}>
+          {selectedCrystalID != null && (
+            <CrystalViewer id={selectedCrystalID} />
+          )}
+        </Box>
+      </Stack>
     </Stack>
     // <Grid2 container>
     //   <Grid2 size={6} className="jsonFormsContainer">

web-conexs-client/src/components/orca/OrcaForm.tsx

@@ -12,6 +12,15 @@ import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import MoleculeViewer from "../molecules/MoleculeViewer";
 
+import CompactGroupRenderer, {
+  CompactGroupTester,
+} from "../renderers/CompactGroup";
+
+const renderers = [
+  ...materialRenderers,
+  { tester: CompactGroupTester, renderer: CompactGroupRenderer },
+];
+
 export default function OrcaForm() {
   const [selectedMoleculeID, setSelectedMoleculeId] = useState<null | number>(
     null
@@ -50,13 +59,15 @@ export default function OrcaForm() {
       className="jsonFormsContainer"
       direction="row"
       justifyContent="space-between"
+      margin="5px"
+      spacing="5px"
     >
-      <Box>
+      <Stack>
         {hasData ? (
           <JsonForms
             schema={schema}
             data={data}
-            renderers={materialRenderers}
+            renderers={renderers}
             uischema={uischema}
             cells={materialCells}
             onChange={({ data }) => {
@@ -67,13 +78,6 @@ export default function OrcaForm() {
         ) : (
           <Skeleton animation="wave" width={210} height={118} />
         )}
-      </Box>
-      <Stack flex={1}>
-        <Box flex={1}>
-          {selectedMoleculeID != null && (
-            <MoleculeViewer id={selectedMoleculeID} />
-          )}
-        </Box>
         <Button
           variant="contained"
           onClick={() => {
@@ -88,6 +92,13 @@ export default function OrcaForm() {
           Submit Simulation
         </Button>
       </Stack>
+      <Stack flex={1}>
+        <Box flex={1}>
+          {selectedMoleculeID != null && (
+            <MoleculeViewer id={selectedMoleculeID} />
+          )}
+        </Box>
+      </Stack>
     </Stack>
   );
 }

web-conexs-client/src/components/renderers/CompactGroup.tsx

@@ -0,0 +1,31 @@
+import { MaterialLayoutRenderer } from "@jsonforms/material-renderers";
+import { Stack, Typography } from "@mui/material";
+
+import { withJsonFormsLayoutProps } from "@jsonforms/react";
+
+import { rankWith, uiTypeIs } from "@jsonforms/core";
+
+export const CompactGroupTester = rankWith(1000, uiTypeIs("Group"));
+
+const CompactGroupRenderer = (props) => {
+  const { uischema, schema, path, visible, renderers } = props;
+
+  const layoutProps = {
+    elements: uischema.elements,
+    schema: schema,
+    path: path,
+    direction: "column",
+    visible: visible,
+    uischema: uischema,
+    renderers: renderers,
+  };
+  return (
+    <Stack spacing="10px">
+      <Typography>{uischema.label}</Typography>
+
+      <MaterialLayoutRenderer {...layoutProps} />
+    </Stack>
+  );
+};
+
+export default withJsonFormsLayoutProps(CompactGroupRenderer);

web-conexs-client/src/hooks/useOrcaSchema.ts

@@ -191,7 +191,7 @@ const uischema = {
     },
     {
       type: "Group",
-      label: "",
+      label: "Resources",
       elements: [
         {
           type: "HorizontalLayout",