adding table ingestion

Mletter1 · Mletter1 · commit 91f37afba82e · 2025-05-15T17:41:05.000-06:00
diff --git a/web-server/js/slycat-table-ingestion-react.js b/web-server/js/slycat-table-ingestion-react.js
@@ -25,6 +25,7 @@ export default function SlycatTableIngestion(props) {
 
   function selectAll(e) {
     let property = e.target.dataset.property;
+    let batchRadio = [];
     for (let [index, variableSelected] of selected.entries()) {
       if (variableSelected) {
         // Find the radio button that needs to be selected based on its name and value attributes
@@ -33,10 +34,14 @@ export default function SlycatTableIngestion(props) {
         );
         // Fire the onChange handler only if radio button is not disabled
         if (!radio.disabled) {
+          batchRadio.push(radio);
           props.onChange({ currentTarget: radio });
         }
       }
     }
+    if (props.onBatchChange) {
+      props.onBatchChange({ batchTarget: batchRadio });
+    }
   }
 
   function select(event, varIndex) {
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -28,7 +28,7 @@ export const CCAWizard = (params: CCAWizardParams) => {
 
   React.useEffect(() => {
     if (modalOpen) {
-      handleWizardSetup()
+      handleWizardSetup();
     }
   }, [pid, statePid, stateMid]);
 
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -7,16 +7,18 @@ import { CCAWizardNavItems } from "./CCANavItems";
 import { useAppSelector } from "./wizard-store/hooks";
 import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
 import { CCALocalBrowserTab } from "./wizard-tabs/CCSLocalBrowserTab";
+import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
-  const tabName = useAppSelector(selectTab)
+  const tabName = useAppSelector(selectTab);
   return (
     <div className="modal-body">
-      <CCAWizardNavItems/>
+      <CCAWizardNavItems />
       <div className="tab-content">
-        <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)}/>
-        <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)}/>
+        <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)} />
+        <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)} />
+        <CCATableIngestion hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)} />
         <div hidden={true}>
           <form role="form">
             {/* <slycat-remote-controls
@@ -53,25 +55,6 @@ export const CCAWizardSteps = () => {
               <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
           </div>
         </div>
-
-        <div hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)}>
-          {/* <slycat-table-ingestion
-              params="
-              variables: attributes,
-              properties: [{name: 'Classification', type: 'select', values: ['Input','Output','Neither']}]
-            "
-            ></slycat-table-ingestion> */}
-          <form role="form">
-            <div className="form-group mt-3">
-              <div className="form-check pl-1">
-                <label>
-                  <input type="checkbox" data-bind="checked: scale_inputs" /> Scale to unit variance
-                </label>
-              </div>
-            </div>
-          </form>
-        </div>
-
         <div hidden={true}>
           <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
             {/* <slycat-model-controls
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -3,13 +3,16 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import { produce } from "immer";
 import {
+  Attribute,
   resetCCAWizard,
   selectDataLocation,
   selectFileUploaded,
   selectMid,
   selectPid,
   selectTab,
+  setAttributes,
   setFileUploaded,
   setMid,
   setPid,
@@ -19,6 +22,7 @@ import {
 import client from "js/slycat-web-client";
 import fileUploader from "js/slycat-file-uploader-factory";
 import * as dialog from "js/slycat-dialog";
+import { useSelector } from "node_modules/react-redux/dist/react-redux";
 
 /**
  * A hook for controlling how the back and continue buttons work based on the current redux state
@@ -60,7 +64,9 @@ export const useCCAWizardFooter = () => {
   const backButton = (
     <button
       key="back button"
-      style={{visibility: tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ? "hidden": "visible"}}
+      style={{
+        visibility: tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ? "hidden" : "visible",
+      }}
       className="btn btn-light mr-auto"
       onClick={handleBack}
     >
@@ -78,7 +84,10 @@ export const useCCAWizardFooter = () => {
       Continue {fileUploaded.toString()}
     </button>
   );
-  return React.useMemo(() => [backButton, nextButton], [fileUploaded, tabName, dataLocation, dispatch]);
+  return React.useMemo(
+    () => [backButton, nextButton],
+    [fileUploaded, tabName, dataLocation, dispatch],
+  );
 };
 
 /**
@@ -139,7 +148,65 @@ export const useHandleClosingCallback = (
 };
 
 /**
- * handle file submission
+ * callback function for when a file is done uploading for gathering and setting all the file meta data
+ * @returns a memoized function to call once uploading a file is done
+ */
+const useFileUploadSuccess = () => {
+  const mid = useAppSelector(selectMid);
+  const dispatch = useAppDispatch();
+  return React.useCallback(
+    (
+      setProgress: (status: number) => void,
+      setProgressStatus: (status: string) => void,
+      setUploadStatus: (status: boolean) => void,
+    ) => {
+      setProgress(95);
+      setProgressStatus("Finishing...");
+      client.get_model_arrayset_metadata({
+        mid: mid,
+        aid: "data-table",
+        arrays: "0",
+        statistics: "0/...",
+        success: function (metadata: any) {
+          setProgress(100);
+          setProgressStatus("Finished");
+          const attributes: Attribute[] = (metadata?.arrays[0]?.attributes as [])?.map(
+            (attribute: any, index) => {
+              const constant = metadata.statistics[index].unique === 1;
+              const string = attribute.type == "string";
+              let tooltip = "";
+              if (string) {
+                tooltip =
+                  "This variable's values contain strings, so it cannot be included in the analysis.";
+              } else if (constant) {
+                tooltip =
+                  "This variable's values are all identical, so it cannot be included in the analysis.";
+              }
+              return {
+                index: index,
+                name: attribute.name,
+                type: attribute.type,
+                "Axis Type": constant || string ? "" : "Input",
+                constant: constant,
+                disabled: constant || string,
+                hidden: false,
+                selected: false,
+                lastSelected: false,
+                tooltip: tooltip,
+              };
+            },
+          );
+          dispatch(setAttributes(attributes ?? []));
+          setUploadStatus(true);
+        },
+      });
+    },
+    [mid, dispatch],
+  );
+};
+
+/**
+ * handle local file submission
  */
 export const useHandleLocalFileSubmit = (): [
   (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => void,
@@ -148,6 +215,7 @@ export const useHandleLocalFileSubmit = (): [
 ] => {
   const mid = useAppSelector(selectMid);
   const pid = useAppSelector(selectPid);
+  const fileUploadSuccess = useFileUploadSuccess();
   const [progress, setProgress] = React.useState<number>(0);
   const [progressStatus, setProgressStatus] = React.useState("");
   const handleSubmit = React.useCallback(
@@ -179,6 +247,7 @@ export const useHandleLocalFileSubmit = (): [
           setProgress(100);
           setProgressStatus("File upload complete");
           setUploadStatus(true);
+          fileUploadSuccess(setProgress, setProgressStatus, setUploadStatus);
         },
         error: function () {
           setUploadStatus(false);
@@ -221,3 +290,37 @@ export const useSetUploadStatus = () => {
     [dispatch],
   );
 };
+
+/**
+ * A function to handle effects of selection on the radio buttons in the ingestion tab for CCA
+ * @param attributes from redux
+ * @returns memoized onChange function to handle radio button selection
+ */
+export const useHandleTableIngestionOnChange = (attributes: Attribute[]) => {
+  const dispatch = useAppDispatch();
+  return React.useCallback(
+    (input: any) => {
+      // this function is overloaded to handle batching so we need to check for target or batchTarget
+      if (input?.target && (input as any)?.target?.name && (input as any)?.target?.value) {
+        const nextAttributes = produce(attributes, (draftState) => {
+          draftState[input?.target?.name] = {
+            ...draftState[input?.target?.name],
+            "Axis Type": input?.target?.value,
+          };
+        });
+        dispatch(setAttributes(nextAttributes));
+      } else if (input?.batchTarget && input?.batchTarget?.length > 0) {
+        const nextAttributes = produce(attributes, (draftState) => {
+          input?.batchTarget.forEach((row: any) => {
+            draftState[row?.name] = {
+              ...draftState[row?.name],
+              "Axis Type": row?.value,
+            };
+          });
+        });
+        dispatch(setAttributes(nextAttributes));
+      }
+    },
+    [attributes, dispatch],
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/slycat-local-browser/SlycatLocalBrowser.tsx b/web-server/plugins/slycat-cca/js/components/slycat-local-browser/SlycatLocalBrowser.tsx
@@ -5,13 +5,15 @@ import * as React from "react";
 import { useHandleLocalFileSubmit } from "../CCAWizardUtils";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 
-export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) => void, disabled?: boolean }) => {
-  const { setUploadStatus, disabled } = props;
+export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) => void }) => {
+  const { setUploadStatus } = props;
+  const [fileSelected, setFileSelected] = React.useState<boolean>(false);
   const [file, setFile] = React.useState<File | undefined>(undefined);
   const [parser, setParser] = React.useState<string | undefined>(undefined);
   const [handleSubmit, progress, progressStatus] = useHandleLocalFileSubmit();
   const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
     if (e.target.files !== null && e.target.files.length >= 1) {
+      setFileSelected(true);
       setFile(e.target.files[0]);
     }
   };
@@ -29,19 +31,19 @@ export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) =
         <SlycatParserControls setParser={setParser} />
         <button
           key="Upload File To Server"
-          disabled={disabled ?? false }
-          style={{visibility: progress<=0? 'visible': 'hidden'}}
+          disabled={!fileSelected}
+          style={{ visibility: progress <= 0 ? "visible" : "hidden" }}
           className="btn btn-primary"
           data-toggle="tooltip"
-          data-placement="top" 
+          data-placement="top"
           title="You must selected a file before continuing."
           onClick={React.useCallback(() => {
             if (file) {
               handleSubmit(file, parser, setUploadStatus);
             }
           }, [file, handleSubmit])}
         >
-          Upload File parser
+          {fileSelected ? `Upload File: ${file?.name}` : "Select A File"}
         </button>
         <div className="progress" style={{ visibility: progress > 0 ? undefined : "hidden" }}>
           <div
diff --git a/web-server/plugins/slycat-cca/js/components/slycat-parser-controls/SlycatParserControls.tsx b/web-server/plugins/slycat-cca/js/components/slycat-parser-controls/SlycatParserControls.tsx
@@ -3,29 +3,37 @@
  retains certain rights in this software. */
 import * as React from "react";
 import parsers from "js/slycat-parsers";
-import _ from "lodash";
+import { includes } from "lodash";
 import { handleParserChange } from "../CCAWizardUtils";
 
 export const SlycatParserControls = (props: {
   setParser: React.Dispatch<React.SetStateAction<string | undefined>>;
 }) => {
   const { setParser } = props;
-  const filteredParsers: [{ type: () => string }] = parsers
+  const filteredParsers: [{ type: () => string; label: () => string }] = parsers
     .available()
-    ?.filter((parser: { categories: () => string }) => _.includes(parser.categories(), "table"));
+    ?.filter((parser: { categories: () => string }) => includes(parser.categories(), "table"));
   React.useEffect(() => {
     if (filteredParsers !== undefined && filteredParsers.length > 0) {
-      console.log('reset', filteredParsers[0].type());
+      console.log("reset", filteredParsers[0].type());
       setParser(filteredParsers[0].type());
     }
   }, [filteredParsers.length]);
   return (
     <div className="form-group row">
       <label className="col-sm-2 col-form-label">Filetype</label>
       <div className="col-sm-10">
-        <select id="slycat-model-parser" className="form-control" onChange={handleParserChange(setParser)}>
-          {filteredParsers.map((parser: { type: () => string }) => {
-            return <option key={parser.type()}>{parser.type()}</option>;
+        <select
+          id="slycat-model-parser"
+          className="form-control"
+          onChange={handleParserChange(setParser)}
+        >
+          {filteredParsers.map((parser: { type: () => string; label: () => string }) => {
+            return (
+              <option key={parser.type()} value={parser.type()}>
+                {parser.label()}
+              </option>
+            );
           })}
         </select>
       </div>
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ export default function SlycatTableIngestion(props) {`
`25`	`25`
`26`	`26`	`function selectAll(e) {`
`27`	`27`	`let property = e.target.dataset.property;`
	`28`	`+ let batchRadio = [];`
`28`	`29`	`for (let [index, variableSelected] of selected.entries()) {`
`29`	`30`	`if (variableSelected) {`
`30`	`31`	`// Find the radio button that needs to be selected based on its name and value attributes`
`@@ -33,10 +34,14 @@ export default function SlycatTableIngestion(props) {`
`33`	`34`	`);`
`34`	`35`	`// Fire the onChange handler only if radio button is not disabled`
`35`	`36`	`if (!radio.disabled) {`
	`37`	`+ batchRadio.push(radio);`
`36`	`38`	`props.onChange({ currentTarget: radio });`
`37`	`39`	`}`
`38`	`40`	`}`
`39`	`41`	`}`
	`42`	`+ if (props.onBatchChange) {`
	`43`	`+ props.onBatchChange({ batchTarget: batchRadio });`
	`44`	`+ }`
`40`	`45`	`}`
`41`	`46`
`42`	`47`	`function select(event, varIndex) {`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export const CCAWizard = (params: CCAWizardParams) => {`
`28`	`28`
`29`	`29`	`React.useEffect(() => {`
`30`	`30`	`if (modalOpen) {`
`31`		`- handleWizardSetup()`
	`31`	`+ handleWizardSetup();`
`32`	`32`	`}`
`33`	`33`	`}, [pid, statePid, stateMid]);`
`34`	`34`