adding breadcrumb

Author: Mletter1

web-server/plugins/slycat-cca/js/components/CCANavItems.tsx

@@ -19,13 +19,26 @@ export const CCAWizardNavItems = () => {
         key={"Upload Table"}
         name={"Upload Table"}
         active={tabName === TabNames.CCA_LOCAL_BROWSER_TAB}
-        hidden={false}
+        hidden={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
+      />
+      <CCANavItem
+        key={"Select Columns"}
+        name={"Select Columns"}
+        active={tabName === TabNames.CCA_TABLE_INGESTION}
+        hidden={
+          tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ||
+          tabName === TabNames.CCA_LOCAL_BROWSER_TAB
+        }
+      />
+      <CCANavItem
+        key={"Name Model"}
+        name={"Name Model"}
+        active={tabName === TabNames.CCA_FINISH_MODEL}
+        hidden={tabName !== TabNames.CCA_FINISH_MODEL}
       />
       {/* TODO: the hidden tabs below should be consolidated */}
       <CCANavItem key={"Choose Host"} name={"Choose Host"} hidden={true} />
       <CCANavItem key={"Select Table"} name={"Select Table"} hidden={true} />
-      <CCANavItem key={"Select Columns"} name={"Select Columns"} />
-      <CCANavItem key={"Name Model"} name={"Name Model"} />
     </ul>
   );
 };

web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx

@@ -55,7 +55,7 @@ export const CCAWizardSteps = () => {
               <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
           </div>
         </div>
-        <div hidden={true}>
+        <div hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}>
           <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
             {/* <slycat-model-controls
                 params="name:model.name,description:model.description,marking:model.marking"

web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx

@@ -7,10 +7,12 @@ import { produce } from "immer";
 import {
   Attribute,
   resetCCAWizard,
+  selectAttributes,
   selectDataLocation,
   selectFileUploaded,
   selectMid,
   selectPid,
+  selectScaleInputs,
   selectTab,
   setAttributes,
   setFileUploaded,
@@ -22,7 +24,6 @@ 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
@@ -33,6 +34,7 @@ export const useCCAWizardFooter = () => {
   const dataLocation = useAppSelector(selectDataLocation);
   const fileUploaded = useAppSelector(selectFileUploaded);
   const dispatch = useAppDispatch();
+  const uploadSelection = useUploadSelection();
 
   /**
    * handle continue operation
@@ -45,9 +47,9 @@ export const useCCAWizardFooter = () => {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
     }
     if (tabName === TabNames.CCA_TABLE_INGESTION) {
-      dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
+      uploadSelection();
     }
-  }, [dispatch, fileUploaded, setTabName, tabName]);
+  }, [dispatch, uploadSelection, fileUploaded, setTabName, tabName]);
 
   /**
    * handle back operation
@@ -59,6 +61,9 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_TABLE_INGESTION) {
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
+    if (tabName === TabNames.CCA_FINISH_MODEL) {
+      dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
+    }
   }, [dispatch, setTabName, tabName]);
 
   const backButton = (
@@ -86,7 +91,7 @@ export const useCCAWizardFooter = () => {
   );
   return React.useMemo(
     () => [backButton, nextButton],
-    [fileUploaded, tabName, dataLocation, dispatch],
+    [fileUploaded, handleContinue, handleBack, tabName, dataLocation, dispatch],
   );
 };
 
@@ -198,6 +203,7 @@ const useFileUploadSuccess = () => {
           );
           dispatch(setAttributes(attributes ?? []));
           setUploadStatus(true);
+          dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
         },
       });
     },
@@ -215,6 +221,7 @@ export const useHandleLocalFileSubmit = (): [
 ] => {
   const mid = useAppSelector(selectMid);
   const pid = useAppSelector(selectPid);
+  const dispatch = useAppDispatch();
   const fileUploadSuccess = useFileUploadSuccess();
   const [progress, setProgress] = React.useState<number>(0);
   const [progressStatus, setProgressStatus] = React.useState("");
@@ -324,3 +331,61 @@ export const useHandleTableIngestionOnChange = (attributes: Attribute[]) => {
     [attributes, dispatch],
   );
 };
+
+/**
+ * Hook for dealing with submission to the server of the inputs, outputs, and scale inputs to the server.
+ * @returns a function for updating inputs and outputs
+ */
+export const useUploadSelection = () => {
+  const mid = useAppSelector(selectMid);
+  const scaleInputs = useAppSelector(selectScaleInputs);
+  const attributes = useAppSelector(selectAttributes);
+  const dispatch = useAppDispatch();
+  return React.useCallback(() => {
+    const inputs = attributes
+      .filter((attribute) => attribute["Axis Type"] === "Input")
+      .map((attribute) => attribute.index);
+    const outputs = attributes
+      .filter((attribute) => attribute["Axis Type"] === "Output")
+      .map((attribute) => attribute.index);
+    console.log("attributes", attributes);
+    console.log("inputs", inputs);
+    console.log("outputs", outputs);
+    if (inputs.length === 0) {
+      dialog.dialog({
+        message: "The number of inputs must be at least one.",
+      });
+    } else if (outputs.length === 0) {
+      dialog.dialog({
+        message: "The number of outputs must be at least one.",
+      });
+    } else {
+      client.put_model_parameter({
+        mid: mid,
+        aid: "input-columns",
+        value: inputs,
+        input: true,
+        success: function () {
+          client.put_model_parameter({
+            mid: mid,
+            aid: "output-columns",
+            value: outputs,
+            input: true,
+            success: function () {
+              client.put_model_parameter({
+                mid: mid,
+                aid: "scale-inputs",
+                value: scaleInputs,
+                input: true,
+                success: function () {
+                  // set the tab
+                  dispatch(setTabName(TabNames.CCA_FINISH_MODEL));
+                },
+              });
+            },
+          });
+        },
+      });
+    }
+  }, [mid, attributes, scaleInputs, dispatch]);
+};

web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx

@@ -5,6 +5,7 @@ export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
+  CCA_FINISH_MODEL= "CCAFinishModel"
 }
 export enum dataLocationType {
   LOCAL = "local",
@@ -29,6 +30,7 @@ export interface CCAWizardState {
   pid: string | undefined;
   fileUploaded: boolean;
   attributes: Attribute[];
+  scaleInputs: boolean;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -37,6 +39,7 @@ const initialState: CCAWizardState = {
   pid: undefined,
   fileUploaded: false,
   attributes: [],
+  scaleInputs: false
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -60,6 +63,9 @@ export const cCAWizardSlice = createSlice({
     setAttributes: (state, action: PayloadAction<Attribute[]>) => {
       state.attributes = action.payload;
     },
+    setScaleInputs: (state, action: PayloadAction<boolean>) => {
+      state.scaleInputs = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -73,6 +79,7 @@ export const {
   resetCCAWizard: resetCCAWizard,
   setFileUploaded,
   setAttributes,
+  setScaleInputs
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -81,5 +88,6 @@ export const selectFileUploaded = (state: RootState) => state.cCAWizard.fileUplo
 export const selectPid = (state: RootState) => state.cCAWizard.pid;
 export const selectMid = (state: RootState) => state.cCAWizard.mid;
 export const selectAttributes = (state: RootState) => state.cCAWizard.attributes;
+export const selectScaleInputs = (state: RootState) => state.cCAWizard.scaleInputs;
 
 export default cCAWizardSlice.reducer;

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx

@@ -23,7 +23,6 @@ export const CCATableIngestion = (props: { hidden?: boolean }) => {
   ];
   return (
     <div hidden={hidden}>
-      test
       <SlycatTableIngestion
         uniqueID="varOptions"
         variables={attributes}