SIunit frontend for backend 217

.gitignore

@@ -7,6 +7,8 @@ __pycache__/
 *.save
 .DS_Store
 
+AGENTS.md
+
 /dist
 /public
 /node_modules

src/js/components/admin/AdminApp.js

@@ -20,7 +20,7 @@ provideGlobalGridOptions({
 
 
 function AdminAppContent() {
-  const {profiles, setProfiles, profile, setProfile} = useAdminApp();
+  const {profiles, setProfiles, profile, setProfile, options} = useAdminApp();
   const [status, setStatus] = useState('list');
   const [selectedFile, setSelectedFile] = useState(null);
   const [originProfile, setOriginProfile] = useState(null);

src/js/components/admin/form/TableForm.js

@@ -1,143 +1,202 @@
-import React, {useMemo} from "react"
+import React, {useState, useMemo} from "react"
 import PropTypes from 'prop-types';
 
 import HeaderInput from './table/HeaderInput'
 import TableColumn from './TableColumn'
 import TableIdentifier from './TableIdentifier'
 import ExtendedHeaderInput from "./table/ExtendedHeaderInput";
-import {Col, Form, Row} from "react-bootstrap";
+import {Button, Col, Form, Offcanvas, Row} from "react-bootstrap";
+import SIunits from "./controllComponents/SIunits";
 import {useAdminApp} from "../AppContext";
 
 
 function TableForm({
-                     table, inputTables, inputColumns,
-                     updateTable, updateHeader,
-                     addOperation, updateOperation, updateOperationDescription, removeOperation,
-                     fileMetadataOptions, tableMetadataOptions
+                       table, inputTables, inputColumns,
+                       updateTable, updateHeader,
+                       addOperation, updateOperation, updateOperationDescription, removeOperation,
+                       fileMetadataOptions, tableMetadataOptions,
+                       outputTableIndex,
+                       tableIdx
                    }) {
-  const {options} = useAdminApp();
+    const [showSiUnits, setShowSiUnits] = useState(false);
+    const [siUnitsContext, setSiUnitsContext] = useState(null);
+    const {options, profile, setProfile} = useAdminApp();
   const creatableHeaderOptions = {"DATA TYPE": options["DATA TYPE"], XUNITS: options.XUNITS, YUNITS: options.YUNITS};
 
-  const fixedHeaderOptions  = useMemo(() => {
+    const openSiUnits = (axis) => {
+        const inputColumn = axis === "X" ? table?.table?.xColumn : table?.table?.yColumn;
+
+        setSiUnitsContext({
+            outputTableIndex,
+            axis,
+            inputColumn
+        });
+        setShowSiUnits(true);
+    };
+
+    const axisForHeaderOption = (optionKey) => {
+        if (optionKey === "XUNITS") return "X";
+        if (optionKey === "YUNITS") return "Y";
+        return null;
+    };
+
+    const fixedHeaderOptions  = useMemo(() => {
     return Object.fromEntries(
       Object.entries(options).filter(
-        ([key]) => !(key in creatableHeaderOptions) && !["rdf", "VERSION"].includes(key)
-      )
-    );
-  }, [options]);
-
-  return (
-    <div>
-      <div className="fw-bold">
-        Table header
-      </div>
-
-      {Object.keys(fixedHeaderOptions).map((optionKey, index) => (
-        <HeaderInput key={index} optionKey={optionKey} value={table.header[optionKey]}
-                     values={fixedHeaderOptions[optionKey]} updateHeader={updateHeader}/>
-      ))}
-
-      {Object.keys(creatableHeaderOptions).map((optionKey, index) => (
-        <ExtendedHeaderInput key={index} optionKey={optionKey} value={table.header[optionKey]}
-                             values={creatableHeaderOptions[optionKey]} updateHeader={updateHeader}/>
-      ))}
-
-      {(table.header['DATA CLASS'] === 'NTUPLES') && (
-        <Form.Group as={Row}>
-          <Form.Label as={Col} sm={4}>NTUPLES PAGE HEADER</Form.Label>
-          <Col sm={8}>
-            <Form.Select
-              size="sm"
-              value={table.header['NTUPLES_PAGE_HEADER']}
-              onChange={event => {
-                const {value} = event.target;
-                updateHeader('NTUPLES_PAGE_HEADER', value);
-              }}
-            >
-              <option value="___+">Incrementing Page Index</option>
-              <option value="___TABLE_NAME">Input Table Name</option>
-              <option disabled>---METADATA---</option>
-              <>
-                {[...new Set(tableMetadataOptions.map(o => o.key))].map((option, optionIndex) => (
-                  <option key={optionIndex} data-idx={optionIndex} value={option}>{option}</option>
-                ))}
-              </>
-            </Form.Select>
-          </Col>
-        </Form.Group>
-      )}
-      <div className="mt-3 fw-bold">
-        Table columns
-      </div>
-
-      {(table.header['DATA CLASS'] === 'XYDATA') ? (
+         ([key]) => !(key in creatableHeaderOptions) && !["rdf", "VERSION"].includes(key)
+        )
+        );
+    }, [options]);
+
+    return (
         <div>
-          <div className="mb-2">
-            Which metadata should be used for the x-values?
-          </div>
-          {['FIRSTX', 'LASTX', 'DELTAX'].map((headerKey, index) => (
-            <TableIdentifier
-              key={index}
-              index={index + 1000}
-              headerKey={headerKey}
-              table={table}
-              inputTables={inputTables}
-              updateHeader={updateHeader}
-              fileMetadataOptions={fileMetadataOptions}
-              tableMetadataOptions={tableMetadataOptions}
+            <div className="fw-bold">
+                Table header
+            </div>
+
+            {Object.keys(fixedHeaderOptions).map((optionKey, index) => (
+                <HeaderInput key={index} optionKey={optionKey} value={table.header[optionKey]}
+                             values={fixedHeaderOptions[optionKey]} updateHeader={updateHeader}/>
+            ))}
+
+            {Object.keys(creatableHeaderOptions).map((optionKey, index) => {
+                const axis = axisForHeaderOption(optionKey);
+                return (
+                    <ExtendedHeaderInput key={index} optionKey={optionKey} value={table.header[optionKey]}
+                                         values={creatableHeaderOptions[optionKey]} updateHeader={updateHeader}
+                                         leftElement={axis ? (
+                                             <Button
+                                                 variant="outline-info"
+                                                 type="button"
+                                                 onClick={() => openSiUnits(axis)}
+                                             >
+                                                 SI Units
+                                             </Button>
+                                         ) : null}/>
+                );
+            })}
+
+            {(table.header['DATA CLASS'] === 'NTUPLES') && (
+                <Form.Group as={Row}>
+                    <Form.Label as={Col} sm={4}>NTUPLES PAGE HEADER</Form.Label>
+                    <Col sm={8}>
+                        <Form.Select
+                            size="sm"
+                            value={table.header['NTUPLES_PAGE_HEADER']}
+                            onChange={event => {
+                                const {value} = event.target;
+                                updateHeader('NTUPLES_PAGE_HEADER', value);
+                            }}
+                        >
+                            <option value="___+">Incrementing Page Index</option>
+                            <option value="___TABLE_NAME">Input Table Name</option>
+                            <option disabled>---METADATA---</option>
+                            <>
+                                {[...new Set(tableMetadataOptions.map(o => o.key))].map((option, optionIndex) => (
+                                    <option key={optionIndex} data-idx={optionIndex} value={option}>{option}</option>
+                                ))}
+                            </>
+                        </Form.Select>
+                    </Col>
+                </Form.Group>
+            )}
+            <div className="mt-3 fw-bold">
+                Table columns
+            </div>
+
+            {(table.header['DATA CLASS'] === 'XYDATA') ? (
+                <div>
+                    <div className="mb-2">
+                        Which metadata should be used for the x-values?
+                    </div>
+                    {['FIRSTX', 'LASTX', 'DELTAX'].map((headerKey, index) => (
+                        <TableIdentifier
+                            key={index}
+                            index={index + 1000}
+                            headerKey={headerKey}
+
+                            table={table}
+                            inputTables={inputTables}
+                            updateHeader={updateHeader}
+                            fileMetadataOptions={fileMetadataOptions}
+                            tableMetadataOptions={tableMetadataOptions}
+                        />
+                    ))}
+                </div>
+            ) : (
+                <TableColumn
+                    table={table.table}
+                    label="Which column should be used as x-values?"
+                    columnKey="xColumn"
+                    operationsKey="xOperations"
+                    inputColumns={inputColumns}
+                    updateTable={updateTable}
+                    addOperation={addOperation}
+                    updateOperation={updateOperation}
+                    updateOperationDescription={updateOperationDescription}
+                    removeOperation={removeOperation}
+                    tableMetadataOptions={tableMetadataOptions}
+                    inputTables={inputTables}
+                />
+            )}
+
+            <TableColumn
+                table={table.table}
+                label="Which column should be used as y-values?"
+                columnKey="yColumn"
+                operationsKey="yOperations"
+                inputColumns={inputColumns}
+                updateTable={updateTable}
+                addOperation={addOperation}
+                updateOperation={updateOperation}
+                updateOperationDescription={updateOperationDescription}
+                removeOperation={removeOperation}
+                tableMetadataOptions={tableMetadataOptions}
+                inputTables={inputTables}
             />
-          ))}
+
+            <small className="text-muted">The data you pick will determine which table columns are going to
+                converted.</small>
+
+            <Offcanvas
+                show={showSiUnits}
+                onHide={() => setShowSiUnits(false)}
+                placement="start"
+                style={{width: "min(1100px, 50vw)"}}
+            >
+                <Offcanvas.Header closeButton>
+                    <Offcanvas.Title>SI Units</Offcanvas.Title>
+                </Offcanvas.Header>
+                <Offcanvas.Body>
+                    <SIunits
+                        profile={profile}
+                        setProfile={setProfile}
+                        defaultAssignmentContext={siUnitsContext}
+                        tableIdx={tableIdx}
+                    />
+                </Offcanvas.Body>
+            </Offcanvas>
         </div>
-      ) : (
-        <TableColumn
-          table={table.table}
-          label="Which column should be used as x-values?"
-          columnKey="xColumn"
-          operationsKey="xOperations"
-          inputColumns={inputColumns}
-          updateTable={updateTable}
-          addOperation={addOperation}
-          updateOperation={updateOperation}
-          updateOperationDescription={updateOperationDescription}
-          removeOperation={removeOperation}
-          tableMetadataOptions={tableMetadataOptions}
-          inputTables={inputTables}
-        />
-      )}
-
-      <TableColumn
-        table={table.table}
-        label="Which column should be used as y-values?"
-        columnKey="yColumn"
-        operationsKey="yOperations"
-        inputColumns={inputColumns}
-        updateTable={updateTable}
-        addOperation={addOperation}
-        updateOperation={updateOperation}
-        updateOperationDescription={updateOperationDescription}
-        removeOperation={removeOperation}
-        tableMetadataOptions={tableMetadataOptions}
-        inputTables={inputTables}
-      />
-
-      <small className="text-muted">The data you pick will determine which table columns are going to
-        converted.</small>
-    </div>
-  )
+    )
 }
 
 TableForm.propTypes = {
-  table: PropTypes.object,
-  inputTables: PropTypes.array,
-  inputColumns: PropTypes.array,
-  updateTable: PropTypes.func,
-  updateHeader: PropTypes.func,
-  updateOperationDescription: PropTypes.func,
-  addOperation: PropTypes.func,
-  updateOperation: PropTypes.func,
-  removeOperation: PropTypes.func,
-  fileMetadataOptions: PropTypes.array,
-  tableMetadataOptions: PropTypes.array
+    table: PropTypes.object,
+    inputTables: PropTypes.array,
+    inputColumns: PropTypes.array,
+    options: PropTypes.object,
+    updateTable: PropTypes.func,
+    updateHeader: PropTypes.func,
+    updateOperationDescription: PropTypes.func,
+    addOperation: PropTypes.func,
+    updateOperation: PropTypes.func,
+    removeOperation: PropTypes.func,
+    fileMetadataOptions: PropTypes.array,
+    tableMetadataOptions: PropTypes.array,
+    profile: PropTypes.object,
+    setProfile: PropTypes.func,
+    outputTableIndex: PropTypes.number,
+    tableIdx: PropTypes.number
 }
 
 export default TableForm