From 4356194b9f2de12a32671313f414a524f13e8a5e Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Wed, 9 Apr 2025 11:44:19 -0600
Subject: [PATCH 01/31] Test ruleset

---
 webpack.dev.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webpack.dev.js b/webpack.dev.js
index d6095e280..0a8b4e283 100644
--- a/webpack.dev.js
+++ b/webpack.dev.js
@@ -9,6 +9,7 @@ module.exports = merge(common, {
       publicPath: "/",
       index: "slycat_projects.html",
     },
+    // test
     // Only compiles on refresh, not on file change. But does not work, complains of running webpack twice.
     // lazy: true,
 

From 28bf9c310464211da09ed92784c31e6d11be71cf Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 31 Jan 2025 13:34:41 -0700
Subject: [PATCH 02/31] start porting cca to reactjs

---
 .../slycat-cca/js/components/CCAWizard.tsx    | 14 ++++++
 .../js/components/CCAWizardContent.tsx        | 47 +++++++++++++++++++
 web-server/plugins/slycat-cca/js/wizard-ui.js | 25 ++++++++++
 web-server/plugins/slycat-cca/slycat-cca.js   |  5 +-
 web-server/plugins/slycat-cca/wizard-ui.html  |  3 ++
 5 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
 create mode 100644 web-server/plugins/slycat-cca/js/wizard-ui.js
 create mode 100644 web-server/plugins/slycat-cca/wizard-ui.html

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
new file mode 100644
index 000000000..cdbd61923
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { CCAModalContent}  from "./CCAWizardContent";
+
+export const CCAWizard = () =>{
+    return (
+          <CCAModalContent
+            modalId={'this.state.modalId'}
+            closingCallBack={()=>console.log('clean')}
+            title={"CCA Wizard"}
+            body={<div>Body</div>}
+            footer={[<div>Footer</div>]}
+          />
+        );
+}
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
new file mode 100644
index 000000000..c03dc4355
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+
+/**
+ * @member closingCallBack callback function for cleanup when closing the modal
+ * @member title test for the top of the modal
+ */
+export interface ModalContentProps {
+  modalId: string,
+  closingCallBack: Function;
+  title: string;
+  body: JSX.Element;
+  footer: JSX.Element[];
+}
+
+
+export const CCAModalContent = (props:ModalContentProps) => {
+
+  const {modalId, closingCallBack, title, body, footer} = props;
+  /**
+   *close the modal and call the cleanup function
+   * @memberof ModalContent
+   */
+  const handleCloseModal = React.useCallback((e: React.MouseEvent): void => {
+    closingCallBack();
+    ($("#" + modalId) as any).modal("hide");
+  },[modalId, closingCallBack])
+
+    return (
+      <div>
+        <div className="modal-header">
+          <h3 className="modal-title">{title}</h3>
+          <button
+            type="button"
+            className="close"
+            aria-label="Close"
+            onClick={handleCloseModal}
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div className="modal-body" id="slycat-wizard">
+          {body}
+        </div>
+        <div className="modal-footer">{footer}</div>
+      </div>
+    );
+}
diff --git a/web-server/plugins/slycat-cca/js/wizard-ui.js b/web-server/plugins/slycat-cca/js/wizard-ui.js
new file mode 100644
index 000000000..0d66fa576
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/wizard-ui.js
@@ -0,0 +1,25 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import React from "react";
+import { createRoot } from "react-dom/client";
+// import TimeseriesWizard from "components/timeseries-wizard/TimeseriesWizard.tsx";
+import markings from "js/slycat-selectable-markings";
+import { CCAWizard } from ".//components/CCAWizard.tsx"
+import ccaWizardUI from "../wizard-ui.html";
+
+function constructor(params) {
+  console.dir(params)
+  const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
+  react_wizard_root.render(
+    <CCAWizard></CCAWizard>
+  );
+
+  // return an empty component since we are just using it to render react
+  return {};
+}
+
+export default {
+  viewModel: constructor,
+  template: ccaWizardUI,
+};
diff --git a/web-server/plugins/slycat-cca/slycat-cca.js b/web-server/plugins/slycat-cca/slycat-cca.js
index 985652ea9..ec918878e 100644
--- a/web-server/plugins/slycat-cca/slycat-cca.js
+++ b/web-server/plugins/slycat-cca/slycat-cca.js
@@ -1,7 +1,8 @@
 import ko from "knockout";
 
-import new_cca from 'plugins/slycat-cca/js/new-ui';
 import rerun_cca from 'plugins/slycat-cca/js/rerun-ui';
 
-ko.components.register('new-cca', new_cca);
+import cca_wizard from 'plugins/slycat-cca/js//wizard-ui';
+
+ko.components.register('new-cca', cca_wizard);
 ko.components.register('rerun-cca', rerun_cca);
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/wizard-ui.html b/web-server/plugins/slycat-cca/wizard-ui.html
new file mode 100644
index 000000000..572e2ebb0
--- /dev/null
+++ b/web-server/plugins/slycat-cca/wizard-ui.html
@@ -0,0 +1,3 @@
+<!-- Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government  retains certain rights in this software. -->
+
+<!-- Returning nothing because we are no longer using knockout to render the wizard, but still need knockout to register the wizard with slycat. -->
\ No newline at end of file

From 2a70150b106d73a645b71289684c6ec53bb69dfe Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 31 Jan 2025 13:54:29 -0700
Subject: [PATCH 03/31] adding child content modal body

---
 .../plugins/slycat-cca/js/components/CCAWizard.tsx | 14 +++++++++-----
 .../slycat-cca/js/components/CCAWizardContent.tsx  |  7 +++----
 .../slycat-cca/js/components/CCAWizardSteps.tsx    |  7 +++++++
 3 files changed, 19 insertions(+), 9 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index cdbd61923..f4e63b568 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -1,14 +1,18 @@
 import * as React from "react";
 import { CCAModalContent}  from "./CCAWizardContent";
+import { CCAWizardSteps } from "./CCAWizardSteps"
 
 export const CCAWizard = () =>{
     return (
           <CCAModalContent
-            modalId={'this.state.modalId'}
-            closingCallBack={()=>console.log('clean')}
-            title={"CCA Wizard"}
-            body={<div>Body</div>}
+            key={'slycat-wizard'}
+            // slycat-wizard is the standard wizard id from knockout
+            modalId={'slycat-wizard'}
+            closingCallBack={()=>console.log('clean and delete model')}
+            title={"New CCA Model"}
             footer={[<div>Footer</div>]}
-          />
+          >
+            <CCAWizardSteps key={'CCA Steps'}></CCAWizardSteps>
+            </CCAModalContent>
         );
 }
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
index c03dc4355..caffe1af9 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
@@ -8,14 +8,13 @@ export interface ModalContentProps {
   modalId: string,
   closingCallBack: Function;
   title: string;
-  body: JSX.Element;
   footer: JSX.Element[];
 }
 
 
-export const CCAModalContent = (props:ModalContentProps) => {
+export const CCAModalContent = (props:React.PropsWithChildren<ModalContentProps>) => {
 
-  const {modalId, closingCallBack, title, body, footer} = props;
+  const {modalId, closingCallBack, title, children, footer} = props;
   /**
    *close the modal and call the cleanup function
    * @memberof ModalContent
@@ -39,7 +38,7 @@ export const CCAModalContent = (props:ModalContentProps) => {
           </button>
         </div>
         <div className="modal-body" id="slycat-wizard">
-          {body}
+          {children}
         </div>
         <div className="modal-footer">{footer}</div>
       </div>
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
new file mode 100644
index 000000000..54f0425a8
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+export const CCAWizardSteps = () =>{
+    return (
+          <div>Body</div>
+        );
+}
\ No newline at end of file

From 605d29b6dae69ccf1b0e0b1ae17598c7cb6e4432 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 31 Jan 2025 15:39:09 -0700
Subject: [PATCH 04/31] moving footer to its own component

---
 .../plugins/slycat-cca/js/components/CCAWizard.tsx    |  6 ++++--
 .../slycat-cca/js/components/CCAWizardContent.tsx     |  2 +-
 .../slycat-cca/js/components/CCAWizardUtils.tsx       | 11 +++++++++++
 3 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index f4e63b568..60643842b 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -1,8 +1,10 @@
 import * as React from "react";
 import { CCAModalContent}  from "./CCAWizardContent";
 import { CCAWizardSteps } from "./CCAWizardSteps"
+import { useCCAWizardFooter } from "./CCAWizardUtils"
 
 export const CCAWizard = () =>{
+    const cCAWizardFooter = useCCAWizardFooter();
     return (
           <CCAModalContent
             key={'slycat-wizard'}
@@ -10,9 +12,9 @@ export const CCAWizard = () =>{
             modalId={'slycat-wizard'}
             closingCallBack={()=>console.log('clean and delete model')}
             title={"New CCA Model"}
-            footer={[<div>Footer</div>]}
+            footer={cCAWizardFooter}
           >
-            <CCAWizardSteps key={'CCA Steps'}></CCAWizardSteps>
+            <CCAWizardSteps key={'CCA Steps'}/>
             </CCAModalContent>
         );
 }
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
index caffe1af9..aca4608cb 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
@@ -8,7 +8,7 @@ export interface ModalContentProps {
   modalId: string,
   closingCallBack: Function;
   title: string;
-  footer: JSX.Element[];
+  footer?: React.ReactNode[] | undefined;
 }
 
 
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
new file mode 100644
index 000000000..ff49528f1
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export const useCCAWizardFooter = () => {
+    const backButton = (<button key="back button" className="btn btn-light mr-auto" onClick={()=>console.log('back')}>
+                            Back
+                        </button>)
+    const nextButton =  (<button key="continue" className="btn btn-primary" onClick={()=>console.log('click')}>
+                            Continue
+                        </button>)
+    return React.useMemo(()=>[backButton, nextButton],[])
+}
\ No newline at end of file

From f1aff504c0f6ecd6d589fc9505d5d3c5099e31b7 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 31 Jan 2025 16:59:26 -0700
Subject: [PATCH 05/31] start building the content

---
 .../slycat-cca/js/components/CCAWizard.tsx    |  39 +++--
 .../js/components/CCAWizardContent.tsx        |  55 +++----
 .../js/components/CCAWizardSteps.tsx          | 155 +++++++++++++++++-
 .../js/components/CCAWizardUtils.tsx          |  23 ++-
 web-server/plugins/slycat-cca/js/wizard-ui.js |  11 +-
 web-server/plugins/slycat-cca/wizard-ui.html  |   2 +-
 6 files changed, 218 insertions(+), 67 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index 60643842b..7155bcea6 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -1,20 +1,23 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
 import * as React from "react";
-import { CCAModalContent}  from "./CCAWizardContent";
-import { CCAWizardSteps } from "./CCAWizardSteps"
-import { useCCAWizardFooter } from "./CCAWizardUtils"
+import { CCAModalContent } from "./CCAWizardContent";
+import { CCAWizardSteps } from "./CCAWizardSteps";
+import { useCCAWizardFooter } from "./CCAWizardUtils";
 
-export const CCAWizard = () =>{
-    const cCAWizardFooter = useCCAWizardFooter();
-    return (
-          <CCAModalContent
-            key={'slycat-wizard'}
-            // slycat-wizard is the standard wizard id from knockout
-            modalId={'slycat-wizard'}
-            closingCallBack={()=>console.log('clean and delete model')}
-            title={"New CCA Model"}
-            footer={cCAWizardFooter}
-          >
-            <CCAWizardSteps key={'CCA Steps'}/>
-            </CCAModalContent>
-        );
-}
\ No newline at end of file
+export const CCAWizard = () => {
+  const cCAWizardFooter = useCCAWizardFooter();
+  return (
+    <CCAModalContent
+      key={"slycat-wizard"}
+      // slycat-wizard is the standard wizard id from knockout
+      modalId={"slycat-wizard"}
+      closingCallBack={() => console.log("clean and delete model")}
+      title={"New CCA Model"}
+      footer={cCAWizardFooter}
+    >
+      <CCAWizardSteps key={"CCA Steps"} />
+    </CCAModalContent>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
index aca4608cb..b0752241e 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
@@ -1,3 +1,6 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
 import * as React from "react";
 
 /**
@@ -5,42 +8,38 @@ import * as React from "react";
  * @member title test for the top of the modal
  */
 export interface ModalContentProps {
-  modalId: string,
+  modalId: string;
   closingCallBack: Function;
   title: string;
   footer?: React.ReactNode[] | undefined;
 }
 
-
-export const CCAModalContent = (props:React.PropsWithChildren<ModalContentProps>) => {
-
-  const {modalId, closingCallBack, title, children, footer} = props;
+export const CCAModalContent = (props: React.PropsWithChildren<ModalContentProps>) => {
+  const { modalId, closingCallBack, title, children, footer } = props;
   /**
    *close the modal and call the cleanup function
    * @memberof ModalContent
    */
-  const handleCloseModal = React.useCallback((e: React.MouseEvent): void => {
-    closingCallBack();
-    ($("#" + modalId) as any).modal("hide");
-  },[modalId, closingCallBack])
+  const handleCloseModal = React.useCallback(
+    (e: React.MouseEvent): void => {
+      closingCallBack();
+      ($("#" + modalId) as any).modal("hide");
+    },
+    [modalId, closingCallBack],
+  );
 
-    return (
-      <div>
-        <div className="modal-header">
-          <h3 className="modal-title">{title}</h3>
-          <button
-            type="button"
-            className="close"
-            aria-label="Close"
-            onClick={handleCloseModal}
-          >
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </div>
-        <div className="modal-body" id="slycat-wizard">
-          {children}
-        </div>
-        <div className="modal-footer">{footer}</div>
+  return (
+    <div>
+      <div className="modal-header">
+        <h3 className="modal-title">{title}</h3>
+        <button type="button" className="close" aria-label="Close" onClick={handleCloseModal}>
+          <span aria-hidden="true">&times;</span>
+        </button>
       </div>
-    );
-}
+      <div className="modal-body" id="slycat-wizard">
+        {children}
+      </div>
+      <div className="modal-footer">{footer}</div>
+    </div>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 54f0425a8..ed802237a 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -1,7 +1,152 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
 import * as React from "react";
 
-export const CCAWizardSteps = () =>{
-    return (
-          <div>Body</div>
-        );
-}
\ No newline at end of file
+export const CCAWizardSteps = () => {
+  return (
+    <div className="modal-body">
+      <ul className="nav nav-pills">
+        <li className="nav-item active" data-bind="css:{active:tab() == 0}">
+          <a className="nav-link">Locate Data</a>
+        </li>
+        <li
+          className="nav-item"
+          hidden={true}
+          data-bind="css:{active:tab() == 1}, visible: cca_type() == 'local'"
+        >
+          <a className="nav-link">Upload Table</a>
+        </li>
+        <li
+          className="nav-item"
+          hidden={true}
+          data-bind="css:{active:tab() == 2}, visible: cca_type() == 'remote'"
+        >
+          <a className="nav-link">Choose Host</a>
+        </li>
+        <li
+          className="nav-item"
+          hidden={true}
+          data-bind="css:{active:tab() == 3}, visible: cca_type() == 'remote'"
+        >
+          <a className="nav-link">Select Table</a>
+        </li>
+        <li className="nav-item" data-bind="css:{active:tab() == 4}">
+          <a className="nav-link">Select Columns</a>
+        </li>
+        <li className="nav-item" data-bind="css:{active:tab() == 5}">
+          <a className="nav-link">Name Model</a>
+        </li>
+      </ul>
+
+      <div className="tab-content">
+        <div hidden={false}>
+          <div className="form-check" style={{ marginLeft: "15px" }}>
+            <label>
+              <input
+                type="radio"
+                name="local-or-remote-radios"
+                id="local-radio"
+                value="local"
+                data-bind="checked: cca_type"
+              />
+              Local
+            </label>
+          </div>
+          <div className="form-check" style={{ marginLeft: "15px" }}>
+            <label>
+              <input
+                type="radio"
+                name="local-or-remote-radios"
+                id="remote-radio"
+                value="remote"
+                data-bind="checked: cca_type"
+              />
+              Remote
+            </label>
+          </div>
+        </div>
+
+        <div hidden={true}>
+          <div
+            className="alert alert-danger"
+            role="alert"
+            data-bind="visible:show_local_browser_error()"
+          >
+            You must selected a file before continuing.
+          </div>
+          {/* <slycat-local-browser
+              params="
+              selection:browser.selection,
+              progress:browser.progress,
+              progress_status:browser.progress_status"
+            ></slycat-local-browser>
+            <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
+        </div>
+
+        <div hidden={true}>
+          <form role="form">
+            {/* <slycat-remote-controls
+                params="
+                hostname:remote.hostname,
+                username:remote.username,
+                password:remote.password,
+                status:remote.status,
+                status_type:remote.status_type,
+                enable:remote.enable,
+                focus:remote.focus,
+                activate:connect,
+                session_exists:remote.session_exists"
+              ></slycat-remote-controls> */}
+          </form>
+        </div>
+
+        <div hidden={true} style={{ height: "400px" }}>
+          <div className="slycat-remote-browser-flex-layout">
+            {/* <slycat-remote-browser
+                params="
+                type:'remote',
+                sid:remote.sid,
+                hostname:remote.hostname,
+                selection:browser.selection,
+                path:browser.path,
+                open_file_callback:load_table,
+                session_exists:remote.session_exists,
+                persistence_id:'cca-table-file',
+                progress:remote.progress,
+                progress_status:remote.progress_status,
+                reauth:reauth,"
+              ></slycat-remote-browser>
+              <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
+          </div>
+        </div>
+
+        <div hidden={true}>
+          {/* <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
+                params="name:model.name,description:model.description,marking:model.marking"
+              ></slycat-model-controls> */}
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index ff49528f1..80d22fb18 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -1,11 +1,18 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
 import * as React from "react";
 
 export const useCCAWizardFooter = () => {
-    const backButton = (<button key="back button" className="btn btn-light mr-auto" onClick={()=>console.log('back')}>
-                            Back
-                        </button>)
-    const nextButton =  (<button key="continue" className="btn btn-primary" onClick={()=>console.log('click')}>
-                            Continue
-                        </button>)
-    return React.useMemo(()=>[backButton, nextButton],[])
-}
\ No newline at end of file
+  const backButton = (
+    <button key="back button" className="btn btn-light mr-auto" onClick={() => console.log("back")}>
+      Back
+    </button>
+  );
+  const nextButton = (
+    <button key="continue" className="btn btn-primary" onClick={() => console.log("click")}>
+      Continue
+    </button>
+  );
+  return React.useMemo(() => [backButton, nextButton], []);
+};
diff --git a/web-server/plugins/slycat-cca/js/wizard-ui.js b/web-server/plugins/slycat-cca/js/wizard-ui.js
index 0d66fa576..46163a8b4 100644
--- a/web-server/plugins/slycat-cca/js/wizard-ui.js
+++ b/web-server/plugins/slycat-cca/js/wizard-ui.js
@@ -3,17 +3,14 @@
  retains certain rights in this software. */
 import React from "react";
 import { createRoot } from "react-dom/client";
-// import TimeseriesWizard from "components/timeseries-wizard/TimeseriesWizard.tsx";
-import markings from "js/slycat-selectable-markings";
-import { CCAWizard } from ".//components/CCAWizard.tsx"
+// import markings from "js/slycat-selectable-markings";
+import { CCAWizard } from ".//components/CCAWizard.tsx";
 import ccaWizardUI from "../wizard-ui.html";
 
 function constructor(params) {
-  console.dir(params)
+  console.dir(params);
   const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
-  react_wizard_root.render(
-    <CCAWizard></CCAWizard>
-  );
+  react_wizard_root.render(<CCAWizard />);
 
   // return an empty component since we are just using it to render react
   return {};
diff --git a/web-server/plugins/slycat-cca/wizard-ui.html b/web-server/plugins/slycat-cca/wizard-ui.html
index 572e2ebb0..34c39f0f3 100644
--- a/web-server/plugins/slycat-cca/wizard-ui.html
+++ b/web-server/plugins/slycat-cca/wizard-ui.html
@@ -1,3 +1,3 @@
 <!-- Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government  retains certain rights in this software. -->
 
-<!-- Returning nothing because we are no longer using knockout to render the wizard, but still need knockout to register the wizard with slycat. -->
\ No newline at end of file
+<!-- Returning nothing because we are no longer using knockout to render the wizard, but still need knockout to register the wizard with slycat. -->

From 7e095f1c960c71365cf92a014a92e9c1b5f3f468 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Wed, 5 Feb 2025 10:45:56 -0700
Subject: [PATCH 06/31] Create SlycatLocalBrowser.tsx

---
 .../SlycatLocalBrowser.tsx                    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 web-server/plugins/slycat-cca/js/components/slycat-local-browser/SlycatLocalBrowser.tsx

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
new file mode 100644
index 000000000..a201f73c3
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/slycat-local-browser/SlycatLocalBrowser.tsx
@@ -0,0 +1,37 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+
+export const SlycatLocalBrowser = () => {
+  return (
+    <div className="form-group row">
+      <label className="col-sm-2 col-form-label" data-bind="css: {'disabled' : disabled}">
+        File
+      </label>
+      <div className="col-sm-10">
+        <input
+          type="file"
+          className=""
+          id="slycat-local-browser-file"
+          placeholder="file"
+          data-bind="event:{change: selection_changed}, attr: {'disabled' : disabled, 'multiple' : multiple}"
+        ></input>
+        <div className="progress" data-bind="visible: progress() != undefined && progress() > 0">
+          <div
+            className="progress-bar progress-bar-striped progress-bar-animated"
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            // data-bind="
+            //   attr: {'aria-valuenow' : progress},
+            style={{'width' : '0' + '%'}}
+            //   text: progress_status,"
+          >
+            Uploading
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

From 251ec7a84588c3e8f9e0e863e3f23a4e0f6c36f1 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 6 Feb 2025 10:24:16 -0700
Subject: [PATCH 07/31] adding nav items

---
 .../slycat-cca/js/components/CCANavItem.tsx   | 19 ++++++
 .../slycat-cca/js/components/CCANavItems.tsx  | 18 ++++++
 .../js/components/CCAWizardSelectionTab.tsx   | 35 +++++++++++
 .../js/components/CCAWizardSteps.tsx          | 63 ++-----------------
 4 files changed, 76 insertions(+), 59 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCANavItem.tsx
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
 create mode 100644 web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx

diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItem.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItem.tsx
new file mode 100644
index 000000000..0de7e0082
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItem.tsx
@@ -0,0 +1,19 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+
+interface CCANavItemProps {
+  name: string;
+  active?: boolean;
+  hidden?: boolean;
+}
+
+export const CCANavItem = ({ name, active, hidden }: CCANavItemProps) => {
+  const classNames = "nav-item" + (active ? " active": "");
+  return (
+    <li className={classNames} hidden={!!hidden}>
+      <a className="nav-link">{name}</a>
+    </li>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
new file mode 100644
index 000000000..994ad264f
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
@@ -0,0 +1,18 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import { CCANavItem } from "./CCANavItem";
+
+export const CCAWizardNavItems = () => {
+  return (
+      <ul className="nav nav-pills">
+        <CCANavItem key={'Locate Data'} name={'Locate Data'} active={true}/>
+        <CCANavItem key={'Upload Table'} name={'Upload Table'} hidden={true}/>
+        <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>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx
new file mode 100644
index 000000000..e47bfaa05
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx
@@ -0,0 +1,35 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+
+export const CCAWizardSelectionTab = () => {
+  return (
+    <div>
+      <div className="form-check" style={{ marginLeft: "15px" }}>
+        <label>
+          <input
+            type="radio"
+            name="local-or-remote-radios"
+            id="local-radio"
+            value="local"
+            data-bind="checked: cca_type"
+          />
+          Local
+        </label>
+      </div>
+      <div className="form-check" style={{ marginLeft: "15px" }}>
+        <label>
+          <input
+            type="radio"
+            name="local-or-remote-radios"
+            id="remote-radio"
+            value="remote"
+            data-bind="checked: cca_type"
+          />
+          Remote
+        </label>
+      </div>
+    </div>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index ed802237a..2955cf6a7 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -2,71 +2,16 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
+import { CCAWizardSelectionTab } from "./CCAWizardSelectionTab";
+import { CCAWizardNavItems } from "./CCANavItems";
 
 export const CCAWizardSteps = () => {
   return (
     <div className="modal-body">
-      <ul className="nav nav-pills">
-        <li className="nav-item active" data-bind="css:{active:tab() == 0}">
-          <a className="nav-link">Locate Data</a>
-        </li>
-        <li
-          className="nav-item"
-          hidden={true}
-          data-bind="css:{active:tab() == 1}, visible: cca_type() == 'local'"
-        >
-          <a className="nav-link">Upload Table</a>
-        </li>
-        <li
-          className="nav-item"
-          hidden={true}
-          data-bind="css:{active:tab() == 2}, visible: cca_type() == 'remote'"
-        >
-          <a className="nav-link">Choose Host</a>
-        </li>
-        <li
-          className="nav-item"
-          hidden={true}
-          data-bind="css:{active:tab() == 3}, visible: cca_type() == 'remote'"
-        >
-          <a className="nav-link">Select Table</a>
-        </li>
-        <li className="nav-item" data-bind="css:{active:tab() == 4}">
-          <a className="nav-link">Select Columns</a>
-        </li>
-        <li className="nav-item" data-bind="css:{active:tab() == 5}">
-          <a className="nav-link">Name Model</a>
-        </li>
-      </ul>
+      <CCAWizardNavItems/>
 
       <div className="tab-content">
-        <div hidden={false}>
-          <div className="form-check" style={{ marginLeft: "15px" }}>
-            <label>
-              <input
-                type="radio"
-                name="local-or-remote-radios"
-                id="local-radio"
-                value="local"
-                data-bind="checked: cca_type"
-              />
-              Local
-            </label>
-          </div>
-          <div className="form-check" style={{ marginLeft: "15px" }}>
-            <label>
-              <input
-                type="radio"
-                name="local-or-remote-radios"
-                id="remote-radio"
-                value="remote"
-                data-bind="checked: cca_type"
-              />
-              Remote
-            </label>
-          </div>
-        </div>
-
+        <CCAWizardSelectionTab/>
         <div hidden={true}>
           <div
             className="alert alert-danger"

From 4ed5089f6bac7ac8b87cd7804efa9ec0f26cab60 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 27 Mar 2025 17:01:33 -0600
Subject: [PATCH 08/31] building redux store for the wizard

---
 .../slycat-cca/js/components/CCAWizard.tsx    | 26 ++++++++++-------
 .../js/components/CCAWizardSteps.tsx          | 11 ++++---
 .../js/components/CCAWizardUtils.tsx          |  8 ++++-
 .../js/components/wizard-store/hooks.tsx      |  7 +++++
 .../reducers/tabTrackingSlice.tsx             | 29 +++++++++++++++++++
 .../js/components/wizard-store/store.tsx      | 18 ++++++++++++
 .../CCADataWizardSelectionTab.tsx}            |  5 ++--
 .../wizard-tabs/CCSLocalBrowserTab.tsx        | 14 +++++++++
 web-server/plugins/slycat-cca/js/wizard-ui.js |  8 ++++-
 9 files changed, 108 insertions(+), 18 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-store/hooks.tsx
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
 rename web-server/plugins/slycat-cca/js/components/{CCAWizardSelectionTab.tsx => wizard-tabs/CCADataWizardSelectionTab.tsx} (87%)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index 7155bcea6..12aa8b059 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -5,19 +5,25 @@ import * as React from "react";
 import { CCAModalContent } from "./CCAWizardContent";
 import { CCAWizardSteps } from "./CCAWizardSteps";
 import { useCCAWizardFooter } from "./CCAWizardUtils";
+import { useAppDispatch } from "./wizard-store/hooks";
+import { resetTabTracking } from "./wizard-store/reducers/tabTrackingSlice";
 
 export const CCAWizard = () => {
   const cCAWizardFooter = useCCAWizardFooter();
+  const dispatch = useAppDispatch();
   return (
-    <CCAModalContent
-      key={"slycat-wizard"}
-      // slycat-wizard is the standard wizard id from knockout
-      modalId={"slycat-wizard"}
-      closingCallBack={() => console.log("clean and delete model")}
-      title={"New CCA Model"}
-      footer={cCAWizardFooter}
-    >
-      <CCAWizardSteps key={"CCA Steps"} />
-    </CCAModalContent>
+      <CCAModalContent
+        key={"slycat-wizard"}
+        // slycat-wizard is the standard wizard id from knockout
+        modalId={"slycat-wizard"}
+        closingCallBack={() => {
+          console.log("clean and delete model")
+          dispatch(resetTabTracking())
+        }}
+        title={"New CCA Model"}
+        footer={cCAWizardFooter}
+      >
+        <CCAWizardSteps key={"CCA Steps"} />
+      </CCAModalContent>
   );
 };
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 2955cf6a7..548614a52 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -2,17 +2,20 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
-import { CCAWizardSelectionTab } from "./CCAWizardSelectionTab";
+import { CCAWizardDataSelectionTab } from "./wizard-tabs/CCADataWizardSelectionTab";
 import { CCAWizardNavItems } from "./CCANavItems";
+import { useAppSelector, useAppDispatch } from "./wizard-store/hooks";
+import { selectTab, TabNames } from "./wizard-store/reducers/tabTrackingSlice";
 
 export const CCAWizardSteps = () => {
+  // The `state` arg is correctly typed as `RootState` already
+  const tabName = useAppSelector(selectTab)
   return (
     <div className="modal-body">
       <CCAWizardNavItems/>
-
       <div className="tab-content">
-        <CCAWizardSelectionTab/>
-        <div hidden={true}>
+        <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCADataWizardSelectionTab)}/>
+        <div hidden={!(tabName === TabNames.CCSLocalBrowserTab)}>
           <div
             className="alert alert-danger"
             role="alert"
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 80d22fb18..72ec9518e 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -2,15 +2,21 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
+import { useAppDispatch } from "./wizard-store/hooks";
+import { setTabName, TabNames } from "./wizard-store/reducers/tabTrackingSlice";
 
 export const useCCAWizardFooter = () => {
+  const dispatch = useAppDispatch();
   const backButton = (
     <button key="back button" className="btn btn-light mr-auto" onClick={() => console.log("back")}>
       Back
     </button>
   );
   const nextButton = (
-    <button key="continue" className="btn btn-primary" onClick={() => console.log("click")}>
+    <button key="continue" className="btn btn-primary" onClick={() => {
+      console.log("click")
+      dispatch(setTabName(TabNames.CCSLocalBrowserTab))
+    }}>
       Continue
     </button>
   );
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/hooks.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/hooks.tsx
new file mode 100644
index 000000000..db04c6032
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-store/hooks.tsx
@@ -0,0 +1,7 @@
+import { useDispatch, useSelector, useStore } from 'react-redux'
+import type { AppDispatch, AppStore, RootState } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppStore = useStore.withTypes<AppStore>()
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx
new file mode 100644
index 000000000..bee981632
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx
@@ -0,0 +1,29 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { RootState } from '../store'
+
+export enum TabNames {
+    CCADataWizardSelectionTab = "CCADataWizardSelectionTab",
+    CCSLocalBrowserTab = "CCSLocalBrowserTab"
+}
+const initialState: {tab:TabNames} = {
+    tab: TabNames.CCADataWizardSelectionTab,
+  }
+export const tabTrackingSlice = createSlice({
+  name: 'tabTracking',
+  initialState,
+  reducers: {
+    setTabName: (state, action: PayloadAction<TabNames>) => {
+      console.log(action.payload)
+      state.tab = action.payload
+    },
+    resetTabTracking: () => initialState
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { setTabName, resetTabTracking } = tabTrackingSlice.actions
+// Other code such as selectors can use the imported `RootState` type
+export const selectTab = (state: RootState) => state.tabTracking.tab
+
+
+export default tabTrackingSlice.reducer
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
new file mode 100644
index 000000000..d69145003
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
@@ -0,0 +1,18 @@
+import { configureStore } from '@reduxjs/toolkit'
+import tabTrackingReducer from './reducers/tabTrackingSlice'
+const globalWindow = (window as any);
+export const cCAWizardStore = configureStore({
+  reducer: {
+    tabTracking: tabTrackingReducer
+  },
+})
+
+
+// Get the type of our store variable
+export type AppStore = typeof cCAWizardStore
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<AppStore['getState']>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = AppStore['dispatch']
+
+globalWindow.cCAWizardStore = cCAWizardStore;
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
similarity index 87%
rename from web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx
rename to web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
index e47bfaa05..12f9593ed 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSelectionTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
@@ -3,9 +3,10 @@
  retains certain rights in this software. */
 import * as React from "react";
 
-export const CCAWizardSelectionTab = () => {
+export const CCAWizardDataSelectionTab = (props: {hidden?: boolean}) => {
+  const { hidden = false } = props;
   return (
-    <div>
+    <div hidden={hidden}>
       <div className="form-check" style={{ marginLeft: "15px" }}>
         <label>
           <input
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
new file mode 100644
index 000000000..6bef9172e
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
@@ -0,0 +1,14 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import { SlycatLocalBrowser } from "../slycat-local-browser/SlycatLocalBrowser";
+
+export const CCALocalBrowserTab = (props: {hidden?: boolean}) => {
+  const { hidden = false } = props;
+  return (
+    <div hidden={hidden}>
+        <SlycatLocalBrowser/>
+    </div>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/wizard-ui.js b/web-server/plugins/slycat-cca/js/wizard-ui.js
index 46163a8b4..bf32d4afc 100644
--- a/web-server/plugins/slycat-cca/js/wizard-ui.js
+++ b/web-server/plugins/slycat-cca/js/wizard-ui.js
@@ -6,11 +6,17 @@ import { createRoot } from "react-dom/client";
 // import markings from "js/slycat-selectable-markings";
 import { CCAWizard } from ".//components/CCAWizard.tsx";
 import ccaWizardUI from "../wizard-ui.html";
+import { Provider } from 'react-redux'
+import { cCAWizardStore } from ".//components/wizard-store/store";
 
 function constructor(params) {
   console.dir(params);
   const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
-  react_wizard_root.render(<CCAWizard />);
+  react_wizard_root.render(
+    <Provider store={cCAWizardStore}>
+      <CCAWizard />
+    </Provider>
+);
 
   // return an empty component since we are just using it to render react
   return {};

From ee8bff9f4ebbfeebdb6e31126d670b1575bec1c8 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 28 Mar 2025 16:26:17 -0600
Subject: [PATCH 09/31] adding redux step state for cca wizard model

---
 web-server/js/slycat-file-uploader-factory.js | 573 +++++++++---------
 .../slycat-cca/js/components/CCANavItems.tsx  |  29 +-
 .../slycat-cca/js/components/CCAWizard.tsx    |  42 +-
 .../js/components/CCAWizardContent.tsx        |   2 +-
 .../js/components/CCAWizardSteps.tsx          |  10 +-
 .../js/components/CCAWizardUtils.tsx          |  47 +-
 .../SlycatLocalBrowser.tsx                    |  44 +-
 .../wizard-store/reducers/cCAWizardSlice.tsx  |  61 ++
 .../reducers/tabTrackingSlice.tsx             |  29 -
 .../js/components/wizard-store/store.tsx      |   4 +-
 .../wizard-tabs/CCADataWizardSelectionTab.tsx |  10 +-
 .../wizard-tabs/CCSLocalBrowserTab.tsx        |   4 +-
 web-server/plugins/slycat-cca/js/new-ui.js    |   1 -
 web-server/plugins/slycat-cca/js/wizard-ui.js |   4 +-
 .../slycat-timeseries-model/js/wizard-ui.js   |   6 -
 15 files changed, 471 insertions(+), 395 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx
 delete mode 100644 web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx

diff --git a/web-server/js/slycat-file-uploader-factory.js b/web-server/js/slycat-file-uploader-factory.js
index e89858445..dff4ef42f 100644
--- a/web-server/js/slycat-file-uploader-factory.js
+++ b/web-server/js/slycat-file-uploader-factory.js
@@ -4,8 +4,8 @@
 
 import client from "js/slycat-web-client";
 
-var module = {};//uploader object we wish to populate and return
-module.MEGABYTE = 10000000;//the number of bytes we will split large files on
+var module = {}; //uploader object we wish to populate and return
+module.MEGABYTE = 10000000; //the number of bytes we will split large files on
 
 /**
  *  File uploader that can either be given a file or
@@ -24,9 +24,8 @@ module.MEGABYTE = 10000000;//the number of bytes we will split large files on
  *      success: function called if upload is successful
  *    }
  */
-module.uploadFile = function (fileObject, useProjectData)
-{
-  if(fileObject.hostname && fileObject.paths){
+module.uploadFile = function (fileObject, useProjectData) {
+  if (fileObject.hostname && fileObject.paths) {
     // console.log("creating remote file upload session");
     client.post_uploads({
       mid: fileObject.mid,
@@ -35,10 +34,17 @@ module.uploadFile = function (fileObject, useProjectData)
       aids: fileObject.aids,
       success: function (uid) {
         // console.log("Upload session created.");
-        uploadRemoteFile(fileObject.pid, fileObject.mid, uid, fileObject.hostname, fileObject.paths, fileObject);
-      }
+        uploadRemoteFile(
+          fileObject.pid,
+          fileObject.mid,
+          uid,
+          fileObject.hostname,
+          fileObject.paths,
+          fileObject,
+        );
+      },
     });
-  }else {
+  } else {
     // console.log("creating file upload session");
     client.post_uploads({
       mid: fileObject.mid,
@@ -47,8 +53,15 @@ module.uploadFile = function (fileObject, useProjectData)
       aids: fileObject.aids,
       success: function (uid) {
         // console.log("Upload session created.");
-        uploadFile(fileObject.pid, fileObject.mid, uid, fileObject.file, fileObject, useProjectData);
-      }
+        uploadFile(
+          fileObject.pid,
+          fileObject.mid,
+          uid,
+          fileObject.file,
+          fileObject,
+          useProjectData,
+        );
+      },
     });
   }
 };
@@ -57,77 +70,66 @@ module.uploadFile = function (fileObject, useProjectData)
 // fileObject.file is passed as a FileList, and it
 // only works for local uploads.
 // S. Martin (10/23/2019)
-module.uploadMultipleFiles = function (fileObject)
-{
+module.uploadMultipleFiles = function (fileObject) {
+  // open upload session
+  client.post_uploads({
+    mid: fileObject.mid,
+    input: true,
+    parser: fileObject.parser,
+    aids: fileObject.aids,
+    success: function (uid) {
+      var fileList = fileObject.file;
+
+      // Make sure we actually have a file list first
+      if (fileList == undefined) {
+        if (fileObject.error) {
+          fileObject.error();
+        }
+        return;
+      }
 
-    // open upload session
-    client.post_uploads({
-        mid: fileObject.mid,
-        input: true,
-        parser: fileObject.parser,
-        aids: fileObject.aids,
-        success: function (uid) {
-
-          var fileList = fileObject.file;
-
-          // Make sure we actually have a file list first
-          if(fileList == undefined)
-          {
-            if(fileObject.error)
-            {
-              fileObject.error();
-            }
-            return;
-          }
-
-          // how many files?
-          var numFiles = fileList.length;
-
-          // initially assume one slice per file
-          var fileSlicesUploaded = [];
-          for (var i = 0; i < numFiles; i++) {
-            fileSlicesUploaded.push(1);
-          }
-
-          // set up progress bar
-          var progress = {};
-          progress["IncreaseInitial"] = 10.0;
-          progress["Increase"] = 40.0/numFiles;
-
-          // check if caller has specific progress bar values
-          if(fileObject.progress_increment != undefined)
-          {
-            progress["IncreaseInitial"] = fileObject.progress_increment * 0.1;
-            progress["Increase"] = fileObject.progress_increment * 0.4/numFiles;
-          }
-
-          // set initial progress bar
-          if(fileObject.progress)
-          {
-            // Setting initial progress to 10%
-            fileObject.progress( fileObject.progress() + progress["IncreaseInitial"] )
-          }
-
-          // check for text on progress bar
-          if(fileObject.progress_status)
-          {
-            fileObject.progress_status('Uploading...');
-          }
-
-          // upload files, starting with first in list
-          uploadMultipleFiles(progress, uid, 0, fileSlicesUploaded, fileObject)
+      // how many files?
+      var numFiles = fileList.length;
 
-        }
-    });
-}
+      // initially assume one slice per file
+      var fileSlicesUploaded = [];
+      for (var i = 0; i < numFiles; i++) {
+        fileSlicesUploaded.push(1);
+      }
+
+      // set up progress bar
+      var progress = {};
+      progress["IncreaseInitial"] = 10.0;
+      progress["Increase"] = 40.0 / numFiles;
+
+      // check if caller has specific progress bar values
+      if (fileObject.progress_increment != undefined) {
+        progress["IncreaseInitial"] = fileObject.progress_increment * 0.1;
+        progress["Increase"] = (fileObject.progress_increment * 0.4) / numFiles;
+      }
+
+      // set initial progress bar
+      if (fileObject.progress) {
+        // Setting initial progress to 10%
+        fileObject.progress(fileObject.progress() + progress["IncreaseInitial"]);
+      }
+
+      // check for text on progress bar
+      if (fileObject.progress_status) {
+        fileObject.progress_status("Uploading...");
+      }
+
+      // upload files, starting with first in list
+      uploadMultipleFiles(progress, uid, 0, fileSlicesUploaded, fileObject);
+    },
+  });
+};
 
 // this is the actual code that uploads the file list,
 // modified from the uploadFile routine.  it calls itself
 // repeatedly until all files/slices are loaded.
 // S. Martin (10/28/2019)
-function uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObject)
-{
-
+function uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObject) {
   // console.log("uploading file " + fileNum + ".");
 
   var fileList = fileObject.file;
@@ -141,13 +143,10 @@ function uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObj
   // compute progress per slice
   progress["IncreasePerSlice"] = progress["Increase"] / slicesPerFile;
 
-  if(fileList[fileNum].size > module.MEGABYTE)
-  {
+  if (fileList[fileNum].size > module.MEGABYTE) {
     // console.log("Multi-file upload initiated.");
     uploadMultipleFileSlices(progress, uid, 0, fileNum, fileSlicesUploaded, fileObject);
-  }
-  else
-  {
+  } else {
     // Upload the whole file since it is small.
     // console.log("Uploading whole file.");
 
@@ -156,28 +155,25 @@ function uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObj
       fid: fileNum,
       pid: 0,
       file: fileList[fileNum],
-      success: function()
-      {
+      success: function () {
         // console.log("File uploaded.");
-        if(fileObject.progress)
-        {
+        if (fileObject.progress) {
           fileObject.progress(fileObject.progress() + progress["IncreasePerSlice"]);
         }
 
         // check for next file
         fileNum++;
         if (fileNum < fileList.length) {
-            uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObject)
+          uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObject);
         } else {
-            finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject);
+          finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject);
         }
-
       },
-      error: function(){
-        if(fileObject.error) {
+      error: function () {
+        if (fileObject.error) {
           fileObject.error();
         }
-      }
+      },
     });
   }
 }
@@ -186,83 +182,85 @@ function uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObj
 // it returns control to uploadMultipleFiles rather than
 // ending prematurely with finishUpload (now finishMultipleUpload).
 // S. Martin (10/28/2019)
-function uploadMultipleFileSlices(progress, uid, sliceNumber, fileNum,
-                                  fileSlicesUploaded, fileObject){
-
+function uploadMultipleFileSlices(
+  progress,
+  uid,
+  sliceNumber,
+  fileNum,
+  fileSlicesUploaded,
+  fileObject,
+) {
   // Split the file into slices.
   //TODO: add incrementing file id in upload file
   var fileList = fileObject.file;
   var fileSlice = getFileSlice(sliceNumber, fileList[fileNum]);
   var running = true;
-    // Upload each part separately.
-    // console.log("Uploading part", sliceNumber);
-    client.put_upload_file_part({
-      uid: uid,
-      fid: fileNum,
-      pid: sliceNumber,
-      file: fileSlice,
-      success: function()
-      {
-        running = ((sliceNumber * module.MEGABYTE) <= fileList[fileNum].size);
-        sliceNumber ++;
-        // console.log("File uploaded part:" + sliceNumber + " successfully");
-        if(fileObject.progress)
-        {
-          fileObject.progress( fileObject.progress() + progress["IncreasePerSlice"] );
-        }
-        if(running){
-          uploadMultipleFileSlices(progress, uid, sliceNumber, fileNum,
-                                   fileSlicesUploaded, fileObject)
+  // Upload each part separately.
+  // console.log("Uploading part", sliceNumber);
+  client.put_upload_file_part({
+    uid: uid,
+    fid: fileNum,
+    pid: sliceNumber,
+    file: fileSlice,
+    success: function () {
+      running = sliceNumber * module.MEGABYTE <= fileList[fileNum].size;
+      sliceNumber++;
+      // console.log("File uploaded part:" + sliceNumber + " successfully");
+      if (fileObject.progress) {
+        fileObject.progress(fileObject.progress() + progress["IncreasePerSlice"]);
+      }
+      if (running) {
+        uploadMultipleFileSlices(
+          progress,
+          uid,
+          sliceNumber,
+          fileNum,
+          fileSlicesUploaded,
+          fileObject,
+        );
+      } else {
+        // check for next file
+        fileSlicesUploaded[fileNum] = sliceNumber;
+        fileNum++;
+        if (fileNum < fileList.length) {
+          uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObject);
         } else {
-
-            // check for next file
-            fileSlicesUploaded[fileNum] = sliceNumber;
-            fileNum++;
-            if (fileNum < fileList.length) {
-                uploadMultipleFiles(progress, uid, fileNum, fileSlicesUploaded, fileObject)
-            } else {
-                finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject);
-            }
-
+          finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject);
         }
-      },
-      error: function(){
-        // console.log("File part " + sliceNumber + " failed to upload will try to re-upload at the end");
       }
-    });
+    },
+    error: function () {
+      // console.log("File part " + sliceNumber + " failed to upload will try to re-upload at the end");
+    },
+  });
 }
 
 // replaces finishUpload for multiple file uploads.
 // S. Martin (10/28/2019
-function finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject)
-{
+function finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject) {
   // console.log(fileSlicesUploaded);
 
   client.post_upload_finished({
     uid: uid,
     uploaded: fileSlicesUploaded,
-    success: function()
-    {
+    success: function () {
       // console.log("Upload session finished.");
-      if(fileObject.progress)
-      {
+      if (fileObject.progress) {
         // Setting progress to half by adding 1/10th of total progress or progress_increment
         // since uploadFile() has already set it to 4/10ths
         progress["To90"] = 10;
-        if(fileObject.progress_increment != undefined)
-        {
+        if (fileObject.progress_increment != undefined) {
           progress["To90"] = fileObject.progress_increment * 0.1;
         }
         fileObject.progress(fileObject.progress() + progress["To90"]);
       }
       deleteUpload(fileObject.pid, fileObject.mid, uid, fileObject);
     },
-    error: function(request, status, reason_phrase)
-    {
+    error: function (request, status, reason_phrase) {
       if (fileObject.error) {
         fileObject.error();
       }
-    }
+    },
   });
 }
 
@@ -281,16 +279,13 @@ function finishMultipleUpload(progress, uid, fileSlicesUploaded, fileObject)
  * @param fileObject
  *  object that contains all info about the file we wish to upload to couch
  */
-function uploadRemoteFile(pid, mid, uid, hostname, path, fileObject){
-
-  if(fileObject.progress)
-  {
+function uploadRemoteFile(pid, mid, uid, hostname, path, fileObject) {
+  if (fileObject.progress) {
     // Setting initial progress to 10%
     fileObject.progress(10);
   }
-  if(fileObject.progress_status)
-  {
-    fileObject.progress_status('Uploading...');
+  if (fileObject.progress_status) {
+    fileObject.progress_status("Uploading...");
   }
 
   client.put_upload_file_part({
@@ -299,16 +294,15 @@ function uploadRemoteFile(pid, mid, uid, hostname, path, fileObject){
     pid: 0,
     path: path,
     hostname: hostname,
-    success: function()
-    {
+    success: function () {
       // console.log("File uploaded.");
       finishUpload(pid, mid, uid, null, 1, fileObject);
     },
-    error: function(){
-      if(fileObject.error) {
+    error: function () {
+      if (fileObject.error) {
         fileObject.error();
       }
-    }
+    },
   });
 }
 
@@ -322,87 +316,84 @@ function uploadRemoteFile(pid, mid, uid, hostname, path, fileObject){
  * @return
  *  The slice of the file associated with the slice number
  */
-function getFileSlice(sliceNumber, file){
-    var currentSliceBoundary = (sliceNumber * module.MEGABYTE);
-    if((currentSliceBoundary + module.MEGABYTE) < file.size){
-      return file.slice(currentSliceBoundary, currentSliceBoundary + module.MEGABYTE);
-    }else{
-      return file.slice(currentSliceBoundary, file.size)
-    }
+function getFileSlice(sliceNumber, file) {
+  var currentSliceBoundary = sliceNumber * module.MEGABYTE;
+  if (currentSliceBoundary + module.MEGABYTE < file.size) {
+    return file.slice(currentSliceBoundary, currentSliceBoundary + module.MEGABYTE);
+  } else {
+    return file.slice(currentSliceBoundary, file.size);
+  }
 }
 
-  /**
-   * Used to upload multiple sequential slices of a file to the server database
-   *
-   * @param pid
-   * @param mid
-   * @param uid
-   *  unique upload session id
-   * @param sliceNumber
-   *  The incremental identifier for the file slice
-   * @param file
-   *  file to be uploaded
-   * @param fileObject
-   * @param progressIncreasePerSlice
-   */
-function uploadFileSlices(pid, mid, uid, sliceNumber, file, fileObject, progressIncreasePerSlice){
+/**
+ * Used to upload multiple sequential slices of a file to the server database
+ *
+ * @param pid
+ * @param mid
+ * @param uid
+ *  unique upload session id
+ * @param sliceNumber
+ *  The incremental identifier for the file slice
+ * @param file
+ *  file to be uploaded
+ * @param fileObject
+ * @param progressIncreasePerSlice
+ */
+function uploadFileSlices(pid, mid, uid, sliceNumber, file, fileObject, progressIncreasePerSlice) {
   // Split the file into slices.
   //TODO: add incrementing file id in upload file
   var fileSlice = getFileSlice(sliceNumber, file);
   var running = true;
-    // Upload each part separately.
-    // console.log("Uploading part", sliceNumber);
-    client.put_upload_file_part({
-      uid: uid,
-      fid: 0,
-      pid: sliceNumber,
-      file: fileSlice,
-      success: function()
-      {
-        running = ((sliceNumber * module.MEGABYTE) <= file.size);
-        sliceNumber ++;
-        // console.log("File uploaded part:" + sliceNumber + " successfully");
-        if(fileObject && fileObject.progress && progressIncreasePerSlice)
-        {
-          fileObject.progress( fileObject.progress() + progressIncreasePerSlice );
-        }
-        if(running){
-          uploadFileSlices(pid, mid, uid, sliceNumber, file, fileObject, progressIncreasePerSlice)
-        }else{
-          finishUpload(pid, mid, uid, file, sliceNumber, fileObject);//good to go
-        }
-      },
-      error: function(){
-        // console.log("File part " + sliceNumber + " failed to upload will try to re-upload at the end");
+  // Upload each part separately.
+  // console.log("Uploading part", sliceNumber);
+  client.put_upload_file_part({
+    uid: uid,
+    fid: 0,
+    pid: sliceNumber,
+    file: fileSlice,
+    success: function () {
+      running = sliceNumber * module.MEGABYTE <= file.size;
+      sliceNumber++;
+      // console.log("File uploaded part:" + sliceNumber + " successfully");
+      if (fileObject && fileObject.progress && progressIncreasePerSlice) {
+        fileObject.progress(fileObject.progress() + progressIncreasePerSlice);
       }
-    });
+      if (running) {
+        uploadFileSlices(pid, mid, uid, sliceNumber, file, fileObject, progressIncreasePerSlice);
+      } else {
+        finishUpload(pid, mid, uid, file, sliceNumber, fileObject); //good to go
+      }
+    },
+    error: function () {
+      // console.log("File part " + sliceNumber + " failed to upload will try to re-upload at the end");
+    },
+  });
 }
 
-  /**
-   * used to upload a single slice of a file
-   * @param uid
-   * @param sliceNumber
-   * @param file
-   */
-function uploadFileSlice(uid, sliceNumber, file){
+/**
+ * used to upload a single slice of a file
+ * @param uid
+ * @param sliceNumber
+ * @param file
+ */
+function uploadFileSlice(uid, sliceNumber, file) {
   // Split the file into slices.
   //TODO: add incrementing file id in upload file
   var fileSlice = getFileSlice(sliceNumber, file);
-    // Upload each part separately.
-    // console.log("Uploading part", sliceNumber);
-    client.put_upload_file_part({
-      uid: uid,
-      fid: 0,
-      pid: sliceNumber,
-      file: fileSlice,
-      success: function()
-      {
-        // console.log("File uploaded part:" + sliceNumber + " successfully");
-      },
-      error: function(){
-        // console.log("File part " + sliceNumber + " failed to upload will try to re-upload at the end");
-      }
-    });
+  // Upload each part separately.
+  // console.log("Uploading part", sliceNumber);
+  client.put_upload_file_part({
+    uid: uid,
+    fid: 0,
+    pid: sliceNumber,
+    file: fileSlice,
+    success: function () {
+      // console.log("File uploaded part:" + sliceNumber + " successfully");
+    },
+    error: function () {
+      // console.log("File part " + sliceNumber + " failed to upload will try to re-upload at the end");
+    },
+  });
 }
 
 /**
@@ -421,13 +412,10 @@ function uploadFileSlice(uid, sliceNumber, file){
  * @param fileObject
  *  json object that contains the file info
  */
-function uploadFile(pid, mid, uid, file, fileObject, useProjectData)
-{
+function uploadFile(pid, mid, uid, file, fileObject, useProjectData) {
   // Make sure we actually have a file first
-  if(file == undefined)
-  {
-    if(fileObject.error)
-    {
+  if (file == undefined) {
+    if (fileObject.error) {
       fileObject.error();
     }
     return;
@@ -435,8 +423,7 @@ function uploadFile(pid, mid, uid, file, fileObject, useProjectData)
 
   var progressIncreaseInitial = 10;
   var progressIncrease = 40;
-  if(fileObject.progress_increment != undefined)
-  {
+  if (fileObject.progress_increment != undefined) {
     progressIncreaseInitial = fileObject.progress_increment * 0.1;
     progressIncrease = fileObject.progress_increment * 0.4;
   }
@@ -444,56 +431,51 @@ function uploadFile(pid, mid, uid, file, fileObject, useProjectData)
   // modified to adjust inconsistency in progress bar for large files
   // S. Martin (10/29/2019)
   var slicesPerFile = Math.ceil(file.size / module.MEGABYTE);
-  if (slicesPerFile > 1) { slicesPerFile++; }
+  if (slicesPerFile > 1) {
+    slicesPerFile++;
+  }
   var progressIncreasePerSlice = progressIncrease / slicesPerFile;
 
   // original code:
   // var progressIncreasePerSlice = (progressIncrease - progressIncreaseInitial) / Math.ceil(file.size / module.MEGABYTE);
 
-  if(fileObject.progress)
-  {
+  if (fileObject.progress) {
     // Setting initial progress to 10%
-    fileObject.progress( fileObject.progress() + progressIncreaseInitial )
+    fileObject.progress(fileObject.progress() + progressIncreaseInitial);
   }
-  if(fileObject.progress_status)
-  {
-    fileObject.progress_status('Uploading...');
+  if (fileObject.progress_status) {
+    fileObject.progress_status("Uploading...");
   }
 
   // console.log("Uploading file "+ file + " \nfile size:" + file.size);
   // console.log("floor size" + Math.floor(file.size / module.MEGABYTE));
 
-  if(file.size > module.MEGABYTE)
-  {
+  if (file.size > module.MEGABYTE) {
     // console.log("Multi-file upload initiated.");
     var running = true;
     var sliceNumber = 0;
     uploadFileSlices(pid, mid, uid, sliceNumber, file, fileObject, progressIncreasePerSlice);
-  }
-  else
-  {
+  } else {
     // Upload the whole file since it is small.
     // console.log("Uploading whole file.");
-    
+
     client.put_upload_file_part({
       uid: uid,
       fid: 0,
       pid: 0,
       file: file,
-      success: function()
-      {
+      success: function () {
         // console.log("File uploaded.");
-        if(fileObject.progress)
-        {
+        if (fileObject.progress) {
           fileObject.progress(fileObject.progress() + progressIncreasePerSlice);
         }
         finishUpload(pid, mid, uid, file, 1, fileObject, useProjectData);
       },
-      error: function(){
-        if(fileObject.error) {
+      error: function () {
+        if (fileObject.error) {
           fileObject.error();
         }
-      }
+      },
     });
   }
 }
@@ -514,50 +496,43 @@ function uploadFile(pid, mid, uid, file, fileObject, useProjectData)
  * @param fileObject
  *  json object that contains the file info
  */
-function finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, useProjectData)
-{
+function finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, useProjectData) {
   client.post_upload_finished({
     uid: uid,
     uploaded: [numberOfUploadedSlices],
     useProjectData: useProjectData,
-    success: function()
-    {
+    success: function () {
       // console.log("Upload session finished.");
-      if(fileObject.progress)
-      {
+      if (fileObject.progress) {
         // Setting progress to half by adding 1/10th of total progress or progress_increment
         // since uploadFile() has already set it to 4/10ths
         var progressToHalf = 10;
-        if(fileObject.progress_increment != undefined)
-        {
+        if (fileObject.progress_increment != undefined) {
           progressToHalf = fileObject.progress_increment * 0.1;
         }
         fileObject.progress(fileObject.progress() + progressToHalf);
       }
       deleteUpload(pid, mid, uid, fileObject);
     },
-    error: function(request, status, reason_phrase)
-    {
-      console.log("request.status",request.status)
-      if(request.status === 400 && !fileObject.sids && !fileObject.paths)
-      {
+    error: function (request, status, reason_phrase) {
+      console.log("request.status", request.status);
+      if (request.status === 400 && !fileObject.sids && !fileObject.paths) {
         var missingElements = JSON.parse(request.responseText).missing;
-        missingElements.forEach(function(missingElement){
+        missingElements.forEach(function (missingElement) {
           console.log("missing element " + missingElement[1] + " for file" + missingElement[0]);
           uploadFileSlice(uid, missingElement[1], file);
           finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, useProjectData);
         });
-      }else if(request.status === 423){
-        setTimeout(function(){
-          finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, useProjectData)
+      } else if (request.status === 423) {
+        setTimeout(function () {
+          finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, useProjectData);
         }, 5000);
-      }
-      else{
-        if(fileObject.error) {
+      } else {
+        if (fileObject.error) {
           fileObject.error();
         }
       }
-    }
+    },
   });
 }
 
@@ -573,62 +548,58 @@ function finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, u
  * @param fileObject
  *  json object that contains the file info
  */
-function deleteUpload(pid, mid, uid, fileObject, progress_increment_applied)
-{
-  if(fileObject.progress_status)
-  {
-    fileObject.progress_status('Parsing...')
+function deleteUpload(pid, mid, uid, fileObject, progress_increment_applied) {
+  if (fileObject.progress_status) {
+    fileObject.progress_status("Parsing...");
   }
   client.delete_upload({
     uid: uid,
-    success: function()
-    {
+    success: function () {
       // console.log("Upload session deleted.");
-      if(fileObject.progress)
-      {
+      if (fileObject.progress) {
         var progress_final = 100;
-        if(fileObject.progress_final != undefined)
-        {
+        if (fileObject.progress_final != undefined) {
           progress_final = fileObject.progress_final;
-        }
-        else if(fileObject.progress_increment != undefined)
-        {
-          var progress_increment_used = progress_increment_applied == undefined ? 0 : progress_increment_applied;
-          progress_final = fileObject.progress() + (fileObject.progress_increment - (fileObject.progress_increment * .5) - progress_increment_used);
+        } else if (fileObject.progress_increment != undefined) {
+          var progress_increment_used =
+            progress_increment_applied == undefined ? 0 : progress_increment_applied;
+          progress_final =
+            fileObject.progress() +
+            (fileObject.progress_increment -
+              fileObject.progress_increment * 0.5 -
+              progress_increment_used);
         }
         fileObject.progress(progress_final);
       }
-      if(fileObject.success){
+      if (fileObject.success) {
         fileObject.success();
       }
     },
-    error: function(request, status, reason_phrase)
-    {
-      if(request.status == 409)
-      {
-        var progress_increment_used = progress_increment_applied == undefined ? 0 : progress_increment_applied;
+    error: function (request, status, reason_phrase) {
+      if (request.status == 409) {
+        var progress_increment_used =
+          progress_increment_applied == undefined ? 0 : progress_increment_applied;
         var progress_step = 10;
         var progress_final = 90;
-        if(fileObject.progress_final != undefined)
-        {
-          progress_final = fileObject.progress_final * .9;
-        }
-        else if(fileObject.progress_increment != undefined)
-        {
-          progress_final = fileObject.progress() + (fileObject.progress_increment * 0.4) - progress_increment_used;
+        if (fileObject.progress_final != undefined) {
+          progress_final = fileObject.progress_final * 0.9;
+        } else if (fileObject.progress_increment != undefined) {
+          progress_final =
+            fileObject.progress() + fileObject.progress_increment * 0.4 - progress_increment_used;
           progress_step = fileObject.progress_increment * 0.4 * 0.25;
         }
-        if(fileObject.progress && fileObject.progress() < progress_final)
-        {
+        if (fileObject.progress && fileObject.progress() < progress_final) {
           // Setting progress to 90%
           fileObject.progress(Math.min(progress_final, fileObject.progress() + progress_step));
         }
-        
 
-        window.setTimeout(deleteUpload.bind(null, pid, mid, uid, fileObject, progress_increment_used), 3000);
+        window.setTimeout(
+          deleteUpload.bind(null, pid, mid, uid, fileObject, progress_increment_used),
+          3000,
+        );
       }
-    }
+    },
   });
 }
 //return new file uploader
-export default module;
\ No newline at end of file
+export default module;
diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
index 994ad264f..8c47c03b8 100644
--- a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
@@ -3,16 +3,29 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { CCANavItem } from "./CCANavItem";
+import { useAppSelector } from "./wizard-store/hooks";
+import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
 
 export const CCAWizardNavItems = () => {
+  const tabName = useAppSelector(selectTab);
   return (
-      <ul className="nav nav-pills">
-        <CCANavItem key={'Locate Data'} name={'Locate Data'} active={true}/>
-        <CCANavItem key={'Upload Table'} name={'Upload Table'} hidden={true}/>
-        <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>
+    <ul className="nav nav-pills">
+      <CCANavItem
+        key={"Locate Data"}
+        name={"Locate Data"}
+        active={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
+      />
+      <CCANavItem
+        key={"Upload Table"}
+        name={"Upload Table"}
+        active={tabName === TabNames.CCA_LOCAL_BROWSER_TAB}
+        hidden={false}
+      />
+      {/* 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>
   );
 };
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index 12aa8b059..f35035e69 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -6,24 +6,34 @@ import { CCAModalContent } from "./CCAWizardContent";
 import { CCAWizardSteps } from "./CCAWizardSteps";
 import { useCCAWizardFooter } from "./CCAWizardUtils";
 import { useAppDispatch } from "./wizard-store/hooks";
-import { resetTabTracking } from "./wizard-store/reducers/tabTrackingSlice";
+import { resetCCAWizard, setPid } from "./wizard-store/reducers/cCAWizardSlice";
 
-export const CCAWizard = () => {
+interface CCAWizardParams {
+  pid: string;
+}
+
+export const CCAWizard = (params: CCAWizardParams) => {
+  const { pid } = params;
   const cCAWizardFooter = useCCAWizardFooter();
   const dispatch = useAppDispatch();
+
+  React.useEffect(() => {
+    dispatch(setPid(pid));
+   }, [dispatch, pid])
+  
   return (
-      <CCAModalContent
-        key={"slycat-wizard"}
-        // slycat-wizard is the standard wizard id from knockout
-        modalId={"slycat-wizard"}
-        closingCallBack={() => {
-          console.log("clean and delete model")
-          dispatch(resetTabTracking())
-        }}
-        title={"New CCA Model"}
-        footer={cCAWizardFooter}
-      >
-        <CCAWizardSteps key={"CCA Steps"} />
-      </CCAModalContent>
+    <CCAModalContent
+      key={"slycat-wizard"}
+      // slycat-wizard is the standard wizard id from knockout
+      modalId={"slycat-wizard"}
+      closingCallBack={() => {
+        console.log("clean and delete model");
+        dispatch(resetCCAWizard());
+      }}
+      title={"New CCA Model"}
+      footer={cCAWizardFooter}
+    >
+      <CCAWizardSteps key={"CCA Steps"} />
+    </CCAModalContent>
   );
-};
+};
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
index b0752241e..d0393364d 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
@@ -22,8 +22,8 @@ export const CCAModalContent = (props: React.PropsWithChildren<ModalContentProps
    */
   const handleCloseModal = React.useCallback(
     (e: React.MouseEvent): void => {
-      closingCallBack();
       ($("#" + modalId) as any).modal("hide");
+      closingCallBack();
     },
     [modalId, closingCallBack],
   );
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 548614a52..6bee1b62d 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -4,8 +4,9 @@
 import * as React from "react";
 import { CCAWizardDataSelectionTab } from "./wizard-tabs/CCADataWizardSelectionTab";
 import { CCAWizardNavItems } from "./CCANavItems";
-import { useAppSelector, useAppDispatch } from "./wizard-store/hooks";
-import { selectTab, TabNames } from "./wizard-store/reducers/tabTrackingSlice";
+import { useAppSelector } from "./wizard-store/hooks";
+import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
+import { CCALocalBrowserTab } from "./wizard-tabs/CCSLocalBrowserTab";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
@@ -14,8 +15,9 @@ export const CCAWizardSteps = () => {
     <div className="modal-body">
       <CCAWizardNavItems/>
       <div className="tab-content">
-        <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCADataWizardSelectionTab)}/>
-        <div hidden={!(tabName === TabNames.CCSLocalBrowserTab)}>
+        <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)}/>
+        <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)}/>
+        <div hidden={true}>
           <div
             className="alert alert-danger"
             role="alert"
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 72ec9518e..2bfd20e3e 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -2,23 +2,54 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
-import { useAppDispatch } from "./wizard-store/hooks";
-import { setTabName, TabNames } from "./wizard-store/reducers/tabTrackingSlice";
+import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import {
+  selectDataLocation,
+  selectTab,
+  setTabName,
+  TabNames,
+  uploadFile,
+} from "./wizard-store/reducers/cCAWizardSlice";
 
 export const useCCAWizardFooter = () => {
+  const tabName = useAppSelector(selectTab);
+  const dataLocation = useAppSelector(selectDataLocation);
   const dispatch = useAppDispatch();
+
+  /**
+   * handle continue operation
+   */
+  const handleContinue = React.useCallback(() => {
+    if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation) {
+      dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
+    }
+    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB) {
+      dispatch(uploadFile());
+    }
+  }, [dispatch, setTabName, tabName]);
+
+  /**
+   * handle back operation
+   */
+  const handleBack = React.useCallback(() => {
+    dispatch(setTabName(TabNames.CCA_DATA_WIZARD_SELECTION_TAB));
+  }, [dispatch, setTabName, tabName]);
+
   const backButton = (
-    <button key="back button" className="btn btn-light mr-auto" onClick={() => console.log("back")}>
+    <button
+      key="back button"
+      disabled={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
+      className="btn btn-light mr-auto"
+      onClick={handleBack}
+    >
       Back
     </button>
   );
+
   const nextButton = (
-    <button key="continue" className="btn btn-primary" onClick={() => {
-      console.log("click")
-      dispatch(setTabName(TabNames.CCSLocalBrowserTab))
-    }}>
+    <button key="continue" className="btn btn-primary" onClick={handleContinue}>
       Continue
     </button>
   );
-  return React.useMemo(() => [backButton, nextButton], []);
+  return React.useMemo(() => [backButton, nextButton], [tabName, dataLocation, 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
index a201f73c3..cd4f27bfc 100644
--- 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
@@ -4,28 +4,46 @@
 import * as React from "react";
 
 export const SlycatLocalBrowser = () => {
+
+      // var file = component.browser.selection()[0];
+      // let file_name = file.name;
+      // var fileObject = {
+      //   pid: component.project._id(),
+      //   mid: component.model._id(),
+      //   file: file,
+      //   aids: [["data-table"], file_name],
+      //   parser: component.parser(),
+      //   progress: component.browser.progress,
+      //   progress_status: component.browser.progress_status,
+      //   progress_final: 90,
+      //   success: function () {
+      //     upload_success(component.browser);
+      //   },
+      //   error: function () {
+      //     dialog.ajax_error(
+      //       "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
+      //     )();
+      //     $(".local-browser-continue").toggleClass("disabled", false);
+      //     component.browser.progress(null);
+      //     component.browser.progress_status("");
+      //   },
+      // };
+      // fileUploader.uploadFile(fileObject);
+
   return (
     <div className="form-group row">
-      <label className="col-sm-2 col-form-label" data-bind="css: {'disabled' : disabled}">
-        File
-      </label>
+      <label className="col-sm-2 col-form-label">File</label>
       <div className="col-sm-10">
-        <input
-          type="file"
-          className=""
-          id="slycat-local-browser-file"
-          placeholder="file"
-          data-bind="event:{change: selection_changed}, attr: {'disabled' : disabled, 'multiple' : multiple}"
-        ></input>
-        <div className="progress" data-bind="visible: progress() != undefined && progress() > 0">
+        <input type="file" className="" id="slycat-local-browser-file" placeholder="file"></input>
+        <div className="progress" style={{ visibility: "hidden" }}>
           <div
             className="progress-bar progress-bar-striped progress-bar-animated"
             role="progressbar"
             aria-valuemin={0}
             aria-valuemax={100}
             // data-bind="
-            //   attr: {'aria-valuenow' : progress},
-            style={{'width' : '0' + '%'}}
+            aria-valuenow={100}
+            style={{ width: "0" + "%" }}
             //   text: progress_status,"
           >
             Uploading
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
new file mode 100644
index 000000000..63832ec32
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx
@@ -0,0 +1,61 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../store";
+
+export enum TabNames {
+  CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
+  CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
+}
+export enum dataLocationType {
+  LOCAL = "local",
+  REMOTE = "remote",
+}
+export interface CCAWizardState {
+  tab: TabNames;
+  dataLocation: dataLocationType;
+  mid: string | undefined;
+  pid: string | undefined;
+}
+const initialState: CCAWizardState = {
+  tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
+  dataLocation: dataLocationType.LOCAL,
+  mid: undefined,
+  pid: undefined
+};
+export const cCAWizardSlice = createSlice({
+  name: "cCAWizard",
+  initialState,
+  reducers: {
+    setTabName: (state, action: PayloadAction<TabNames>) => {
+      state.tab = action.payload;
+    },
+    setDataLocation: (state, action: PayloadAction<dataLocationType>) => {
+      state.dataLocation = action.payload;
+    },
+    setMid: (state, action: PayloadAction<string>) => {
+      state.mid = action.payload;
+    },
+    setPid: (state, action: PayloadAction<string>) => {
+       // TODO: dispatch model creation if no MID present aka undefined
+      state.pid = action.payload;
+    },
+    uploadFile: (state) => {
+      console.log(`upload`);
+    },
+    resetCCAWizard: () => initialState,
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const {
+  setTabName,
+  setDataLocation,
+  setMid,
+  setPid,
+  uploadFile,
+  resetCCAWizard: resetCCAWizard,
+} = cCAWizardSlice.actions;
+// Other code such as selectors can use the imported `RootState` type
+export const selectTab = (state: RootState) => state.cCAWizard.tab;
+export const selectDataLocation = (state: RootState) => state.cCAWizard.dataLocation;
+
+export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx
deleted file mode 100644
index bee981632..000000000
--- a/web-server/plugins/slycat-cca/js/components/wizard-store/reducers/tabTrackingSlice.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { RootState } from '../store'
-
-export enum TabNames {
-    CCADataWizardSelectionTab = "CCADataWizardSelectionTab",
-    CCSLocalBrowserTab = "CCSLocalBrowserTab"
-}
-const initialState: {tab:TabNames} = {
-    tab: TabNames.CCADataWizardSelectionTab,
-  }
-export const tabTrackingSlice = createSlice({
-  name: 'tabTracking',
-  initialState,
-  reducers: {
-    setTabName: (state, action: PayloadAction<TabNames>) => {
-      console.log(action.payload)
-      state.tab = action.payload
-    },
-    resetTabTracking: () => initialState
-  },
-})
-
-// Action creators are generated for each case reducer function
-export const { setTabName, resetTabTracking } = tabTrackingSlice.actions
-// Other code such as selectors can use the imported `RootState` type
-export const selectTab = (state: RootState) => state.tabTracking.tab
-
-
-export default tabTrackingSlice.reducer
\ No newline at end of file
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
index d69145003..8fe350273 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
@@ -1,9 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit'
-import tabTrackingReducer from './reducers/tabTrackingSlice'
+import cCAWizardReducer from './reducers/cCAWizardSlice'
 const globalWindow = (window as any);
 export const cCAWizardStore = configureStore({
   reducer: {
-    tabTracking: tabTrackingReducer
+    cCAWizard: cCAWizardReducer
   },
 })
 
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
index 12f9593ed..4c355366f 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
@@ -2,9 +2,13 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import { dataLocationType, selectDataLocation, setDataLocation } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCAWizardDataSelectionTab = (props: {hidden?: boolean}) => {
   const { hidden = false } = props;
+  const dataLocation = useAppSelector(selectDataLocation)
+  const dispatch = useAppDispatch();
   return (
     <div hidden={hidden}>
       <div className="form-check" style={{ marginLeft: "15px" }}>
@@ -14,7 +18,8 @@ export const CCAWizardDataSelectionTab = (props: {hidden?: boolean}) => {
             name="local-or-remote-radios"
             id="local-radio"
             value="local"
-            data-bind="checked: cca_type"
+            onChange={React.useCallback(()=>{dispatch(setDataLocation(dataLocationType.LOCAL))},[dispatch])}
+            checked={dataLocation && dataLocation === dataLocationType.LOCAL}
           />
           Local
         </label>
@@ -26,7 +31,8 @@ export const CCAWizardDataSelectionTab = (props: {hidden?: boolean}) => {
             name="local-or-remote-radios"
             id="remote-radio"
             value="remote"
-            data-bind="checked: cca_type"
+            onChange={React.useCallback(()=>{dispatch(setDataLocation(dataLocationType.REMOTE))},[dispatch])}
+            checked={dataLocation && dataLocation === dataLocationType.REMOTE}
           />
           Remote
         </label>
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
index 6bef9172e..d198ad6d5 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
@@ -4,11 +4,11 @@
 import * as React from "react";
 import { SlycatLocalBrowser } from "../slycat-local-browser/SlycatLocalBrowser";
 
-export const CCALocalBrowserTab = (props: {hidden?: boolean}) => {
+export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   return (
     <div hidden={hidden}>
-        <SlycatLocalBrowser/>
+      <SlycatLocalBrowser />
     </div>
   );
 };
diff --git a/web-server/plugins/slycat-cca/js/new-ui.js b/web-server/plugins/slycat-cca/js/new-ui.js
index 49675397c..5824f60d2 100644
--- a/web-server/plugins/slycat-cca/js/new-ui.js
+++ b/web-server/plugins/slycat-cca/js/new-ui.js
@@ -162,7 +162,6 @@ function constructor(params) {
     component.show_local_browser_error(false);
     $(".local-browser-continue").toggleClass("disabled", true);
     
-    //TODO: add logic to the file uploader to look for multiple files list to add
     var file = component.browser.selection()[0];
     let file_name = file.name;
     var fileObject = {
diff --git a/web-server/plugins/slycat-cca/js/wizard-ui.js b/web-server/plugins/slycat-cca/js/wizard-ui.js
index bf32d4afc..e5b65a921 100644
--- a/web-server/plugins/slycat-cca/js/wizard-ui.js
+++ b/web-server/plugins/slycat-cca/js/wizard-ui.js
@@ -10,11 +10,11 @@ import { Provider } from 'react-redux'
 import { cCAWizardStore } from ".//components/wizard-store/store";
 
 function constructor(params) {
-  console.dir(params);
+  console.log(params.projects()[0]?._id());
   const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
   react_wizard_root.render(
     <Provider store={cCAWizardStore}>
-      <CCAWizard />
+      <CCAWizard pid={params.projects()[0]?._id()}/>
     </Provider>
 );
 
diff --git a/web-server/plugins/slycat-timeseries-model/js/wizard-ui.js b/web-server/plugins/slycat-timeseries-model/js/wizard-ui.js
index 945c5dd34..e481da5d5 100644
--- a/web-server/plugins/slycat-timeseries-model/js/wizard-ui.js
+++ b/web-server/plugins/slycat-timeseries-model/js/wizard-ui.js
@@ -10,12 +10,6 @@ import markings from "js/slycat-selectable-markings";
 import timeseriesWizardUI from "../wizard-ui.html";
 
 function constructor(params) {
-  // this is where we render react into the timeseries modal
-  // ReactDOM.render(
-  //   <TimeseriesWizard project={params.projects()[0]} markings={markings.preselected()} />,
-  //   document.querySelector(".react-wizard")
-  // );
-  // React 18 createRoot conversion breaks here 
   const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
   react_wizard_root.render(
     <TimeseriesWizard project={params.projects()[0]} markings={markings.preselected()} />

From 911d8c7426897b1bb25fad16907c902752aabfaa Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 4 Apr 2025 13:09:52 -0600
Subject: [PATCH 10/31] adding model creation and cleanup

---
 .../slycat-cca/js/components/CCAWizard.tsx    | 54 +++++++++++++++----
 .../wizard-store/reducers/cCAWizardSlice.tsx  |  2 +
 web-server/plugins/slycat-cca/js/wizard-ui.js |  7 +--
 3 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index f35035e69..acb542966 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -5,35 +5,69 @@ import * as React from "react";
 import { CCAModalContent } from "./CCAWizardContent";
 import { CCAWizardSteps } from "./CCAWizardSteps";
 import { useCCAWizardFooter } from "./CCAWizardUtils";
-import { useAppDispatch } from "./wizard-store/hooks";
-import { resetCCAWizard, setPid } from "./wizard-store/reducers/cCAWizardSlice";
+import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import {
+  resetCCAWizard,
+  selectMid,
+  selectPid,
+  setMid,
+  setPid,
+} from "./wizard-store/reducers/cCAWizardSlice";
+import client from "js/slycat-web-client";
 
 interface CCAWizardParams {
   pid: string;
+  marking?: string;
 }
 
 export const CCAWizard = (params: CCAWizardParams) => {
-  const { pid } = params;
+  const { pid, marking } = params;
+  const [modalOpen, setModalOpen] = React.useState(true);
   const cCAWizardFooter = useCCAWizardFooter();
   const dispatch = useAppDispatch();
+  const statePid = useAppSelector(selectPid);
+  const stateMid = useAppSelector(selectMid);
 
   React.useEffect(() => {
-    dispatch(setPid(pid));
-   }, [dispatch, pid])
-  
+    console.log("statePid, pid, selectMid", statePid, pid, stateMid);
+    if (modalOpen) {
+      if (!statePid) {
+        dispatch(setPid(pid));
+      }
+      if (!stateMid && statePid) {
+        // create the model on open so we have something to reference later
+        client
+          .post_project_models_fetch({
+            pid: statePid,
+            type: "cca",
+            name: "",
+            description: "",
+            marking: marking ?? "",
+          })
+          .then((result) => {
+            dispatch(setMid(result.id));
+          });
+      }
+    }
+  }, [dispatch, pid, statePid, stateMid]);
+
   return (
     <CCAModalContent
       key={"slycat-wizard"}
       // slycat-wizard is the standard wizard id from knockout
       modalId={"slycat-wizard"}
-      closingCallBack={() => {
-        console.log("clean and delete model");
+      closingCallBack={React.useCallback(() => {
+        setModalOpen(false);
+        if (stateMid) {
+          console.log("delete");
+          client.delete_model_fetch({ mid: stateMid });
+        }
         dispatch(resetCCAWizard());
-      }}
+      }, [stateMid])}
       title={"New CCA Model"}
       footer={cCAWizardFooter}
     >
       <CCAWizardSteps key={"CCA Steps"} />
     </CCAModalContent>
   );
-};
\ No newline at end of file
+};
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
index 63832ec32..52cae697a 100644
--- 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
@@ -57,5 +57,7 @@ export const {
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
 export const selectDataLocation = (state: RootState) => state.cCAWizard.dataLocation;
+export const selectPid = (state: RootState) => state.cCAWizard.pid;
+export const selectMid = (state: RootState) => state.cCAWizard.mid;
 
 export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/wizard-ui.js b/web-server/plugins/slycat-cca/js/wizard-ui.js
index e5b65a921..e30f78bce 100644
--- a/web-server/plugins/slycat-cca/js/wizard-ui.js
+++ b/web-server/plugins/slycat-cca/js/wizard-ui.js
@@ -8,18 +8,15 @@ import { CCAWizard } from ".//components/CCAWizard.tsx";
 import ccaWizardUI from "../wizard-ui.html";
 import { Provider } from 'react-redux'
 import { cCAWizardStore } from ".//components/wizard-store/store";
+import markings from "js/slycat-selectable-markings";
 
 function constructor(params) {
-  console.log(params.projects()[0]?._id());
   const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
   react_wizard_root.render(
     <Provider store={cCAWizardStore}>
-      <CCAWizard pid={params.projects()[0]?._id()}/>
+      <CCAWizard pid={params.projects()[0]?._id()} marking={markings.preselected()}/>
     </Provider>
 );
-
-  // return an empty component since we are just using it to render react
-  return {};
 }
 
 export default {

From 58e93033409d3a611ab1199f9ba48a94aa87e141 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 4 Apr 2025 16:58:12 -0600
Subject: [PATCH 11/31] cleanup logic for wizard setup

---
 .../slycat-cca/js/components/CCAWizard.tsx    | 44 +++----------
 .../js/components/CCAWizardUtils.tsx          | 61 +++++++++++++++++++
 2 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index acb542966..e912c3653 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -4,16 +4,13 @@
 import * as React from "react";
 import { CCAModalContent } from "./CCAWizardContent";
 import { CCAWizardSteps } from "./CCAWizardSteps";
-import { useCCAWizardFooter } from "./CCAWizardUtils";
-import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
 import {
-  resetCCAWizard,
-  selectMid,
-  selectPid,
-  setMid,
-  setPid,
-} from "./wizard-store/reducers/cCAWizardSlice";
-import client from "js/slycat-web-client";
+  useCCAWizardFooter,
+  useHandleClosingCallback,
+  useHandleWizardSetup,
+} from "./CCAWizardUtils";
+import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import { selectMid, selectPid } from "./wizard-store/reducers/cCAWizardSlice";
 
 interface CCAWizardParams {
   pid: string;
@@ -27,27 +24,13 @@ export const CCAWizard = (params: CCAWizardParams) => {
   const dispatch = useAppDispatch();
   const statePid = useAppSelector(selectPid);
   const stateMid = useAppSelector(selectMid);
+  const handleClosingCallback = useHandleClosingCallback(setModalOpen, stateMid);
+  const handleWizardSetup = useHandleWizardSetup(pid, statePid, stateMid, marking);
 
   React.useEffect(() => {
     console.log("statePid, pid, selectMid", statePid, pid, stateMid);
     if (modalOpen) {
-      if (!statePid) {
-        dispatch(setPid(pid));
-      }
-      if (!stateMid && statePid) {
-        // create the model on open so we have something to reference later
-        client
-          .post_project_models_fetch({
-            pid: statePid,
-            type: "cca",
-            name: "",
-            description: "",
-            marking: marking ?? "",
-          })
-          .then((result) => {
-            dispatch(setMid(result.id));
-          });
-      }
+      handleWizardSetup()
     }
   }, [dispatch, pid, statePid, stateMid]);
 
@@ -56,14 +39,7 @@ export const CCAWizard = (params: CCAWizardParams) => {
       key={"slycat-wizard"}
       // slycat-wizard is the standard wizard id from knockout
       modalId={"slycat-wizard"}
-      closingCallBack={React.useCallback(() => {
-        setModalOpen(false);
-        if (stateMid) {
-          console.log("delete");
-          client.delete_model_fetch({ mid: stateMid });
-        }
-        dispatch(resetCCAWizard());
-      }, [stateMid])}
+      closingCallBack={handleClosingCallback}
       title={"New CCA Model"}
       footer={cCAWizardFooter}
     >
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 2bfd20e3e..7bbd20a46 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -4,12 +4,16 @@
 import * as React from "react";
 import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
 import {
+  resetCCAWizard,
   selectDataLocation,
   selectTab,
+  setMid,
+  setPid,
   setTabName,
   TabNames,
   uploadFile,
 } from "./wizard-store/reducers/cCAWizardSlice";
+import client from "js/slycat-web-client";
 
 export const useCCAWizardFooter = () => {
   const tabName = useAppSelector(selectTab);
@@ -53,3 +57,60 @@ export const useCCAWizardFooter = () => {
   );
   return React.useMemo(() => [backButton, nextButton], [tabName, dataLocation, dispatch]);
 };
+
+/**
+ * Function to handle setup for creating a cca model in the model wizard modal
+ * @param pid project id
+ * @param statePid redux project id
+ * @param stateMid redux model id
+ * @param marking initial marking for the model
+ * @returns memoized () => void
+ */
+export const useHandleWizardSetup = (
+  pid: string,
+  statePid: string | undefined,
+  stateMid: string | undefined,
+  marking: string | undefined,
+) => {
+  const dispatch = useAppDispatch();
+  return React.useCallback(() => {
+    if (!statePid) {
+      dispatch(setPid(pid));
+    }
+    if (!stateMid && statePid) {
+      // create the model on open so we have something to reference later
+      client
+        .post_project_models_fetch({
+          pid: statePid,
+          type: "cca",
+          name: "",
+          description: "",
+          marking: marking ?? "",
+        })
+        .then((result) => {
+          dispatch(setMid(result.id));
+        });
+    }
+  }, [pid, statePid, stateMid, marking]);
+};
+
+/**
+ * Handle the cleanup for closing the cca wizard modal
+ * @param setModalOpen function for setting local state for if the wizard is open
+ * @param stateMid redux model id
+ * @returns memoized () => void
+ */
+export const useHandleClosingCallback = (
+  setModalOpen: (value: React.SetStateAction<boolean>) => void,
+  stateMid: string | undefined,
+) => {
+  const dispatch = useAppDispatch();
+  return React.useCallback(() => {
+    setModalOpen(false);
+    if (stateMid) {
+      console.log("delete");
+      client.delete_model_fetch({ mid: stateMid });
+    }
+    dispatch(resetCCAWizard());
+  }, [stateMid, setModalOpen]);
+};

From c4fd7c445516bcee1a6ed5d0127d8b722be33dc0 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Mon, 7 Apr 2025 08:47:14 -0600
Subject: [PATCH 12/31] adding file uploader

---
 web-server/js/slycat-file-uploader-factory.js |  2 +-
 .../js/components/CCAWizardUtils.tsx          | 49 +++++++++++++++
 .../SlycatLocalBrowser.tsx                    | 63 +++++++++----------
 .../SlycatParserControls.tsx                  | 24 +++++++
 4 files changed, 105 insertions(+), 33 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/slycat-parser-controls/SlycatParserControls.tsx

diff --git a/web-server/js/slycat-file-uploader-factory.js b/web-server/js/slycat-file-uploader-factory.js
index dff4ef42f..4bf80227d 100644
--- a/web-server/js/slycat-file-uploader-factory.js
+++ b/web-server/js/slycat-file-uploader-factory.js
@@ -24,7 +24,7 @@ module.MEGABYTE = 10000000; //the number of bytes we will split large files on
  *      success: function called if upload is successful
  *    }
  */
-module.uploadFile = function (fileObject, useProjectData) {
+module.uploadFile = function (fileObject, useProjectData = false) {
   if (fileObject.hostname && fileObject.paths) {
     // console.log("creating remote file upload session");
     client.post_uploads({
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 7bbd20a46..11a74eb08 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -6,6 +6,8 @@ import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
 import {
   resetCCAWizard,
   selectDataLocation,
+  selectMid,
+  selectPid,
   selectTab,
   setMid,
   setPid,
@@ -14,6 +16,8 @@ import {
   uploadFile,
 } from "./wizard-store/reducers/cCAWizardSlice";
 import client from "js/slycat-web-client";
+import fileUploader from "js/slycat-file-uploader-factory";
+import * as dialog from "js/slycat-dialog";
 
 export const useCCAWizardFooter = () => {
   const tabName = useAppSelector(selectTab);
@@ -114,3 +118,48 @@ export const useHandleClosingCallback = (
     dispatch(resetCCAWizard());
   }, [stateMid, setModalOpen]);
 };
+
+/**
+ * handle file submission
+ */
+export const useHandleSubmit = ():[(file: File) => void, number, string] => {
+  const mid = useAppSelector(selectMid);
+  const pid = useAppSelector(selectPid);
+  const [progress, setProgress] = React.useState<number>(0);
+  const [progressStatus, setProgressStatus] = React.useState("");
+  const handleSubmit = React.useCallback(
+    (file: File) => {
+      const progressCallback = (input?: number) => {
+        if (!input) {
+          return progress;
+        }
+        setProgress(input);
+      };
+      const fileObject = {
+        pid,
+        mid,
+        file: file,
+        aids: [["data-table"], file?.name],
+        // parser: component.parser(),
+        progress: progress,
+        progress_status: progressCallback,
+        progress_final: 90,
+        success: function () {
+          // set browser tab
+        },
+        error: function () {
+          dialog.ajax_error(
+            "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
+          )();
+          // TODO: toggle disabled for continue
+          setProgress(0);
+          setProgressStatus("");
+        },
+      };
+      fileUploader.uploadFile(fileObject);
+    },
+    [mid, pid, progress, setProgress, setProgressStatus],
+  );
+
+  return [handleSubmit, progress, progressStatus];
+};
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
index cd4f27bfc..91a6bc0d5 100644
--- 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
@@ -2,53 +2,52 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
+import { useHandleSubmit } from "../CCAWizardUtils";
+import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 
 export const SlycatLocalBrowser = () => {
-
-      // var file = component.browser.selection()[0];
-      // let file_name = file.name;
-      // var fileObject = {
-      //   pid: component.project._id(),
-      //   mid: component.model._id(),
-      //   file: file,
-      //   aids: [["data-table"], file_name],
-      //   parser: component.parser(),
-      //   progress: component.browser.progress,
-      //   progress_status: component.browser.progress_status,
-      //   progress_final: 90,
-      //   success: function () {
-      //     upload_success(component.browser);
-      //   },
-      //   error: function () {
-      //     dialog.ajax_error(
-      //       "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
-      //     )();
-      //     $(".local-browser-continue").toggleClass("disabled", false);
-      //     component.browser.progress(null);
-      //     component.browser.progress_status("");
-      //   },
-      // };
-      // fileUploader.uploadFile(fileObject);
-
+  const [file, setFile] = React.useState<File | undefined>(undefined);
+  const [handleSubmit, progress, progressStatus] = useHandleSubmit();
+  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files !== null && e.target.files.length >= 1) {
+      setFile(e.target.files[0]);
+    }
+  };
   return (
     <div className="form-group row">
       <label className="col-sm-2 col-form-label">File</label>
       <div className="col-sm-10">
-        <input type="file" className="" id="slycat-local-browser-file" placeholder="file"></input>
-        <div className="progress" style={{ visibility: "hidden" }}>
+        <input
+          type="file"
+          onChange={handleFileSelected}
+          className=""
+          id="slycat-local-browser-file"
+          placeholder="file"
+        ></input>
+        <div className="progress" style={{ visibility: progress > 0 ? undefined : "hidden" }}>
           <div
             className="progress-bar progress-bar-striped progress-bar-animated"
             role="progressbar"
             aria-valuemin={0}
             aria-valuemax={100}
-            // data-bind="
             aria-valuenow={100}
-            style={{ width: "0" + "%" }}
-            //   text: progress_status,"
+            style={{ width: progress?.toString() + "%" }}
           >
-            Uploading
+            {progressStatus}
           </div>
         </div>
+        <SlycatParserControls/>
+        <button
+          key="Upload File To Server"
+          className="btn btn-primary"
+          onClick={React.useCallback(() => {
+            if (file) {
+              handleSubmit(file);
+            }
+          }, [file, handleSubmit])}
+        >
+          Upload File
+        </button>
       </div>
     </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
new file mode 100644
index 000000000..4af6a80d2
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/slycat-parser-controls/SlycatParserControls.tsx
@@ -0,0 +1,24 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import parsers from "js/slycat-parsers";
+import _ from "lodash";
+
+export const SlycatParserControls = () => {
+  const filteredParsers = parsers
+    .available()
+    ?.filter((parser: { categories: () => string }) => _.includes(parser.categories(), "table"));
+  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" >
+          {filteredParsers.map((parser: { type: () => string }) => {
+            return <option>{parser.type()}</option>;
+          })}
+        </select>
+      </div>
+    </div>
+  );
+};

From e6b368580525ead7b6db523667b722b47bc168bb Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Tue, 22 Apr 2025 12:18:50 -0600
Subject: [PATCH 13/31] add upload status and completion to local browser

---
 .../slycat-web-server/DockerFile              |  1 +
 docker/compose/slycat-compose/sshd/DockerFile |  4 +-
 .../slycat-cca/js/components/CCAWizard.tsx    |  4 +-
 .../js/components/CCAWizardSteps.tsx          | 17 -----
 .../js/components/CCAWizardUtils.tsx          | 72 ++++++++++++++++---
 .../SlycatLocalBrowser.tsx                    | 37 ++++++----
 .../SlycatParserControls.tsx                  | 18 +++--
 .../wizard-store/reducers/cCAWizardSlice.tsx  | 15 ++--
 .../wizard-tabs/CCSLocalBrowserTab.tsx        |  7 +-
 9 files changed, 116 insertions(+), 59 deletions(-)

diff --git a/docker/compose/slycat-compose/slycat-web-server/DockerFile b/docker/compose/slycat-compose/slycat-web-server/DockerFile
index aea038eb9..289a88d3e 100644
--- a/docker/compose/slycat-compose/slycat-web-server/DockerFile
+++ b/docker/compose/slycat-compose/slycat-web-server/DockerFile
@@ -10,6 +10,7 @@ RUN pip install --trusted-host files.pythonhosted.org --trusted-host pypi.org --
 RUN pip install --trusted-host files.pythonhosted.org --trusted-host pypi.org --trusted-host pypi.python.org --no-cache-dir -r requirements.txt
 
 RUN git config --global http.sslVerify false
+RUN git config --global http.postBuffer 524288000
 RUN git clone --depth 1 https://github.com/sandialabs/slycat.git
 RUN mkdir -p /var/lib/slycat/data-store
 WORKDIR /usr/src/slycat/slycat
diff --git a/docker/compose/slycat-compose/sshd/DockerFile b/docker/compose/slycat-compose/sshd/DockerFile
index 1ef3daa9b..533eceaf6 100644
--- a/docker/compose/slycat-compose/sshd/DockerFile
+++ b/docker/compose/slycat-compose/sshd/DockerFile
@@ -4,8 +4,8 @@ LABEL maintainer="Matthew Letter <mletter@sandia.gov>"
 
 ENV DEBIAN_FRONTEND noninteractive
 
-RUN apt-get update && \
-    apt-get --yes install openssh-server rsync git && \
+RUN apt-get update
+RUN apt-get --yes install openssh-server rsync git && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/* && \
     mkdir -vp /var/run/sshd && \
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index e912c3653..c099b9340 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -21,18 +21,16 @@ export const CCAWizard = (params: CCAWizardParams) => {
   const { pid, marking } = params;
   const [modalOpen, setModalOpen] = React.useState(true);
   const cCAWizardFooter = useCCAWizardFooter();
-  const dispatch = useAppDispatch();
   const statePid = useAppSelector(selectPid);
   const stateMid = useAppSelector(selectMid);
   const handleClosingCallback = useHandleClosingCallback(setModalOpen, stateMid);
   const handleWizardSetup = useHandleWizardSetup(pid, statePid, stateMid, marking);
 
   React.useEffect(() => {
-    console.log("statePid, pid, selectMid", statePid, pid, stateMid);
     if (modalOpen) {
       handleWizardSetup()
     }
-  }, [dispatch, pid, statePid, stateMid]);
+  }, [pid, statePid, stateMid]);
 
   return (
     <CCAModalContent
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 6bee1b62d..b3eae1ec0 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -17,23 +17,6 @@ export const CCAWizardSteps = () => {
       <div className="tab-content">
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)}/>
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)}/>
-        <div hidden={true}>
-          <div
-            className="alert alert-danger"
-            role="alert"
-            data-bind="visible:show_local_browser_error()"
-          >
-            You must selected a file before continuing.
-          </div>
-          {/* <slycat-local-browser
-              params="
-              selection:browser.selection,
-              progress:browser.progress,
-              progress_status:browser.progress_status"
-            ></slycat-local-browser>
-            <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
-        </div>
-
         <div hidden={true}>
           <form role="form">
             {/* <slycat-remote-controls
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 11a74eb08..ab84c1678 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -6,22 +6,28 @@ import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
 import {
   resetCCAWizard,
   selectDataLocation,
+  selectFileUploaded,
   selectMid,
   selectPid,
   selectTab,
+  setFileUploaded,
   setMid,
   setPid,
   setTabName,
   TabNames,
-  uploadFile,
 } from "./wizard-store/reducers/cCAWizardSlice";
 import client from "js/slycat-web-client";
 import fileUploader from "js/slycat-file-uploader-factory";
 import * as dialog from "js/slycat-dialog";
 
+/**
+ * A hook for controlling how the back and continue buttons work based on the current redux state
+ * @returns the back button and continue button jsx
+ */
 export const useCCAWizardFooter = () => {
   const tabName = useAppSelector(selectTab);
   const dataLocation = useAppSelector(selectDataLocation);
+  const fileUploaded = useAppSelector(selectFileUploaded);
   const dispatch = useAppDispatch();
 
   /**
@@ -31,8 +37,8 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation) {
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
-    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB) {
-      dispatch(uploadFile());
+    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
+      dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
   }, [dispatch, setTabName, tabName]);
 
@@ -55,11 +61,16 @@ export const useCCAWizardFooter = () => {
   );
 
   const nextButton = (
-    <button key="continue" className="btn btn-primary" onClick={handleContinue}>
-      Continue
+    <button
+      key="continue"
+      className="btn btn-primary"
+      onClick={handleContinue}
+      disabled={tabName === TabNames.CCA_LOCAL_BROWSER_TAB && !fileUploaded}
+    >
+      Continue {fileUploaded.toString()}
     </button>
   );
-  return React.useMemo(() => [backButton, nextButton], [tabName, dataLocation, dispatch]);
+  return React.useMemo(() => [backButton, nextButton], [fileUploaded, tabName, dataLocation, dispatch]);
 };
 
 /**
@@ -122,32 +133,47 @@ export const useHandleClosingCallback = (
 /**
  * handle file submission
  */
-export const useHandleSubmit = ():[(file: File) => void, number, string] => {
+export const useHandleLocalFileSubmit = (): [
+  (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => void,
+  number,
+  string,
+] => {
   const mid = useAppSelector(selectMid);
   const pid = useAppSelector(selectPid);
   const [progress, setProgress] = React.useState<number>(0);
   const [progressStatus, setProgressStatus] = React.useState("");
   const handleSubmit = React.useCallback(
-    (file: File) => {
+    (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => {
       const progressCallback = (input?: number) => {
         if (!input) {
           return progress;
         }
         setProgress(input);
       };
+      const progressStatusCallback = (input?: string) => {
+        if (!input) {
+          return progressStatus;
+        }
+        setProgressStatus(input);
+      };
       const fileObject = {
         pid,
         mid,
         file: file,
+        parser: parser,
         aids: [["data-table"], file?.name],
         // parser: component.parser(),
-        progress: progress,
-        progress_status: progressCallback,
+        progress: progressCallback,
+        progress_status: progressStatusCallback,
         progress_final: 90,
         success: function () {
-          // set browser tab
+          console.log("uploaded");
+          setProgress(100);
+          setProgressStatus("File upload complete");
+          setUploadStatus(true);
         },
         error: function () {
+          setUploadStatus(false);
           dialog.ajax_error(
             "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
           )();
@@ -163,3 +189,27 @@ export const useHandleSubmit = ():[(file: File) => void, number, string] => {
 
   return [handleSubmit, progress, progressStatus];
 };
+
+/**
+ * Returns a function that sets the callback "setParser" value to the selected parser
+ */
+export const handleParserChange = (
+  setParser: React.Dispatch<React.SetStateAction<string | undefined>>,
+) =>
+  React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      setParser(e?.target?.value ?? undefined);
+    },
+    [setParser],
+  );
+
+export const useSetUploadStatus = () => {
+  const dispatch = useAppDispatch();
+  return React.useCallback(
+    (status: boolean) => {
+      console.log("dispatching", status);
+      dispatch(setFileUploaded(status));
+    },
+    [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
index 91a6bc0d5..3b946a26b 100644
--- 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
@@ -2,12 +2,14 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
-import { useHandleSubmit } from "../CCAWizardUtils";
+import { useHandleLocalFileSubmit } from "../CCAWizardUtils";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 
-export const SlycatLocalBrowser = () => {
+export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) => void, disabled?: boolean }) => {
+  const { setUploadStatus, disabled } = props;
   const [file, setFile] = React.useState<File | undefined>(undefined);
-  const [handleSubmit, progress, progressStatus] = useHandleSubmit();
+  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) {
       setFile(e.target.files[0]);
@@ -24,6 +26,23 @@ export const SlycatLocalBrowser = () => {
           id="slycat-local-browser-file"
           placeholder="file"
         ></input>
+        <SlycatParserControls setParser={setParser} />
+        <button
+          key="Upload File To Server"
+          disabled={disabled ?? false }
+          style={{visibility: progress<=0? 'visible': 'hidden'}}
+          className="btn btn-primary"
+          data-toggle="tooltip"
+          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
+        </button>
         <div className="progress" style={{ visibility: progress > 0 ? undefined : "hidden" }}>
           <div
             className="progress-bar progress-bar-striped progress-bar-animated"
@@ -36,18 +55,6 @@ export const SlycatLocalBrowser = () => {
             {progressStatus}
           </div>
         </div>
-        <SlycatParserControls/>
-        <button
-          key="Upload File To Server"
-          className="btn btn-primary"
-          onClick={React.useCallback(() => {
-            if (file) {
-              handleSubmit(file);
-            }
-          }, [file, handleSubmit])}
-        >
-          Upload File
-        </button>
       </div>
     </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
index 4af6a80d2..4783bad41 100644
--- 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
@@ -4,18 +4,28 @@
 import * as React from "react";
 import parsers from "js/slycat-parsers";
 import _ from "lodash";
+import { handleParserChange } from "../CCAWizardUtils";
 
-export const SlycatParserControls = () => {
-  const filteredParsers = parsers
+export const SlycatParserControls = (props: {
+  setParser: React.Dispatch<React.SetStateAction<string | undefined>>;
+}) => {
+  const { setParser } = props;
+  const filteredParsers: [{ type: () => string }] = parsers
     .available()
     ?.filter((parser: { categories: () => string }) => _.includes(parser.categories(), "table"));
+  React.useEffect(() => {
+    if (filteredParsers !== undefined && filteredParsers.length > 0) {
+      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" >
+        <select id="slycat-model-parser" className="form-control" onChange={handleParserChange(setParser)}>
           {filteredParsers.map((parser: { type: () => string }) => {
-            return <option>{parser.type()}</option>;
+            return <option key={parser.type()}>{parser.type()}</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
index 52cae697a..56b9a7537 100644
--- 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
@@ -14,12 +14,14 @@ export interface CCAWizardState {
   dataLocation: dataLocationType;
   mid: string | undefined;
   pid: string | undefined;
+  fileUploaded: boolean;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
   dataLocation: dataLocationType.LOCAL,
   mid: undefined,
-  pid: undefined
+  pid: undefined,
+  fileUploaded: false
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -35,12 +37,12 @@ export const cCAWizardSlice = createSlice({
       state.mid = action.payload;
     },
     setPid: (state, action: PayloadAction<string>) => {
-       // TODO: dispatch model creation if no MID present aka undefined
       state.pid = action.payload;
     },
-    uploadFile: (state) => {
-      console.log(`upload`);
-    },
+    setFileUploaded:(state, action: PayloadAction<boolean>) => {
+      console.log("dispatching action.payload", action.payload)
+     state.fileUploaded = action.payload;
+   },
     resetCCAWizard: () => initialState,
   },
 });
@@ -51,12 +53,13 @@ export const {
   setDataLocation,
   setMid,
   setPid,
-  uploadFile,
   resetCCAWizard: resetCCAWizard,
+  setFileUploaded
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
 export const selectDataLocation = (state: RootState) => state.cCAWizard.dataLocation;
+export const selectFileUploaded= (state: RootState) => state.cCAWizard.fileUploaded;
 export const selectPid = (state: RootState) => state.cCAWizard.pid;
 export const selectMid = (state: RootState) => state.cCAWizard.mid;
 
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
index d198ad6d5..ba4fd23c5 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
@@ -3,12 +3,17 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { SlycatLocalBrowser } from "../slycat-local-browser/SlycatLocalBrowser";
+import { useSetUploadStatus } from "../CCAWizardUtils";
+import { useAppSelector } from "../wizard-store/hooks";
+import { selectFileUploaded } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
+  const fileUploaded = useAppSelector(selectFileUploaded);
+  const setUploadStatus = useSetUploadStatus();
   return (
     <div hidden={hidden}>
-      <SlycatLocalBrowser />
+      <SlycatLocalBrowser disabled={fileUploaded} setUploadStatus={setUploadStatus}/>
     </div>
   );
 };

From 7a8b5fc461d48d43c378286ade6a1eed2be49dfc Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Tue, 22 Apr 2025 13:36:30 -0600
Subject: [PATCH 14/31] adding logic for back and continue after file selection

---
 .../slycat-cca/js/components/CCAWizardSteps.tsx  |  2 +-
 .../slycat-cca/js/components/CCAWizardUtils.tsx  | 16 ++++++++++++----
 .../wizard-store/reducers/cCAWizardSlice.tsx     |  1 +
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index b3eae1ec0..20ea486c2 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -54,7 +54,7 @@ export const CCAWizardSteps = () => {
           </div>
         </div>
 
-        <div hidden={true}>
+        <div hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)}>
           {/* <slycat-table-ingestion
               params="
               variables: attributes,
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index ab84c1678..def326ac2 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -38,21 +38,29 @@ export const useCCAWizardFooter = () => {
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
-      dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
+      dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
     }
-  }, [dispatch, setTabName, tabName]);
+    if (tabName === TabNames.CCA_TABLE_INGESTION) {
+      dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
+    }
+  }, [dispatch, fileUploaded, setTabName, tabName]);
 
   /**
    * handle back operation
    */
   const handleBack = React.useCallback(() => {
-    dispatch(setTabName(TabNames.CCA_DATA_WIZARD_SELECTION_TAB));
+    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB) {
+      dispatch(setTabName(TabNames.CCA_DATA_WIZARD_SELECTION_TAB));
+    }
+    if (tabName === TabNames.CCA_TABLE_INGESTION) {
+      dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
+    }
   }, [dispatch, setTabName, tabName]);
 
   const backButton = (
     <button
       key="back button"
-      disabled={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
+      style={{visibility: tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ? "hidden": "visible"}}
       className="btn btn-light mr-auto"
       onClick={handleBack}
     >
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
index 56b9a7537..945508648 100644
--- 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
@@ -4,6 +4,7 @@ import { RootState } from "../store";
 export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
+  CCA_TABLE_INGESTION = "CCATableIngestion"
 }
 export enum dataLocationType {
   LOCAL = "local",

From fd941198b46aeb3102253f8e6dac16b104cedd44 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 15 May 2025 17:38:40 -0600
Subject: [PATCH 15/31] adding table ingestion

---
 web-server/js/slycat-table-ingestion-react.js |   5 +
 .../slycat-cca/js/components/CCAWizard.tsx    |   2 +-
 .../js/components/CCAWizardSteps.tsx          |  29 +----
 .../js/components/CCAWizardUtils.tsx          | 109 +++++++++++++++++-
 .../SlycatLocalBrowser.tsx                    |  14 ++-
 .../SlycatParserControls.tsx                  |  22 ++--
 .../wizard-store/reducers/cCAWizardSlice.tsx  |  34 ++++--
 .../wizard-tabs/CCATableIngestion.tsx         |  45 ++++++++
 .../wizard-tabs/CCSLocalBrowserTab.tsx        |   2 +-
 9 files changed, 213 insertions(+), 49 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx

diff --git a/web-server/js/slycat-table-ingestion-react.js b/web-server/js/slycat-table-ingestion-react.js
index 2fdc617d1..46b0ce6a5 100644
--- 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
index c099b9340..ef343f649 100644
--- 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
index 20ea486c2..26815b2a6 100644
--- 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
index def326ac2..fa7bace98 100644
--- 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
index 3b946a26b..f4d41af72 100644
--- 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,11 +31,11 @@ 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) {
@@ -41,7 +43,7 @@ export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) =
             }
           }, [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
index 4783bad41..3fc681d78 100644
--- 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,19 +3,19 @@
  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]);
@@ -23,9 +23,17 @@ export const SlycatParserControls = (props: {
     <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
index 945508648..94d805a80 100644
--- 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
@@ -4,25 +4,39 @@ import { RootState } from "../store";
 export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
-  CCA_TABLE_INGESTION = "CCATableIngestion"
+  CCA_TABLE_INGESTION = "CCATableIngestion",
 }
 export enum dataLocationType {
   LOCAL = "local",
   REMOTE = "remote",
 }
+export interface Attribute {
+  index: number;
+  "Axis Type": string;
+  name: string;
+  type: string;
+  constant: boolean;
+  disabled: boolean;
+  hidden: boolean;
+  selected: boolean;
+  lastSelected: boolean;
+  tooltip: string;
+}
 export interface CCAWizardState {
   tab: TabNames;
   dataLocation: dataLocationType;
   mid: string | undefined;
   pid: string | undefined;
   fileUploaded: boolean;
+  attributes: Attribute[];
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
   dataLocation: dataLocationType.LOCAL,
   mid: undefined,
   pid: undefined,
-  fileUploaded: false
+  fileUploaded: false,
+  attributes: [],
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -40,10 +54,12 @@ export const cCAWizardSlice = createSlice({
     setPid: (state, action: PayloadAction<string>) => {
       state.pid = action.payload;
     },
-    setFileUploaded:(state, action: PayloadAction<boolean>) => {
-      console.log("dispatching action.payload", action.payload)
-     state.fileUploaded = action.payload;
-   },
+    setFileUploaded: (state, action: PayloadAction<boolean>) => {
+      state.fileUploaded = action.payload;
+    },
+    setAttributes: (state, action: PayloadAction<Attribute[]>) => {
+      state.attributes = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -55,13 +71,15 @@ export const {
   setMid,
   setPid,
   resetCCAWizard: resetCCAWizard,
-  setFileUploaded
+  setFileUploaded,
+  setAttributes,
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
 export const selectDataLocation = (state: RootState) => state.cCAWizard.dataLocation;
-export const selectFileUploaded= (state: RootState) => state.cCAWizard.fileUploaded;
+export const selectFileUploaded = (state: RootState) => state.cCAWizard.fileUploaded;
 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 default cCAWizardSlice.reducer;
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
new file mode 100644
index 000000000..3cd316083
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx
@@ -0,0 +1,45 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import SlycatTableIngestion from "js/slycat-table-ingestion-react";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import { selectAttributes } from "../wizard-store/reducers/cCAWizardSlice";
+import { useHandleTableIngestionOnChange } from "../CCAWizardUtils";
+
+export const CCATableIngestion = (props: { hidden?: boolean }) => {
+  const { hidden = false } = props;
+  const attributes = useAppSelector(selectAttributes);
+  const handleTableIngestionOnChange = useHandleTableIngestionOnChange(attributes);
+  let axes_properties = [
+    {
+      name: "Axis Type",
+      type: "select",
+      values: ["Input", "Output", "Neither"],
+      disabledValues: {
+        Log: [],
+      },
+    },
+  ];
+  return (
+    <div hidden={hidden}>
+      test
+      <SlycatTableIngestion
+        uniqueID="varOptions"
+        variables={attributes}
+        properties={axes_properties}
+        onChange={handleTableIngestionOnChange}
+        onBatchChange={handleTableIngestionOnChange}
+      />
+      <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>
+  );
+};
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
index ba4fd23c5..9f0d7f571 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
@@ -13,7 +13,7 @@ export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const setUploadStatus = useSetUploadStatus();
   return (
     <div hidden={hidden}>
-      <SlycatLocalBrowser disabled={fileUploaded} setUploadStatus={setUploadStatus}/>
+      <SlycatLocalBrowser setUploadStatus={setUploadStatus} />
     </div>
   );
 };

From d12e86f30a9cae99ace48b1fa4b1708a43490ad5 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Mon, 19 May 2025 09:27:10 -0600
Subject: [PATCH 16/31] Update CCSLocalBrowserTab.tsx

---
 .../slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx  | 1 -
 1 file changed, 1 deletion(-)

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
index 9f0d7f571..fb33b1e5c 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
@@ -9,7 +9,6 @@ import { selectFileUploaded } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
-  const fileUploaded = useAppSelector(selectFileUploaded);
   const setUploadStatus = useSetUploadStatus();
   return (
     <div hidden={hidden}>

From 531924a5ece1696cb1cafefc756b0f226a8559d6 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Wed, 28 May 2025 13:43:20 -0600
Subject: [PATCH 17/31] adding breadcrumb

---
 .../slycat-cca/js/components/CCANavItems.tsx  | 19 ++++-
 .../js/components/CCAWizardSteps.tsx          |  2 +-
 .../js/components/CCAWizardUtils.tsx          | 73 ++++++++++++++++++-
 .../wizard-store/reducers/cCAWizardSlice.tsx  |  8 ++
 .../wizard-tabs/CCATableIngestion.tsx         |  1 -
 5 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
index 8c47c03b8..37a0c407b 100644
--- a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
+++ b/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>
   );
 };
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 26815b2a6..9e791e43f 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/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"
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index fa7bace98..9a3d0abce 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/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]);
+};
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
index 94d805a80..68f256264 100644
--- 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
@@ -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;
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
index 3cd316083..1026d2479 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx
+++ b/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}

From a6028c87863b2d6f84f509731a03e743bebc63a6 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Wed, 4 Jun 2025 12:52:48 -0600
Subject: [PATCH 18/31] adding final step

---
 .../slycat-cca/js/components/CCAWizard.tsx    |  2 +-
 .../js/components/CCAWizardContent.tsx        |  3 +-
 .../js/components/CCAWizardSteps.tsx          | 11 +---
 .../wizard-store/reducers/cCAWizardSlice.tsx  | 13 +++-
 ...lBrowserTab.tsx => CCALocalBrowserTab.tsx} |  0
 .../wizard-tabs/CCAModelCreation.tsx          | 63 +++++++++++++++++++
 6 files changed, 78 insertions(+), 14 deletions(-)
 rename web-server/plugins/slycat-cca/js/components/wizard-tabs/{CCSLocalBrowserTab.tsx => CCALocalBrowserTab.tsx} (100%)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index ef343f649..0b40d1d56 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -9,7 +9,7 @@ import {
   useHandleClosingCallback,
   useHandleWizardSetup,
 } from "./CCAWizardUtils";
-import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import { useAppSelector } from "./wizard-store/hooks";
 import { selectMid, selectPid } from "./wizard-store/reducers/cCAWizardSlice";
 
 interface CCAWizardParams {
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
index d0393364d..04238fddf 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardContent.tsx
@@ -32,8 +32,7 @@ export const CCAModalContent = (props: React.PropsWithChildren<ModalContentProps
     <div>
       <div className="modal-header">
         <h3 className="modal-title">{title}</h3>
-        <button type="button" className="close" aria-label="Close" onClick={handleCloseModal}>
-          <span aria-hidden="true">&times;</span>
+        <button type="button" className="btn-close" aria-label="Close" data-bs-dismiss="modal" onClick={handleCloseModal}>
         </button>
       </div>
       <div className="modal-body" id="slycat-wizard">
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 9e791e43f..9e47d4e60 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -6,8 +6,9 @@ import { CCAWizardDataSelectionTab } from "./wizard-tabs/CCADataWizardSelectionT
 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 { CCALocalBrowserTab } from "./wizard-tabs/CCALocalBrowserTab";
 import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
+import { CCAModelCreation } from "./wizard-tabs/CCAModelCreation";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
@@ -19,6 +20,7 @@ export const CCAWizardSteps = () => {
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)} />
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)} />
         <CCATableIngestion hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)} />
+        <CCAModelCreation hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}/>
         <div hidden={true}>
           <form role="form">
             {/* <slycat-remote-controls
@@ -55,13 +57,6 @@ export const CCAWizardSteps = () => {
               <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
           </div>
         </div>
-        <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"
-              ></slycat-model-controls> */}
-          </form>
-        </div>
       </div>
     </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
index 68f256264..afedba896 100644
--- 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
@@ -5,7 +5,7 @@ export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
-  CCA_FINISH_MODEL= "CCAFinishModel"
+  CCA_FINISH_MODEL = "CCAFinishModel",
 }
 export enum dataLocationType {
   LOCAL = "local",
@@ -31,6 +31,7 @@ export interface CCAWizardState {
   fileUploaded: boolean;
   attributes: Attribute[];
   scaleInputs: boolean;
+  marking: string | undefined;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -39,7 +40,8 @@ const initialState: CCAWizardState = {
   pid: undefined,
   fileUploaded: false,
   attributes: [],
-  scaleInputs: false
+  scaleInputs: false,
+  marking: undefined,
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -66,6 +68,9 @@ export const cCAWizardSlice = createSlice({
     setScaleInputs: (state, action: PayloadAction<boolean>) => {
       state.scaleInputs = action.payload;
     },
+    setMarking: (state, action: PayloadAction<string>) => {
+      state.marking = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -79,7 +84,8 @@ export const {
   resetCCAWizard: resetCCAWizard,
   setFileUploaded,
   setAttributes,
-  setScaleInputs
+  setScaleInputs,
+  setMarking
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -89,5 +95,6 @@ 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 const selectMarking = (state: RootState) => state.cCAWizard.marking;
 
 export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx
similarity index 100%
rename from web-server/plugins/slycat-cca/js/components/wizard-tabs/CCSLocalBrowserTab.tsx
rename to web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
new file mode 100644
index 000000000..046a5968a
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
@@ -0,0 +1,63 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import selectable_markings from "js/slycat-selectable-markings";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import { selectMarking, setMarking } from "../wizard-store/reducers/cCAWizardSlice";
+
+export const CCAModelCreation = (props: { hidden?: boolean }) => {
+  const { hidden = false } = props;
+  const dispatch = useAppDispatch();
+  const marking = useAppSelector(selectMarking);
+  React.useEffect(() => {
+    if (!marking) {
+      const defaultMarking = selectable_markings?.allowed().find((marking: any) => !!marking);
+      if (defaultMarking?.type()) {
+        dispatch(setMarking(defaultMarking.type()));
+      }
+    }
+  }, [selectable_markings?.allowed()]);
+  const onOptionChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target?.value) {
+      dispatch(setMarking(event.target?.value));
+    }
+  };
+  return (
+    <div hidden={hidden}>
+      <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
+        <div className="mb-3 row required">
+          <label className="col-sm-2 col-form-label">Name</label>
+          <div className="col-sm-10">
+            <input id="slycat-model-name" className="form-control" type="text" required />
+            <div className="invalid-feedback">Please enter a model name.</div>
+          </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label">Description</label>
+          <div className="col-sm-10">
+            <textarea id="slycat-model-description" className="form-control" rows={5}></textarea>
+          </div>
+        </div>
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label">Marking</label>
+          <div className="col-sm-10">
+            <select
+              id="slycat-model-marking"
+              className="form-select"
+              onChange={onOptionChangeHandler}
+            >
+              {selectable_markings?.allowed().map((marking: any) => {
+                return (
+                  <option key={marking.type()} value={marking.type()}>
+                    {marking.label()}
+                  </option>
+                );
+              })}
+            </select>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};

From 68f9f1804d25f524334d3f24bfe94df1bbde4e24 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 27 Jun 2025 13:07:28 -0600
Subject: [PATCH 19/31] adding in descriptor setting functions

---
 .../wizard-store/reducers/cCAWizardSlice.tsx  | 16 +++++++++++++-
 .../wizard-tabs/CCALocalBrowserTab.tsx        |  2 --
 .../wizard-tabs/CCAModelCreation.tsx          | 21 ++++++++++++++++---
 3 files changed, 33 insertions(+), 6 deletions(-)

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
index afedba896..2fbf4086b 100644
--- 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
@@ -32,6 +32,8 @@ export interface CCAWizardState {
   attributes: Attribute[];
   scaleInputs: boolean;
   marking: string | undefined;
+  description: string | undefined;
+  name: string | undefined;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -42,6 +44,8 @@ const initialState: CCAWizardState = {
   attributes: [],
   scaleInputs: false,
   marking: undefined,
+  description: undefined,
+  name: undefined,
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -71,6 +75,12 @@ export const cCAWizardSlice = createSlice({
     setMarking: (state, action: PayloadAction<string>) => {
       state.marking = action.payload;
     },
+    setDescription: (state, action: PayloadAction<string>) => {
+      state.description = action.payload;
+    },
+    setName: (state, action: PayloadAction<string>) => {
+      state.name = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -85,7 +95,9 @@ export const {
   setFileUploaded,
   setAttributes,
   setScaleInputs,
-  setMarking
+  setMarking,
+  setDescription,
+  setName,
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -96,5 +108,7 @@ 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 const selectMarking = (state: RootState) => state.cCAWizard.marking;
+export const selectDescription = (state: RootState) => state.cCAWizard.marking;
+export const selectName = (state: RootState) => state.cCAWizard.marking;
 
 export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx
index fb33b1e5c..af9eb28db 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx
@@ -4,8 +4,6 @@
 import * as React from "react";
 import { SlycatLocalBrowser } from "../slycat-local-browser/SlycatLocalBrowser";
 import { useSetUploadStatus } from "../CCAWizardUtils";
-import { useAppSelector } from "../wizard-store/hooks";
-import { selectFileUploaded } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
index 046a5968a..15a252aec 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
@@ -4,7 +4,7 @@
 import * as React from "react";
 import selectable_markings from "js/slycat-selectable-markings";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectMarking, setMarking } from "../wizard-store/reducers/cCAWizardSlice";
+import { selectMarking, setDescription, setMarking, setName } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCAModelCreation = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
@@ -23,20 +23,35 @@ export const CCAModelCreation = (props: { hidden?: boolean }) => {
       dispatch(setMarking(event.target?.value));
     }
   };
+  const onDescriptionChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (event.target?.value) {
+      dispatch(setDescription(event.target?.value));
+    }
+  };
+  const onNameChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target?.value) {
+      dispatch(setName(event.target?.value));
+    }
+  };
   return (
     <div hidden={hidden}>
       <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
         <div className="mb-3 row required">
           <label className="col-sm-2 col-form-label">Name</label>
           <div className="col-sm-10">
-            <input id="slycat-model-name" className="form-control" type="text" required />
+            <input id="slycat-model-name" onChange={onNameChangeHandler} className="form-control" type="text" required />
             <div className="invalid-feedback">Please enter a model name.</div>
           </div>
         </div>
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label">Description</label>
           <div className="col-sm-10">
-            <textarea id="slycat-model-description" className="form-control" rows={5}></textarea>
+            <textarea
+              id="slycat-model-description"
+              onChange={onDescriptionChangeHandler}
+              className="form-control"
+              rows={5}
+            ></textarea>
           </div>
         </div>
         <div className="mb-3 row">

From 5e520366dbd58ac9d5ef22ea9b6c0927f91be3d7 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Tue, 1 Jul 2025 14:25:09 -0600
Subject: [PATCH 20/31] added model creation step to local model creation path

---
 .../js/components/CCAWizardUtils.tsx          | 44 ++++++++++++++++---
 .../SlycatParserControls.tsx                  |  1 -
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 9a3d0abce..fc8fd3d90 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -4,13 +4,17 @@
 import * as React from "react";
 import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
 import { produce } from "immer";
+import server_root from "js/slycat-server-root";
 import {
   Attribute,
   resetCCAWizard,
   selectAttributes,
   selectDataLocation,
+  selectDescription,
   selectFileUploaded,
+  selectMarking,
   selectMid,
+  selectName,
   selectPid,
   selectScaleInputs,
   selectTab,
@@ -35,6 +39,7 @@ export const useCCAWizardFooter = () => {
   const fileUploaded = useAppSelector(selectFileUploaded);
   const dispatch = useAppDispatch();
   const uploadSelection = useUploadSelection();
+  const finishModel = useFinishModel();
 
   /**
    * handle continue operation
@@ -49,6 +54,9 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_TABLE_INGESTION) {
       uploadSelection();
     }
+    if (tabName === TabNames.CCA_FINISH_MODEL) {
+      finishModel();
+    }
   }, [dispatch, uploadSelection, fileUploaded, setTabName, tabName]);
 
   /**
@@ -145,7 +153,6 @@ export const useHandleClosingCallback = (
   return React.useCallback(() => {
     setModalOpen(false);
     if (stateMid) {
-      console.log("delete");
       client.delete_model_fetch({ mid: stateMid });
     }
     dispatch(resetCCAWizard());
@@ -250,7 +257,6 @@ export const useHandleLocalFileSubmit = (): [
         progress_status: progressStatusCallback,
         progress_final: 90,
         success: function () {
-          console.log("uploaded");
           setProgress(100);
           setProgressStatus("File upload complete");
           setUploadStatus(true);
@@ -291,7 +297,6 @@ export const useSetUploadStatus = () => {
   const dispatch = useAppDispatch();
   return React.useCallback(
     (status: boolean) => {
-      console.log("dispatching", status);
       dispatch(setFileUploaded(status));
     },
     [dispatch],
@@ -332,6 +337,36 @@ export const useHandleTableIngestionOnChange = (attributes: Attribute[]) => {
   );
 };
 
+/**
+ * Hook for dealing with submission to the server of the final model values such as name and description
+ * @returns a function for finalizing the cca model
+ */
+export const useFinishModel = () => {
+  const mid = useAppSelector(selectMid);
+  const description = useAppSelector(selectDescription);
+  const name = useAppSelector(selectName);
+  const marking = useAppSelector(selectMarking);
+  return React.useCallback(() => {
+    // update the final model meta data and trigger the post model finish script
+    client.put_model({
+      mid: mid,
+      name: name,
+      description: description,
+      marking: marking,
+      success: () => {
+        client.post_model_finish({
+          mid: mid,
+          success: () => {
+            location.href = server_root + "models/" + mid;
+          },
+        });
+      },
+      // throw up a dialog if we get into an error state
+      error: dialog.ajax_error("Error updating model."),
+    });
+  }, [mid, name, description, marking, server_root]);
+};
+
 /**
  * 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
@@ -348,9 +383,6 @@ export const useUploadSelection = () => {
     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.",
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
index 3fc681d78..24b04fa8c 100644
--- 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
@@ -15,7 +15,6 @@ export const SlycatParserControls = (props: {
     ?.filter((parser: { categories: () => string }) => includes(parser.categories(), "table"));
   React.useEffect(() => {
     if (filteredParsers !== undefined && filteredParsers.length > 0) {
-      console.log("reset", filteredParsers[0].type());
       setParser(filteredParsers[0].type());
     }
   }, [filteredParsers.length]);

From 1be9535369df5970327ed0c6bc4ad3ee9adc16ce Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 18 Jul 2025 16:44:02 -0600
Subject: [PATCH 21/31] add location for the remote browser tab and update
 continue and back buttons

---
 .../slycat-cca/js/components/CCANavItems.tsx        |  7 +++++--
 .../slycat-cca/js/components/CCAWizardSteps.tsx     |  2 ++
 .../slycat-cca/js/components/CCAWizardUtils.tsx     | 13 +++++++++----
 .../wizard-store/reducers/cCAWizardSlice.tsx        |  4 ++++
 .../js/components/wizard-tabs/CCARemoteBrowser.tsx  | 11 +++++++++++
 5 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx

diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
index 37a0c407b..fe25eac5b 100644
--- a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
@@ -18,7 +18,9 @@ export const CCAWizardNavItems = () => {
       <CCANavItem
         key={"Upload Table"}
         name={"Upload Table"}
-        active={tabName === TabNames.CCA_LOCAL_BROWSER_TAB}
+        active={
+          tabName === TabNames.CCA_LOCAL_BROWSER_TAB || tabName === TabNames.CCA_REMOTE_BROWSER_TAB
+        }
         hidden={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
       />
       <CCANavItem
@@ -27,7 +29,8 @@ export const CCAWizardNavItems = () => {
         active={tabName === TabNames.CCA_TABLE_INGESTION}
         hidden={
           tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ||
-          tabName === TabNames.CCA_LOCAL_BROWSER_TAB
+          tabName === TabNames.CCA_LOCAL_BROWSER_TAB ||
+          tabName === TabNames.CCA_REMOTE_BROWSER_TAB
         }
       />
       <CCANavItem
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 9e47d4e60..47d387e6c 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -9,6 +9,7 @@ import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
 import { CCALocalBrowserTab } from "./wizard-tabs/CCALocalBrowserTab";
 import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
 import { CCAModelCreation } from "./wizard-tabs/CCAModelCreation";
+import { CCARemoteBrowserTab } from "./wizard-tabs/CCARemoteBrowser";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
@@ -19,6 +20,7 @@ export const CCAWizardSteps = () => {
       <div className="tab-content">
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)} />
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)} />
+        <CCARemoteBrowserTab hidden={!(tabName === TabNames.CCA_REMOTE_BROWSER_TAB)} />
         <CCATableIngestion hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)} />
         <CCAModelCreation hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}/>
         <div hidden={true}>
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index fc8fd3d90..4e7ece741 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -45,9 +45,14 @@ export const useCCAWizardFooter = () => {
    * handle continue operation
    */
   const handleContinue = React.useCallback(() => {
-    if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation) {
+    if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation === "local") {
+      console.log(dataLocation);
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
+    if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation === "remote") {
+      console.log(dataLocation);
+      dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+    }
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
     }
@@ -57,13 +62,13 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_FINISH_MODEL) {
       finishModel();
     }
-  }, [dispatch, uploadSelection, fileUploaded, setTabName, tabName]);
+  }, [dispatch, uploadSelection, fileUploaded, setTabName, tabName, dataLocation]);
 
   /**
    * handle back operation
    */
   const handleBack = React.useCallback(() => {
-    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB) {
+    if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB || tabName === TabNames.CCA_REMOTE_BROWSER_TAB) {
       dispatch(setTabName(TabNames.CCA_DATA_WIZARD_SELECTION_TAB));
     }
     if (tabName === TabNames.CCA_TABLE_INGESTION) {
@@ -94,7 +99,7 @@ export const useCCAWizardFooter = () => {
       onClick={handleContinue}
       disabled={tabName === TabNames.CCA_LOCAL_BROWSER_TAB && !fileUploaded}
     >
-      Continue {fileUploaded.toString()}
+      Continue
     </button>
   );
   return React.useMemo(
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
index 2fbf4086b..88b04da3f 100644
--- 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
@@ -1,9 +1,13 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 
 export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
+  CCA_REMOTE_BROWSER_TAB = "CCSRemoteBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
   CCA_FINISH_MODEL = "CCAFinishModel",
 }
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
new file mode 100644
index 000000000..2a182d3a9
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -0,0 +1,11 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import { useSetUploadStatus } from "../CCAWizardUtils";
+
+export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
+  const { hidden = false } = props;
+  const setUploadStatus = useSetUploadStatus();
+  return <div hidden={hidden}>REMOTE</div>;
+};

From 27c984d6bc381af88e3464bdced40393e456f985 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 25 Jul 2025 16:58:47 -0600
Subject: [PATCH 22/31] adding authentication

---
 .../components/SlycatRemoteControls.jsx       |  2 +-
 .../slycat-cca/js/components/CCANavItems.tsx  | 17 ++++-
 .../js/components/CCAWizardSteps.tsx          | 38 +----------
 .../js/components/CCAWizardUtils.tsx          | 66 ++++++++++++++++++-
 .../wizard-store/reducers/cCAWizardSlice.tsx  | 24 ++++++-
 .../wizard-tabs/CCAAuthenticationTab.tsx      | 41 ++++++++++++
 .../wizard-tabs/CCARemoteBrowser.tsx          | 27 +++++++-
 7 files changed, 168 insertions(+), 47 deletions(-)
 create mode 100644 web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx

diff --git a/web-server/components/SlycatRemoteControls.jsx b/web-server/components/SlycatRemoteControls.jsx
index 606b707ec..0209c905a 100644
--- a/web-server/components/SlycatRemoteControls.jsx
+++ b/web-server/components/SlycatRemoteControls.jsx
@@ -24,7 +24,7 @@ export default class SlycatRemoteControls extends Component {
       remote_hosts: [],
       hostname: display.hostname ? display.hostname : null,
       username: display.username ? display.username : null,
-      session_exists: null,
+      session_exists: this.props.sessionExists ? this.props.sessionExists : false,
       password: "",
       hostnames: [],
       loadingData: this.props.loadingData,
diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
index fe25eac5b..3c9301cb9 100644
--- a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
@@ -4,10 +4,11 @@
 import * as React from "react";
 import { CCANavItem } from "./CCANavItem";
 import { useAppSelector } from "./wizard-store/hooks";
-import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
+import { selectDataLocation, selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
 
 export const CCAWizardNavItems = () => {
   const tabName = useAppSelector(selectTab);
+  const dataLocation = useAppSelector(selectDataLocation);
   return (
     <ul className="nav nav-pills">
       <CCANavItem
@@ -15,13 +16,23 @@ export const CCAWizardNavItems = () => {
         name={"Locate Data"}
         active={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
       />
+      <CCANavItem
+        key={"Authentication"}
+        name={"Authentication"}
+        active={tabName === TabNames.CCA_AUTHENTICATION_TAB}
+        hidden={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB || dataLocation !== "remote"}
+      />
       <CCANavItem
         key={"Upload Table"}
         name={"Upload Table"}
         active={
-          tabName === TabNames.CCA_LOCAL_BROWSER_TAB || tabName === TabNames.CCA_REMOTE_BROWSER_TAB
+          tabName === TabNames.CCA_LOCAL_BROWSER_TAB ||
+          tabName === TabNames.CCA_REMOTE_BROWSER_TAB
+        }
+        hidden={
+          tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ||
+          tabName === TabNames.CCA_AUTHENTICATION_TAB
         }
-        hidden={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
       />
       <CCANavItem
         key={"Select Columns"}
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 47d387e6c..7993705e5 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -10,6 +10,7 @@ import { CCALocalBrowserTab } from "./wizard-tabs/CCALocalBrowserTab";
 import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
 import { CCAModelCreation } from "./wizard-tabs/CCAModelCreation";
 import { CCARemoteBrowserTab } from "./wizard-tabs/CCARemoteBrowser";
+import { CCAAuthenticationTab } from "./wizard-tabs/CCAAuthenticationTab";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
@@ -20,45 +21,10 @@ export const CCAWizardSteps = () => {
       <div className="tab-content">
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)} />
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)} />
+        <CCAAuthenticationTab hidden={!(tabName === TabNames.CCA_AUTHENTICATION_TAB)} />
         <CCARemoteBrowserTab hidden={!(tabName === TabNames.CCA_REMOTE_BROWSER_TAB)} />
         <CCATableIngestion hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)} />
         <CCAModelCreation hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}/>
-        <div hidden={true}>
-          <form role="form">
-            {/* <slycat-remote-controls
-                params="
-                hostname:remote.hostname,
-                username:remote.username,
-                password:remote.password,
-                status:remote.status,
-                status_type:remote.status_type,
-                enable:remote.enable,
-                focus:remote.focus,
-                activate:connect,
-                session_exists:remote.session_exists"
-              ></slycat-remote-controls> */}
-          </form>
-        </div>
-
-        <div hidden={true} style={{ height: "400px" }}>
-          <div className="slycat-remote-browser-flex-layout">
-            {/* <slycat-remote-browser
-                params="
-                type:'remote',
-                sid:remote.sid,
-                hostname:remote.hostname,
-                selection:browser.selection,
-                path:browser.path,
-                open_file_callback:load_table,
-                session_exists:remote.session_exists,
-                persistence_id:'cca-table-file',
-                progress:remote.progress,
-                progress_status:remote.progress_status,
-                reauth:reauth,"
-              ></slycat-remote-browser>
-              <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
-          </div>
-        </div>
       </div>
     </div>
   );
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 4e7ece741..28342d634 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -9,6 +9,7 @@ import {
   Attribute,
   resetCCAWizard,
   selectAttributes,
+  selectAuthInfo,
   selectDataLocation,
   selectDescription,
   selectFileUploaded,
@@ -19,6 +20,7 @@ import {
   selectScaleInputs,
   selectTab,
   setAttributes,
+  setAuthInfo,
   setFileUploaded,
   setMid,
   setPid,
@@ -28,6 +30,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 { REMOTE_AUTH_LABELS } from "../../../../utils/ui-labels";
 
 /**
  * A hook for controlling how the back and continue buttons work based on the current redux state
@@ -39,6 +42,7 @@ export const useCCAWizardFooter = () => {
   const fileUploaded = useAppSelector(selectFileUploaded);
   const dispatch = useAppDispatch();
   const uploadSelection = useUploadSelection();
+  const handleAuthentication = useHandleAuthentication();
   const finishModel = useFinishModel();
 
   /**
@@ -51,7 +55,12 @@ export const useCCAWizardFooter = () => {
     }
     if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation === "remote") {
       console.log(dataLocation);
-      dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+      dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
+    }
+    if (tabName === TabNames.CCA_AUTHENTICATION_TAB) {
+      console.log(dataLocation);
+      handleAuthentication();
+      // dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
     }
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
@@ -62,7 +71,15 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_FINISH_MODEL) {
       finishModel();
     }
-  }, [dispatch, uploadSelection, fileUploaded, setTabName, tabName, dataLocation]);
+  }, [
+    dispatch,
+    uploadSelection,
+    handleAuthentication,
+    fileUploaded,
+    setTabName,
+    tabName,
+    dataLocation,
+  ]);
 
   /**
    * handle back operation
@@ -233,7 +250,6 @@ 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("");
@@ -372,6 +388,50 @@ export const useFinishModel = () => {
   }, [mid, name, description, marking, server_root]);
 };
 
+export const useHandleAuthentication = () => {
+  const authInfo = useAppSelector(selectAuthInfo);
+  const dispatch = useAppDispatch();
+  return React.useCallback(async () => {
+    // this.setState({ loadingData: true });
+    // this.props.callBack(this.state.sessionExists, true);
+    console.log(authInfo);
+    if (!authInfo.password) {
+      alert(`password is empty`);
+      return;
+    }
+    client
+      .post_remotes_fetch({
+        parameters: {
+          hostname: authInfo.hostname,
+          username: authInfo.username,
+          password: atob(authInfo.password),
+        },
+      })
+      .then(async () => {
+        return await client.get_remotes_fetch(authInfo.hostname).then((json: any) => {
+          if (json.status === false) {
+            alert(`connection could not be established`);
+          } else {
+            console.log("dispatching", { ...authInfo, sessionExists: true })
+            dispatch(setAuthInfo({ ...authInfo, sessionExists: true }));
+          }
+        });
+      })
+      .catch((errorResponse: any) => {
+        if (errorResponse.status == 403) {
+          alert(`${errorResponse.statusText} \n\n-${REMOTE_AUTH_LABELS.authErrorForbiddenDescription}
+        \n-${REMOTE_AUTH_LABELS.authErrorForbiddenNote}`);
+        } else if (errorResponse.status == 401) {
+          alert(
+            `${errorResponse.statusText} \n\n-${REMOTE_AUTH_LABELS.authErrorUnauthorizedDescription}`,
+          );
+        } else {
+          alert(`${errorResponse.statusText}`);
+        }
+      });
+  }, [authInfo]);
+};
+
 /**
  * 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
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
index 88b04da3f..37e12a56e 100644
--- 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
@@ -6,8 +6,9 @@ import { RootState } from "../store";
 
 export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
-  CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
-  CCA_REMOTE_BROWSER_TAB = "CCSRemoteBrowserTab",
+  CCA_LOCAL_BROWSER_TAB = "CCALocalBrowserTab",
+  CCA_AUTHENTICATION_TAB= "CCAAuthenticationTab",
+  CCA_REMOTE_BROWSER_TAB = "CCARemoteBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
   CCA_FINISH_MODEL = "CCAFinishModel",
 }
@@ -15,6 +16,12 @@ export enum dataLocationType {
   LOCAL = "local",
   REMOTE = "remote",
 }
+export interface AuthenticationInformation {
+  username: string | undefined;
+  password: string | undefined;
+  hostname: string | undefined;
+  sessionExists: boolean;
+}
 export interface Attribute {
   index: number;
   "Axis Type": string;
@@ -38,6 +45,7 @@ export interface CCAWizardState {
   marking: string | undefined;
   description: string | undefined;
   name: string | undefined;
+  authInfo: AuthenticationInformation;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -50,6 +58,12 @@ const initialState: CCAWizardState = {
   marking: undefined,
   description: undefined,
   name: undefined,
+  authInfo: {
+    username: undefined,
+    password: undefined,
+    hostname: undefined,
+    sessionExists: false,
+  },
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -85,6 +99,10 @@ export const cCAWizardSlice = createSlice({
     setName: (state, action: PayloadAction<string>) => {
       state.name = action.payload;
     },
+    setAuthInfo: (state, action: PayloadAction<AuthenticationInformation>) => {
+      console.log(action.payload);
+      state.authInfo = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -102,6 +120,7 @@ export const {
   setMarking,
   setDescription,
   setName,
+  setAuthInfo
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -114,5 +133,6 @@ export const selectScaleInputs = (state: RootState) => state.cCAWizard.scaleInpu
 export const selectMarking = (state: RootState) => state.cCAWizard.marking;
 export const selectDescription = (state: RootState) => state.cCAWizard.marking;
 export const selectName = (state: RootState) => state.cCAWizard.marking;
+export const selectAuthInfo = (state: RootState) => state.cCAWizard.authInfo;
 
 export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
new file mode 100644
index 000000000..86706008a
--- /dev/null
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
@@ -0,0 +1,41 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import SlycatRemoteControls from "components/SlycatRemoteControls";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import {
+  AuthenticationInformation,
+  selectAuthInfo,
+  setAuthInfo,
+} from "../wizard-store/reducers/cCAWizardSlice";
+export const CCAAuthenticationTab = (props: { hidden?: boolean }) => {
+  const { hidden = false } = props;
+  const dispatch = useAppDispatch();
+  const authInfo = useAppSelector(selectAuthInfo);
+  const callBack = (
+    hostname: string,
+    username: string,
+    password: string,
+    session_exists: boolean,
+  ) => {
+    const authInfo: AuthenticationInformation = {
+      username,
+      password: btoa(password),
+      // decode with atob
+      hostname,
+      sessionExists: session_exists,
+    };
+    dispatch(setAuthInfo(authInfo));
+  };
+  return (
+    <div hidden={hidden}>
+      <SlycatRemoteControls
+        sessionExists={authInfo.sessionExists}
+        loadingData={false}
+        callBack={callBack}
+        showConnectButton={false}
+      />
+    </div>
+  );
+};
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index 2a182d3a9..d732d14eb 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -3,9 +3,32 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { useSetUploadStatus } from "../CCAWizardUtils";
-
+import RemoteFileBrowser from "components/RemoteFileBrowser";
+import { useAppDispatch } from "../wizard-store/hooks";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   const setUploadStatus = useSetUploadStatus();
-  return <div hidden={hidden}>REMOTE</div>;
+  const dispatch = useAppDispatch();
+  const onSelectTableFile = (newPath: any, type: any, file: any) => {
+    console.log(newPath, type, file);
+  };
+  const onSelectParserCallBack = (parser: string) => {
+    console.log('parser',parser);
+  };
+  const onReauth = () => {
+    console.log("onReauth");
+  };
+  // TODO: add remote browser
+  return (
+    <div hidden={hidden}>
+        <RemoteFileBrowser
+          onSelectFileCallBack={onSelectTableFile}
+          onSelectParserCallBack={onSelectParserCallBack}
+          onReauthCallBack={onReauth}
+          hostname={"hostname"}
+          useSMB={false}
+          showSelector={false}
+        />
+    </div>
+  );
 };

From a3327099202e7f923ebfaee6bf700d6872594cfb Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 31 Jul 2025 16:24:57 -0600
Subject: [PATCH 23/31] Cleaning up authentication and loading ux

---
 .../components/SlycatRemoteControls.jsx       | 13 ++++--
 .../slycat-cca/js/components/CCANavItems.tsx  |  3 +-
 .../js/components/CCAWizardUtils.tsx          | 41 ++++++++++++++-----
 .../wizard-store/reducers/cCAWizardSlice.tsx  |  8 +++-
 .../wizard-tabs/CCAAuthenticationTab.tsx      |  4 +-
 .../wizard-tabs/CCARemoteBrowser.tsx          | 13 ++++--
 6 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/web-server/components/SlycatRemoteControls.jsx b/web-server/components/SlycatRemoteControls.jsx
index 0209c905a..a5f1d9aba 100644
--- a/web-server/components/SlycatRemoteControls.jsx
+++ b/web-server/components/SlycatRemoteControls.jsx
@@ -68,7 +68,14 @@ export default class SlycatRemoteControls extends Component {
       this.setState({ hostnames: json });
     });
   };
-
+  componentDidUpdate() {
+    if (this.props.sessionExists !== this.state.session_exists) {
+      this.setState({ session_exists: this.props.sessionExists });
+    }
+    if (this.props.loadingData !== this.state.loadingData) {
+      this.setState({ loadingData: this.props.loadingData });
+    }
+  }
   async componentDidMount() {
     await this.checkRemoteStatus(this.state.hostname);
     await this.getRemoteHosts();
@@ -153,7 +160,7 @@ export default class SlycatRemoteControls extends Component {
    */
   handleKeyDown = (e) => {
     if (e.key === "Enter") {
-        document.getElementById("connect-button")?.click();
+      document.getElementById("connect-button")?.click();
     }
   };
 
@@ -163,7 +170,7 @@ export default class SlycatRemoteControls extends Component {
     if (elementExists !== null) {
       document.getElementById("continue-button")?.click();
     }
-  }
+  };
 
   /**
    * creates JSX form input if a session does not already exist for the given hostname
diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
index 3c9301cb9..66781eaf5 100644
--- a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
@@ -41,7 +41,8 @@ export const CCAWizardNavItems = () => {
         hidden={
           tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ||
           tabName === TabNames.CCA_LOCAL_BROWSER_TAB ||
-          tabName === TabNames.CCA_REMOTE_BROWSER_TAB
+          tabName === TabNames.CCA_REMOTE_BROWSER_TAB || 
+          tabName === TabNames.CCA_AUTHENTICATION_TAB
         }
       />
       <CCANavItem
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 28342d634..1338145a5 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -13,6 +13,7 @@ import {
   selectDataLocation,
   selectDescription,
   selectFileUploaded,
+  selectLoading,
   selectMarking,
   selectMid,
   selectName,
@@ -22,6 +23,7 @@ import {
   setAttributes,
   setAuthInfo,
   setFileUploaded,
+  setLoading,
   setMid,
   setPid,
   setTabName,
@@ -40,6 +42,8 @@ export const useCCAWizardFooter = () => {
   const tabName = useAppSelector(selectTab);
   const dataLocation = useAppSelector(selectDataLocation);
   const fileUploaded = useAppSelector(selectFileUploaded);
+  const loading = useAppSelector(selectLoading);
+  const authInfo = useAppSelector(selectAuthInfo);
   const dispatch = useAppDispatch();
   const uploadSelection = useUploadSelection();
   const handleAuthentication = useHandleAuthentication();
@@ -58,9 +62,11 @@ export const useCCAWizardFooter = () => {
       dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
     }
     if (tabName === TabNames.CCA_AUTHENTICATION_TAB) {
-      console.log(dataLocation);
-      handleAuthentication();
-      // dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+      if (authInfo?.sessionExists) {
+        dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+      } else {
+        handleAuthentication();
+      }
     }
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
@@ -88,6 +94,12 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB || tabName === TabNames.CCA_REMOTE_BROWSER_TAB) {
       dispatch(setTabName(TabNames.CCA_DATA_WIZARD_SELECTION_TAB));
     }
+    if (tabName === TabNames.CCA_AUTHENTICATION_TAB) {
+      dispatch(setTabName(TabNames.CCA_DATA_WIZARD_SELECTION_TAB));
+    }
+    if (tabName === TabNames.CCA_REMOTE_BROWSER_TAB) {
+      dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
+    }
     if (tabName === TabNames.CCA_TABLE_INGESTION) {
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
@@ -99,29 +111,35 @@ export const useCCAWizardFooter = () => {
   const backButton = (
     <button
       key="back button"
+      disabled={loading}
       style={{
         visibility: tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ? "hidden" : "visible",
       }}
-      className="btn btn-light mr-auto"
+      className="btn btn-light me-auto"
       onClick={handleBack}
     >
       Back
     </button>
   );
 
-  const nextButton = (
+  const nextButton = !loading ? (
     <button
       key="continue"
       className="btn btn-primary"
       onClick={handleContinue}
-      disabled={tabName === TabNames.CCA_LOCAL_BROWSER_TAB && !fileUploaded}
+      disabled={(tabName === TabNames.CCA_LOCAL_BROWSER_TAB && !fileUploaded) || loading}
     >
       Continue
     </button>
+  ) : (
+    <button className="btn btn-primary" type="button" disabled>
+      <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+      Loading...
+    </button>
   );
   return React.useMemo(
     () => [backButton, nextButton],
-    [fileUploaded, handleContinue, handleBack, tabName, dataLocation, dispatch],
+    [fileUploaded, loading, handleContinue, handleBack, tabName, dataLocation, dispatch],
   );
 };
 
@@ -392,10 +410,10 @@ export const useHandleAuthentication = () => {
   const authInfo = useAppSelector(selectAuthInfo);
   const dispatch = useAppDispatch();
   return React.useCallback(async () => {
-    // this.setState({ loadingData: true });
-    // this.props.callBack(this.state.sessionExists, true);
     console.log(authInfo);
+    dispatch(setLoading(true));
     if (!authInfo.password) {
+      dispatch(setLoading(false));
       alert(`password is empty`);
       return;
     }
@@ -412,12 +430,15 @@ export const useHandleAuthentication = () => {
           if (json.status === false) {
             alert(`connection could not be established`);
           } else {
-            console.log("dispatching", { ...authInfo, sessionExists: true })
+            console.log("dispatching", { ...authInfo, sessionExists: true });
             dispatch(setAuthInfo({ ...authInfo, sessionExists: true }));
           }
+          dispatch(setLoading(false));
+          dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
         });
       })
       .catch((errorResponse: any) => {
+        dispatch(setLoading(false));
         if (errorResponse.status == 403) {
           alert(`${errorResponse.statusText} \n\n-${REMOTE_AUTH_LABELS.authErrorForbiddenDescription}
         \n-${REMOTE_AUTH_LABELS.authErrorForbiddenNote}`);
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
index 37e12a56e..f27365e88 100644
--- 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
@@ -45,6 +45,7 @@ export interface CCAWizardState {
   marking: string | undefined;
   description: string | undefined;
   name: string | undefined;
+  loading: boolean;
   authInfo: AuthenticationInformation;
 }
 const initialState: CCAWizardState = {
@@ -58,6 +59,7 @@ const initialState: CCAWizardState = {
   marking: undefined,
   description: undefined,
   name: undefined,
+  loading:false,
   authInfo: {
     username: undefined,
     password: undefined,
@@ -99,8 +101,10 @@ export const cCAWizardSlice = createSlice({
     setName: (state, action: PayloadAction<string>) => {
       state.name = action.payload;
     },
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload;
+    },
     setAuthInfo: (state, action: PayloadAction<AuthenticationInformation>) => {
-      console.log(action.payload);
       state.authInfo = action.payload;
     },
     resetCCAWizard: () => initialState,
@@ -120,6 +124,7 @@ export const {
   setMarking,
   setDescription,
   setName,
+  setLoading,
   setAuthInfo
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
@@ -133,6 +138,7 @@ export const selectScaleInputs = (state: RootState) => state.cCAWizard.scaleInpu
 export const selectMarking = (state: RootState) => state.cCAWizard.marking;
 export const selectDescription = (state: RootState) => state.cCAWizard.marking;
 export const selectName = (state: RootState) => state.cCAWizard.marking;
+export const selectLoading = (state: RootState) => state.cCAWizard.loading;
 export const selectAuthInfo = (state: RootState) => state.cCAWizard.authInfo;
 
 export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
index 86706008a..bd19e6d3e 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
@@ -7,12 +7,14 @@ import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
 import {
   AuthenticationInformation,
   selectAuthInfo,
+  selectLoading,
   setAuthInfo,
 } from "../wizard-store/reducers/cCAWizardSlice";
 export const CCAAuthenticationTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   const dispatch = useAppDispatch();
   const authInfo = useAppSelector(selectAuthInfo);
+  const loading = useAppSelector(selectLoading);
   const callBack = (
     hostname: string,
     username: string,
@@ -32,7 +34,7 @@ export const CCAAuthenticationTab = (props: { hidden?: boolean }) => {
     <div hidden={hidden}>
       <SlycatRemoteControls
         sessionExists={authInfo.sessionExists}
-        loadingData={false}
+        loadingData={loading}
         callBack={callBack}
         showConnectButton={false}
       />
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index d732d14eb..a4ba52ee3 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -4,31 +4,36 @@
 import * as React from "react";
 import { useSetUploadStatus } from "../CCAWizardUtils";
 import RemoteFileBrowser from "components/RemoteFileBrowser";
-import { useAppDispatch } from "../wizard-store/hooks";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import { selectAuthInfo } from "../wizard-store/reducers/cCAWizardSlice";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   const setUploadStatus = useSetUploadStatus();
   const dispatch = useAppDispatch();
+  const { hostname, sessionExists } = useAppSelector(selectAuthInfo);
   const onSelectTableFile = (newPath: any, type: any, file: any) => {
     console.log(newPath, type, file);
   };
   const onSelectParserCallBack = (parser: string) => {
-    console.log('parser',parser);
+    console.log("parser", parser);
   };
   const onReauth = () => {
     console.log("onReauth");
   };
-  // TODO: add remote browser
   return (
     <div hidden={hidden}>
+      {hostname && sessionExists ? (
         <RemoteFileBrowser
           onSelectFileCallBack={onSelectTableFile}
           onSelectParserCallBack={onSelectParserCallBack}
           onReauthCallBack={onReauth}
-          hostname={"hostname"}
+          hostname={hostname}
           useSMB={false}
           showSelector={false}
         />
+      ) : (
+        <span>Bad connection re-authenticate</span>
+      )}
     </div>
   );
 };

From 5cdc36e1e6577bf64d665fe3f4f24c1dc5cc7c51 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 31 Jul 2025 16:37:50 -0600
Subject: [PATCH 24/31] handle enter keydown on form

---
 .../wizard-tabs/CCAAuthenticationTab.tsx      | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
index bd19e6d3e..a1a9f200e 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
@@ -8,30 +8,48 @@ import {
   AuthenticationInformation,
   selectAuthInfo,
   selectLoading,
+  selectTab,
   setAuthInfo,
+  setTabName,
+  TabNames,
 } from "../wizard-store/reducers/cCAWizardSlice";
+import { useHandleAuthentication } from "../CCAWizardUtils";
 export const CCAAuthenticationTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   const dispatch = useAppDispatch();
+  const handleAuthentication = useHandleAuthentication();
   const authInfo = useAppSelector(selectAuthInfo);
   const loading = useAppSelector(selectLoading);
-  const callBack = (
-    hostname: string,
-    username: string,
-    password: string,
-    session_exists: boolean,
-  ) => {
-    const authInfo: AuthenticationInformation = {
-      username,
-      password: btoa(password),
-      // decode with atob
-      hostname,
-      sessionExists: session_exists,
-    };
-    dispatch(setAuthInfo(authInfo));
-  };
+  const callBack = React.useCallback(
+    (hostname: string, username: string, password: string, session_exists: boolean) => {
+      const authInfo: AuthenticationInformation = {
+        username,
+        password: btoa(password),
+        // decode with atob
+        hostname,
+        sessionExists: session_exists,
+      };
+      dispatch(setAuthInfo(authInfo));
+    },
+    [dispatch],
+  );
   return (
-    <div hidden={hidden}>
+    <div
+      hidden={hidden}
+      onKeyUp={React.useCallback(
+        (e: React.KeyboardEvent) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            if (authInfo?.sessionExists) {
+              dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+            } else {
+              handleAuthentication();
+            }
+          }
+        },
+        [authInfo, dispatch, handleAuthentication],
+      )}
+    >
       <SlycatRemoteControls
         sessionExists={authInfo.sessionExists}
         loadingData={loading}

From ce2e1b6d252dc50c387415a5b899f69a5f7fa894 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 31 Jul 2025 16:48:38 -0600
Subject: [PATCH 25/31] cleanup and styling

---
 .../wizard-tabs/CCADataWizardSelectionTab.tsx | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
index 4c355366f..bf7f1226c 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
@@ -3,22 +3,29 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { dataLocationType, selectDataLocation, setDataLocation } from "../wizard-store/reducers/cCAWizardSlice";
+import {
+  dataLocationType,
+  selectDataLocation,
+  setDataLocation,
+} from "../wizard-store/reducers/cCAWizardSlice";
 
-export const CCAWizardDataSelectionTab = (props: {hidden?: boolean}) => {
+export const CCAWizardDataSelectionTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
-  const dataLocation = useAppSelector(selectDataLocation)
+  const dataLocation = useAppSelector(selectDataLocation);
   const dispatch = useAppDispatch();
   return (
     <div hidden={hidden}>
       <div className="form-check" style={{ marginLeft: "15px" }}>
         <label>
           <input
+            style={{ marginRight: ".5rem" }}
             type="radio"
             name="local-or-remote-radios"
             id="local-radio"
             value="local"
-            onChange={React.useCallback(()=>{dispatch(setDataLocation(dataLocationType.LOCAL))},[dispatch])}
+            onChange={React.useCallback(() => {
+              dispatch(setDataLocation(dataLocationType.LOCAL));
+            }, [dispatch])}
             checked={dataLocation && dataLocation === dataLocationType.LOCAL}
           />
           Local
@@ -27,11 +34,14 @@ export const CCAWizardDataSelectionTab = (props: {hidden?: boolean}) => {
       <div className="form-check" style={{ marginLeft: "15px" }}>
         <label>
           <input
+            style={{ marginRight: ".5rem" }}
             type="radio"
             name="local-or-remote-radios"
             id="remote-radio"
             value="remote"
-            onChange={React.useCallback(()=>{dispatch(setDataLocation(dataLocationType.REMOTE))},[dispatch])}
+            onChange={React.useCallback(() => {
+              dispatch(setDataLocation(dataLocationType.REMOTE));
+            }, [dispatch])}
             checked={dataLocation && dataLocation === dataLocationType.REMOTE}
           />
           Remote

From 2bbdc5ad2079f319791aaf2657b7359850cfb659 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 1 Aug 2025 10:04:09 -0600
Subject: [PATCH 26/31] adding in parser selection

---
 .../slycat-parser-controls/SlycatParserControls.tsx  |  2 +-
 .../js/components/wizard-tabs/CCARemoteBrowser.tsx   | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

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
index 24b04fa8c..a99d97201 100644
--- 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
@@ -24,7 +24,7 @@ export const SlycatParserControls = (props: {
       <div className="col-sm-10">
         <select
           id="slycat-model-parser"
-          className="form-control"
+          className="form-select"
           onChange={handleParserChange(setParser)}
         >
           {filteredParsers.map((parser: { type: () => string; label: () => string }) => {
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index a4ba52ee3..dbe0b0947 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -5,10 +5,12 @@ import * as React from "react";
 import { useSetUploadStatus } from "../CCAWizardUtils";
 import RemoteFileBrowser from "components/RemoteFileBrowser";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectAuthInfo } from "../wizard-store/reducers/cCAWizardSlice";
+import { selectAuthInfo, TabNames } from "../wizard-store/reducers/cCAWizardSlice";
+import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   const setUploadStatus = useSetUploadStatus();
+  const [parser, setParser] = React.useState<string | undefined>(undefined);
   const dispatch = useAppDispatch();
   const { hostname, sessionExists } = useAppSelector(selectAuthInfo);
   const onSelectTableFile = (newPath: any, type: any, file: any) => {
@@ -18,11 +20,12 @@ export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
     console.log("parser", parser);
   };
   const onReauth = () => {
-    console.log("onReauth");
+    dispatch(setTab(TabNames.CCA_AUTHENTICATION_TAB));
   };
   return (
     <div hidden={hidden}>
       {hostname && sessionExists ? (
+        <>
         <RemoteFileBrowser
           onSelectFileCallBack={onSelectTableFile}
           onSelectParserCallBack={onSelectParserCallBack}
@@ -31,9 +34,14 @@ export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
           useSMB={false}
           showSelector={false}
         />
+        <SlycatParserControls setParser={setParser} />
+        </>
       ) : (
         <span>Bad connection re-authenticate</span>
       )}
     </div>
   );
 };
+function setTab(CCA_AUTHENTICATION_TAB: TabNames): any {
+  throw new Error("Function not implemented.");
+}

From fc5969952ad12dd2babfee8196fc4118e8d9f847 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Fri, 1 Aug 2025 11:53:34 -0600
Subject: [PATCH 27/31] session bug fix for remote auth

---
 packages/slycat/web/server/remote.py          |   9 +-
 web-server/components/RemoteFileBrowser.tsx   | 379 ++++++++++++++++++
 .../js/components/CCAWizardUtils.tsx          |   1 -
 .../wizard-tabs/CCARemoteBrowser.tsx          |  33 +-
 4 files changed, 405 insertions(+), 17 deletions(-)
 create mode 100644 web-server/components/RemoteFileBrowser.tsx

diff --git a/packages/slycat/web/server/remote.py b/packages/slycat/web/server/remote.py
index 5d08c2386..80b4acefb 100644
--- a/packages/slycat/web/server/remote.py
+++ b/packages/slycat/web/server/remote.py
@@ -705,8 +705,11 @@ def browse(self, path, file_reject, file_allow, directory_reject, directory_allo
             return response
         except Exception as e:
             cherrypy.log.error(
-                "Exception reading remote file %s: %s %s" % (path, type(e), str(e))
+                "Exception reading remote file %s: %s, %s" % (path, type(e), str(e))
             )
+            if str(e) == "Socket is closed" or str(e) == "Server connection dropped: ":
+                delete_session(self._sid)
+                raise cherrypy.HTTPError("400 Socket closed")
 
             if str(e) == "Garbage packet received":
                 cherrypy.response.headers["x-slycat-message"] = (
@@ -939,7 +942,9 @@ def get_file(self, path, **kwargs):
             cherrypy.log.error(
                 "Exception reading remote file %s: %s %s" % (path, type(e), str(e))
             )
-
+            if str(e) == "Socket is closed":
+                delete_session(self._sid)
+                raise cherrypy.HTTPError("400 Socket closed")
             if "Garbage packet received" in str(e):
                 cherrypy.response.headers["x-slycat-message"] = (
                     "Remote access failed: %s" % str(e)
diff --git a/web-server/components/RemoteFileBrowser.tsx b/web-server/components/RemoteFileBrowser.tsx
new file mode 100644
index 000000000..acc6596f2
--- /dev/null
+++ b/web-server/components/RemoteFileBrowser.tsx
@@ -0,0 +1,379 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import client from "js/slycat-web-client";
+import SlycatSelector, { Option } from "components/SlycatSelector";
+
+/**
+ * @member hostname name of the host we are connecting
+ * (assumes we have a connection already to the host)
+ * @member persistenceId uuid for local storage
+ * @member onSelectFileCallBack called every time a file is selected
+ * returns the files info (path, file.type, file:FileMetaData)
+ * @member onSelectParserCallBack called every time a parser is selected
+ * returns the parser type (dakota or csv)
+ * @member onReauthCallBack called every time we lose connection to the host
+ * @member selectedOption optional string for parser selection (required when showSelector is true)
+ * @member showSelector optional boolean to control whether selector is shown (defaults to true)
+ * @member useSMB optional boolean to use SMB browsing instead of regular SSH browsing (defaults to false)
+ * @export
+ * @interface RemoteFileBrowserProps
+ */
+export interface RemoteFileBrowserProps {
+  hostname: string;
+  persistenceId?: string;
+  onSelectFileCallBack: Function;
+  onSelectParserCallBack: Function;
+  onReauthCallBack: Function;
+  selectedOption?: string;
+  showSelector?: boolean;
+  useSMB?: boolean;
+}
+
+/**
+ * @member type file type
+ * @member name filename
+ * @member size size of file
+ * @member mtime last accessed time
+ * @member mimeType type of file
+ * @interface FileMetaData
+ */
+interface FileMetaData {
+  type: string;
+  name: string;
+  size: string;
+  mtime: string;
+  mimeType: string;
+}
+
+/**
+ * used to create a file browsing window like using 'ls' and 'cd' in a linux terminal
+ *
+ * @export
+ * @param props RemoteFileBrowserProps
+ */
+export default function RemoteFileBrowser(props: RemoteFileBrowserProps) {
+  const [path, setPath] = useState("/"); // path shown in box
+  const [pathInput, setPathInput] = useState("/"); // path to current file when selected
+  const [rawFiles, setRawFiles] = useState<FileMetaData[]>([]); // list of the current files meta data we are looking at
+  const [pathError, setPathError] = useState(false); // do we have a path error
+  const [browseError, setBrowseError] = useState(false); // do we have a browsing error
+  const [browserUpdating, setBrowserUpdating] = useState(false); // are we in the middle of getting data
+  const [selected, setSelected] = useState(-1); // id of selected file
+
+  const persistenceId = props?.persistenceId ?? "";
+
+  /**
+   * given a path return all the items in said path (like ls)
+   *
+   * @param pathInput path to return all ls properties from
+   */
+  const browse = (pathInput: string) => {
+    // First check if we have a remote connection...
+    client.get_remotes_fetch(props.hostname).then((json) => {
+      // If we have a session, go on.
+      if (json.status) {
+        pathInput = pathInput === "" ? "/" : pathInput;
+        setRawFiles([]);
+        setBrowserUpdating(true);
+        setSelected(-1);
+        setPath(pathInput);
+        setPathInput(pathInput);
+
+        // Use SMB or regular browse method based on props
+        const browseMethod = props.useSMB
+          ? client.post_remote_browse_smb
+          : client.post_remote_browse;
+
+        browseMethod({
+          hostname: props.hostname,
+          path: pathInput,
+          success: (results: any) => {
+            localStorage.setItem(
+              "slycat-remote-browser-path-" + persistenceId + props.hostname,
+              pathInput,
+            );
+            setBrowseError(false);
+            setPathError(false);
+
+            let files: FileMetaData[] = [];
+            if (pathInput != "/")
+              files.push({
+                type: "",
+                name: "..",
+                size: "",
+                mtime: "",
+                mimeType: "application/x-directory",
+              });
+            for (let i = 0; i != results.names.length; ++i)
+              files.push({
+                name: results.names[i],
+                size: results.sizes[i],
+                type: results.types[i],
+                mtime: results.mtimes[i],
+                mimeType: results["mime-types"][i],
+              });
+            setRawFiles(files);
+            setBrowserUpdating(false);
+          },
+          error: (results: any) => {
+            if (path != pathInput) {
+              setPathError(true);
+              setBrowserUpdating(false);
+            }
+            if (results.status == 400 && results.statusText === "Remote access failed.") {
+              alert("bad file path");
+            }
+            if (results.status == 400 && results.statusText === "Socket closed") {
+              props.onReauthCallBack();
+            }
+            setBrowseError(true);
+            setBrowserUpdating(false);
+          },
+        });
+      }
+      // Otherwise...we don't have a session anymore, so
+      // run the reauth callback if one was passed.
+      else {
+        if (props.onReauthCallBack) {
+          props.onReauthCallBack();
+        }
+      }
+    });
+  };
+
+  /**
+   * takes a path and returns the directory above it
+   *
+   * @param path string path
+   * @returns new string path one level up
+   */
+  const pathDirname = (path: string): string => {
+    let new_path = path.replace(/\/\.?(\w|\-|\.)*\/?$/, "");
+    if (new_path == "") new_path = "/";
+    return new_path;
+  };
+
+  /**
+   * takes left path and right path and joins them
+   * @param right string path
+   * @param left string path
+   * @requires joined paths
+   */
+  const pathJoin = (left: string, right: string): string => {
+    let new_path = left;
+    if (new_path.slice(-1) != "/") new_path += "/";
+    new_path += right;
+    return new_path;
+  };
+
+  /**
+   * given a file(which includes its full path), browse to the path above it
+   *
+   * @param file meta data for the file selected to browse up
+   * one level from said path
+   */
+  const browseUpByFile = (file: FileMetaData) => {
+    setSelected(-1);
+    // If the file is our parent directory, move up the hierarchy.
+    if (file.name === "..") {
+      browse(pathDirname(path));
+    }
+    // If the file is a directory, move down the hierarchy.
+    else if (file.type === "d") {
+      browse(pathJoin(path, file.name));
+    }
+  };
+
+  const keyPress = (event: any, pathInput: string) => {
+    if (event.key == "Enter") {
+      // How would I trigger the button that is in the render? I have this so far.
+      browse(pathInput);
+    }
+  };
+
+  /**
+   * Given a row id and file info set the selected file and
+   * callBack to tell caller Path, file.type, file:FileMetaData
+   *
+   * @param file an object of FileMetaData
+   * @param i index of selected row in the table
+   */
+  const selectRow = (file: FileMetaData, i: number) => {
+    let newPath: string = path;
+    const path_split: string[] = path.split("/");
+
+    /**
+     * If the user types out the full path, including file name,
+     * we don't want to join the file name with the path
+     * (resulting in duplicate file names).
+     */
+
+    if (path_split[path_split.length - 1] !== file.name) {
+      newPath = pathJoin(path, file.name);
+    }
+
+    setSelected(i);
+    // tell our create what we selected
+    props.onSelectFileCallBack(newPath, file.type, file);
+  };
+
+  /**
+   * takes a list of file info from the state and converts it
+   * to an html
+   *
+   * @returns JSX.Element[] with the styled file list
+   */
+  const getFilesAsJsx = (): JSX.Element[] => {
+    const rawFilesJSX = rawFiles
+      .map((rawFile, i) => {
+        // For SMB, skip files with no mtime
+        if (props.useSMB && !rawFile.mtime) {
+          return null;
+        }
+
+        return (
+          <tr
+            className={selected == i ? "table-active" : ""}
+            key={i}
+            onClick={() => selectRow(rawFile, i)}
+            onDoubleClick={() => browseUpByFile(rawFile)}
+          >
+            <td data-bind-fail="html:icon">
+              {rawFile.mimeType === "application/x-directory" ? (
+                <span className="fa fa-folder"></span>
+              ) : (
+                <span className="fa fa-file-o"></span>
+              )}
+            </td>
+            <td data-bind-fail="text:name">{rawFile.name}</td>
+            <td data-bind-fail="text:size">{rawFile.size}</td>
+            <td data-bind-fail="text:mtime">{rawFile.mtime}</td>
+          </tr>
+        );
+      })
+      .filter((item): item is JSX.Element => item !== null); // Filter out null items for TypeScript
+    return rawFilesJSX;
+  };
+
+  useEffect(() => {
+    const storedPath = localStorage.getItem(
+      "slycat-remote-browser-path-" + persistenceId + props.hostname,
+    );
+    if (storedPath != null) {
+      setPath(storedPath);
+      setPathInput(storedPath);
+      browse(pathDirname(storedPath));
+    } else {
+      browse("/");
+    }
+  }, []); // Empty dependency array means this runs once on mount
+
+  let options: Option[] = [];
+  if (props.selectedOption == "xyce") {
+    options = [
+      {
+        text: "Dakota tabular",
+        value: "slycat-dakota-parser",
+      },
+    ];
+  } else {
+    options = [
+      {
+        text: "Comma separated values (CSV)",
+        value: "slycat-csv-parser",
+      },
+      {
+        text: "Dakota tabular",
+        value: "slycat-dakota-parser",
+      },
+    ];
+  }
+  const pathStyle: any = {
+    width: "calc(100% - 44px)",
+    float: "left",
+    marginRight: "5px",
+  };
+  const styleTable: any = {
+    position: "relative",
+    height: window.innerHeight * 0.4 + "px",
+    overflow: "auto",
+    display: "block",
+    border: "1px solid rgb(222, 226, 230)",
+  };
+  return (
+    <div className="slycat-remote-browser">
+      <label className="fw-bold justify-content-start mb-2" htmlFor="slycat-remote-browser-path">
+        {props.hostname}:
+      </label>
+      <div className="form-group row path mb-3">
+        <div className="col-sm-12">
+          <div className="input-group" style={pathStyle}>
+            <input
+              type="text"
+              className="form-control"
+              id="slycat-remote-browser-path"
+              value={pathInput}
+              onKeyPress={() => keyPress(event, pathInput)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setPathInput(e.target.value);
+              }}
+            />
+            <button className="btn btn-secondary" onClick={() => browse(pathInput)}>
+              Go
+            </button>
+          </div>
+          <div className="btn-group" role="group" style={{ float: "right" }}>
+            <button
+              className="btn btn-secondary"
+              type="button"
+              title="Navigate to parent directory"
+              onClick={() => {
+                browse(pathDirname(path));
+              }}
+            >
+              <i className="fa fa-level-up" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+        {/* <div className="path alert alert-danger" role="alert">
+                Oops, that path is not accessible. Please try again.
+              </div> */}
+      </div>
+
+      {!browserUpdating ? (
+        <div style={styleTable} className="mb-3">
+          <table
+            className="table table-hover table-sm"
+            style={{ borderBottom: "1px solid rgb(222, 226, 230)" }}
+          >
+            <thead className="thead-light">
+              <tr>
+                <th></th>
+                <th>Name</th>
+                <th>Size</th>
+                <th>Date Modified</th>
+              </tr>
+            </thead>
+            <tbody>{getFilesAsJsx()}</tbody>
+          </table>
+        </div>
+      ) : (
+        <button className="btn btn-primary" type="button" disabled>
+          <span
+            className="spinner-border spinner-border-sm"
+            role="status"
+            aria-hidden="true"
+          ></span>
+          Loading...
+        </button>
+      )}
+      {props.showSelector !== false && props.selectedOption && (
+        <SlycatSelector
+          onSelectCallBack={props.onSelectParserCallBack}
+          label={"Filetype"}
+          options={options}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 1338145a5..5e9c5bce3 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -410,7 +410,6 @@ export const useHandleAuthentication = () => {
   const authInfo = useAppSelector(selectAuthInfo);
   const dispatch = useAppDispatch();
   return React.useCallback(async () => {
-    console.log(authInfo);
     dispatch(setLoading(true));
     if (!authInfo.password) {
       dispatch(setLoading(false));
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index dbe0b0947..7b21f59a7 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -5,7 +5,12 @@ import * as React from "react";
 import { useSetUploadStatus } from "../CCAWizardUtils";
 import RemoteFileBrowser from "components/RemoteFileBrowser";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectAuthInfo, TabNames } from "../wizard-store/reducers/cCAWizardSlice";
+import {
+  selectAuthInfo,
+  selectTab,
+  setTabName,
+  TabNames,
+} from "../wizard-store/reducers/cCAWizardSlice";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
@@ -13,6 +18,7 @@ export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const [parser, setParser] = React.useState<string | undefined>(undefined);
   const dispatch = useAppDispatch();
   const { hostname, sessionExists } = useAppSelector(selectAuthInfo);
+  const currentTab = useAppSelector(selectTab);
   const onSelectTableFile = (newPath: any, type: any, file: any) => {
     console.log(newPath, type, file);
   };
@@ -20,21 +26,23 @@ export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
     console.log("parser", parser);
   };
   const onReauth = () => {
-    dispatch(setTab(TabNames.CCA_AUTHENTICATION_TAB));
+    if (currentTab === TabNames.CCA_REMOTE_BROWSER_TAB) {
+      dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
+    }
   };
   return (
     <div hidden={hidden}>
       {hostname && sessionExists ? (
         <>
-        <RemoteFileBrowser
-          onSelectFileCallBack={onSelectTableFile}
-          onSelectParserCallBack={onSelectParserCallBack}
-          onReauthCallBack={onReauth}
-          hostname={hostname}
-          useSMB={false}
-          showSelector={false}
-        />
-        <SlycatParserControls setParser={setParser} />
+          <RemoteFileBrowser
+            onSelectFileCallBack={onSelectTableFile}
+            onSelectParserCallBack={onSelectParserCallBack}
+            onReauthCallBack={onReauth}
+            hostname={hostname}
+            useSMB={false}
+            showSelector={false}
+          />
+          <SlycatParserControls setParser={setParser} />
         </>
       ) : (
         <span>Bad connection re-authenticate</span>
@@ -42,6 +50,3 @@ export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
     </div>
   );
 };
-function setTab(CCA_AUTHENTICATION_TAB: TabNames): any {
-  throw new Error("Function not implemented.");
-}

From 4a86c1e5c5f9d42d193e582ee3c3c1788cc34287 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Wed, 6 Aug 2025 16:46:19 -0600
Subject: [PATCH 28/31] add remote file selection

---
 web-server/components/RemoteFileBrowser.tsx   |   4 +-
 web-server/js/slycat-dialog.js                |   2 +-
 web-server/js/slycat-file-uploader-factory.js |   1 +
 .../js/components/CCAWizardUtils.tsx          | 126 +++++++++++++++---
 .../SlycatLocalBrowser.tsx                    |  37 +++--
 .../SlycatParserControls.tsx                  |   2 +-
 .../wizard-store/reducers/cCAWizardSlice.tsx  |  39 +++++-
 .../wizard-tabs/CCARemoteBrowser.tsx          |  42 ++++--
 8 files changed, 200 insertions(+), 53 deletions(-)

diff --git a/web-server/components/RemoteFileBrowser.tsx b/web-server/components/RemoteFileBrowser.tsx
index acc6596f2..1f62fb653 100644
--- a/web-server/components/RemoteFileBrowser.tsx
+++ b/web-server/components/RemoteFileBrowser.tsx
@@ -22,7 +22,7 @@ export interface RemoteFileBrowserProps {
   hostname: string;
   persistenceId?: string;
   onSelectFileCallBack: Function;
-  onSelectParserCallBack: Function;
+  onSelectParserCallBack?: Function | undefined;
   onReauthCallBack: Function;
   selectedOption?: string;
   showSelector?: boolean;
@@ -367,7 +367,7 @@ export default function RemoteFileBrowser(props: RemoteFileBrowserProps) {
           Loading...
         </button>
       )}
-      {props.showSelector !== false && props.selectedOption && (
+      {props.showSelector !== false && props.onSelectParserCallBack && props.selectedOption && (
         <SlycatSelector
           onSelectCallBack={props.onSelectParserCallBack}
           label={"Filetype"}
diff --git a/web-server/js/slycat-dialog.js b/web-server/js/slycat-dialog.js
index 7fb108e04..bbcc385c8 100644
--- a/web-server/js/slycat-dialog.js
+++ b/web-server/js/slycat-dialog.js
@@ -112,7 +112,7 @@ export function ajax_error(message)
   {
     dialog(
     {
-      message: message + " " + reason_phrase
+      message: message + " " + (reason_phrase ?? '')
     });
   }
 }
\ No newline at end of file
diff --git a/web-server/js/slycat-file-uploader-factory.js b/web-server/js/slycat-file-uploader-factory.js
index 4bf80227d..db00772f4 100644
--- a/web-server/js/slycat-file-uploader-factory.js
+++ b/web-server/js/slycat-file-uploader-factory.js
@@ -550,6 +550,7 @@ function finishUpload(pid, mid, uid, file, numberOfUploadedSlices, fileObject, u
  */
 function deleteUpload(pid, mid, uid, fileObject, progress_increment_applied) {
   if (fileObject.progress_status) {
+    fileObject.progress(80);
     fileObject.progress_status("Parsing...");
   }
   client.delete_upload({
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 5e9c5bce3..73f224c20 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -17,7 +17,11 @@ import {
   selectMarking,
   selectMid,
   selectName,
+  selectParser,
   selectPid,
+  selectProgress,
+  selectProgressStatus,
+  selectRemotePath,
   selectScaleInputs,
   selectTab,
   setAttributes,
@@ -26,6 +30,8 @@ import {
   setLoading,
   setMid,
   setPid,
+  setProgress,
+  setProgressStatus,
   setTabName,
   TabNames,
 } from "./wizard-store/reducers/cCAWizardSlice";
@@ -46,6 +52,7 @@ export const useCCAWizardFooter = () => {
   const authInfo = useAppSelector(selectAuthInfo);
   const dispatch = useAppDispatch();
   const uploadSelection = useUploadSelection();
+  const uploadHandleRemoteFileSubmit = useHandleRemoteFileSubmit();
   const handleAuthentication = useHandleAuthentication();
   const finishModel = useFinishModel();
 
@@ -54,11 +61,9 @@ export const useCCAWizardFooter = () => {
    */
   const handleContinue = React.useCallback(() => {
     if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation === "local") {
-      console.log(dataLocation);
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
     if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation === "remote") {
-      console.log(dataLocation);
       dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
     }
     if (tabName === TabNames.CCA_AUTHENTICATION_TAB) {
@@ -68,6 +73,9 @@ export const useCCAWizardFooter = () => {
         handleAuthentication();
       }
     }
+    if (tabName === TabNames.CCA_REMOTE_BROWSER_TAB) {
+      uploadHandleRemoteFileSubmit();
+    }
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
     }
@@ -81,6 +89,7 @@ export const useCCAWizardFooter = () => {
     dispatch,
     uploadSelection,
     handleAuthentication,
+    uploadHandleRemoteFileSubmit,
     fileUploaded,
     setTabName,
     tabName,
@@ -100,9 +109,12 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_REMOTE_BROWSER_TAB) {
       dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
     }
-    if (tabName === TabNames.CCA_TABLE_INGESTION) {
+    if (tabName === TabNames.CCA_TABLE_INGESTION && dataLocation === "local") {
       dispatch(setTabName(TabNames.CCA_LOCAL_BROWSER_TAB));
     }
+    if (tabName === TabNames.CCA_TABLE_INGESTION && dataLocation === "remote") {
+      dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+    }
     if (tabName === TabNames.CCA_FINISH_MODEL) {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
     }
@@ -132,7 +144,7 @@ export const useCCAWizardFooter = () => {
       Continue
     </button>
   ) : (
-    <button className="btn btn-primary" type="button" disabled>
+    <button className="btn btn-primary" type="button" key="loading" disabled>
       <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
       Loading...
     </button>
@@ -249,6 +261,7 @@ const useFileUploadSuccess = () => {
             },
           );
           dispatch(setAttributes(attributes ?? []));
+          dispatch(setLoading(false));
           setUploadStatus(true);
           dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
         },
@@ -258,33 +271,116 @@ const useFileUploadSuccess = () => {
   );
 };
 
+/**
+ * Sets up a stable function for handling remote file uploads, including setting loading status, progress bar, and switching to the next tab.
+ * @returns a stable function for handling remote file upload
+ */
+export const useHandleRemoteFileSubmit = () => {
+  const mid = useAppSelector(selectMid);
+  const pid = useAppSelector(selectPid);
+  const fileDescriptor = useAppSelector(selectRemotePath);
+  const parser = useAppSelector(selectParser);
+  const { hostname } = useAppSelector(selectAuthInfo);
+  const dispatch = useAppDispatch();
+  const progress = useAppSelector(selectProgress);
+  const progressStatus = useAppSelector(selectProgressStatus);
+  const fileUploadSuccess = useFileUploadSuccess();
+  return React.useCallback(() => {
+    dispatch(setLoading(true));
+    console.log(fileDescriptor);
+    if (!fileDescriptor?.path) {
+      dialog.ajax_error(`no file selected`)();
+      dispatch(setLoading(false));
+      return;
+    }
+    if (fileDescriptor.type !== "f") {
+      dialog.ajax_error(
+        `Did you choose the correct file and filetype?  selected file: ${fileDescriptor?.path} is not a file `,
+      )();
+      dispatch(setLoading(false));
+      return;
+    }
+    client
+      .get_remote_file_fetch({ hostname: hostname, path: fileDescriptor?.path })
+      .then((response: any) => {
+        return response.text();
+      })
+      .then((file) => {
+        const progressCallback = (input?: number) => {
+          if (!input) {
+            return progress;
+          }
+          dispatch(setProgress(input));
+        };
+        const progressStatusCallback = (input?: string) => {
+          if (!input) {
+            return progressStatus;
+          }
+          dispatch(setProgressStatus(input));
+        };
+        const fileObject = {
+          pid,
+          mid,
+          file,
+          parser,
+          hostname,
+          paths: fileDescriptor.path,
+          aids: [["data-table"], fileDescriptor.path.split("/").at(-1)],
+          progress: progressCallback,
+          progress_status: progressStatusCallback,
+          progress_final: 90,
+          success: function () {
+            setProgress(100);
+            setProgressStatus("File upload complete");
+            dispatch(setLoading(false));
+            dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
+            // setUploadStatus(true);
+            fileUploadSuccess(setProgress, setProgressStatus, (status) => console.log(status));
+          },
+          error: function () {
+            // setUploadStatus(false);
+            dispatch(setLoading(false));
+            dialog.ajax_error(
+              "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
+            )();
+            dispatch(setProgress(0));
+            dispatch(setProgressStatus(""));
+          },
+        };
+        fileUploader.uploadFile(fileObject);
+      });
+  }, [mid, pid, hostname, fileDescriptor, fileUploadSuccess, parser, dispatch]);
+};
+
 /**
  * handle local file submission
  */
 export const useHandleLocalFileSubmit = (): [
   (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => void,
   number,
-  string,
+  string | undefined,
 ] => {
   const mid = useAppSelector(selectMid);
   const pid = useAppSelector(selectPid);
+  const progress = useAppSelector(selectProgress);
+  const progressStatus = useAppSelector(selectProgressStatus);
+  const dispatch = useAppDispatch();
   const fileUploadSuccess = useFileUploadSuccess();
-  const [progress, setProgress] = React.useState<number>(0);
-  const [progressStatus, setProgressStatus] = React.useState("");
   const handleSubmit = React.useCallback(
     (file: File, parser: string | undefined, setUploadStatus: (status: boolean) => void) => {
       const progressCallback = (input?: number) => {
         if (!input) {
           return progress;
         }
-        setProgress(input);
+        dispatch(setProgress(input));
       };
       const progressStatusCallback = (input?: string) => {
         if (!input) {
           return progressStatus;
         }
-        setProgressStatus(input);
+        dispatch(setProgressStatus(input));
       };
+      dispatch(setLoading(true));
       const fileObject = {
         pid,
         mid,
@@ -296,19 +392,19 @@ export const useHandleLocalFileSubmit = (): [
         progress_status: progressStatusCallback,
         progress_final: 90,
         success: function () {
-          setProgress(100);
-          setProgressStatus("File upload complete");
+          dispatch(setProgress(100));
+          dispatch(setProgressStatus("File upload complete"));
           setUploadStatus(true);
           fileUploadSuccess(setProgress, setProgressStatus, setUploadStatus);
         },
         error: function () {
           setUploadStatus(false);
+          dispatch(setLoading(false));
           dialog.ajax_error(
             "Did you choose the correct file and filetype?  There was a problem parsing the file: ",
           )();
-          // TODO: toggle disabled for continue
-          setProgress(0);
-          setProgressStatus("");
+          dispatch(setProgress(0));
+          dispatch(setProgressStatus(""));
         },
       };
       fileUploader.uploadFile(fileObject);
@@ -323,7 +419,7 @@ export const useHandleLocalFileSubmit = (): [
  * Returns a function that sets the callback "setParser" value to the selected parser
  */
 export const handleParserChange = (
-  setParser: React.Dispatch<React.SetStateAction<string | undefined>>,
+  setParser: (parser: string) => void | React.Dispatch<React.SetStateAction<string | undefined>>,
 ) =>
   React.useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
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
index f4d41af72..a3ae26af3 100644
--- 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
@@ -4,17 +4,19 @@
 import * as React from "react";
 import { useHandleLocalFileSubmit } from "../CCAWizardUtils";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import { selectParser, setParser } from "../wizard-store/reducers/cCAWizardSlice";
 
 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 dispatch = useAppDispatch();
+  const parser = useAppSelector(selectParser);
   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]);
+      if (e.target.files[0]) {
+        handleSubmit(e.target.files[0], parser, setUploadStatus);
+      }
     }
   };
   return (
@@ -28,23 +30,14 @@ export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) =
           id="slycat-local-browser-file"
           placeholder="file"
         ></input>
-        <SlycatParserControls setParser={setParser} />
-        <button
-          key="Upload File To Server"
-          disabled={!fileSelected}
-          style={{ visibility: progress <= 0 ? "visible" : "hidden" }}
-          className="btn btn-primary"
-          data-toggle="tooltip"
-          data-placement="top"
-          title="You must selected a file before continuing."
-          onClick={React.useCallback(() => {
-            if (file) {
-              handleSubmit(file, parser, setUploadStatus);
-            }
-          }, [file, handleSubmit])}
-        >
-          {fileSelected ? `Upload File: ${file?.name}` : "Select A File"}
-        </button>
+        <SlycatParserControls
+          setParser={React.useCallback(
+            (parser: string) => {
+              dispatch(setParser(parser));
+            },
+            [dispatch],
+          )}
+        />
         <div className="progress" style={{ visibility: progress > 0 ? undefined : "hidden" }}>
           <div
             className="progress-bar progress-bar-striped progress-bar-animated"
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
index a99d97201..661339756 100644
--- 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
@@ -7,7 +7,7 @@ import { includes } from "lodash";
 import { handleParserChange } from "../CCAWizardUtils";
 
 export const SlycatParserControls = (props: {
-  setParser: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setParser: (parser: string) => void | React.Dispatch<React.SetStateAction<string | undefined>>;
 }) => {
   const { setParser } = props;
   const filteredParsers: [{ type: () => string; label: () => string }] = parsers
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
index f27365e88..36a571904 100644
--- 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
@@ -7,7 +7,7 @@ import { RootState } from "../store";
 export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
   CCA_LOCAL_BROWSER_TAB = "CCALocalBrowserTab",
-  CCA_AUTHENTICATION_TAB= "CCAAuthenticationTab",
+  CCA_AUTHENTICATION_TAB = "CCAAuthenticationTab",
   CCA_REMOTE_BROWSER_TAB = "CCARemoteBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
   CCA_FINISH_MODEL = "CCAFinishModel",
@@ -16,6 +16,10 @@ export enum dataLocationType {
   LOCAL = "local",
   REMOTE = "remote",
 }
+export interface FileDescriptor {
+  type: string;
+  path: string;
+}
 export interface AuthenticationInformation {
   username: string | undefined;
   password: string | undefined;
@@ -34,6 +38,7 @@ export interface Attribute {
   lastSelected: boolean;
   tooltip: string;
 }
+
 export interface CCAWizardState {
   tab: TabNames;
   dataLocation: dataLocationType;
@@ -47,6 +52,10 @@ export interface CCAWizardState {
   name: string | undefined;
   loading: boolean;
   authInfo: AuthenticationInformation;
+  remotePath: FileDescriptor | undefined;
+  progress: number;
+  progressStatus: string | undefined;
+  parser: string | undefined;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -59,18 +68,34 @@ const initialState: CCAWizardState = {
   marking: undefined,
   description: undefined,
   name: undefined,
-  loading:false,
+  loading: false,
   authInfo: {
     username: undefined,
     password: undefined,
     hostname: undefined,
     sessionExists: false,
   },
+  remotePath: undefined,
+  progress: 0,
+  progressStatus: undefined,
+  parser: undefined,
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
   initialState,
   reducers: {
+    setRemotePath: (state, action: PayloadAction<FileDescriptor>) => {
+      state.remotePath = action.payload;
+    },
+    setParser: (state, action: PayloadAction<string>) => {
+      state.parser = action.payload;
+    },
+    setProgressStatus: (state, action: PayloadAction<string>) => {
+      state.progressStatus = action.payload;
+    },
+    setProgress: (state, action: PayloadAction<number>) => {
+      state.progress = action.payload;
+    },
     setTabName: (state, action: PayloadAction<TabNames>) => {
       state.tab = action.payload;
     },
@@ -113,6 +138,10 @@ export const cCAWizardSlice = createSlice({
 
 // Action creators are generated for each case reducer function
 export const {
+  setRemotePath,
+  setParser,
+  setProgressStatus,
+  setProgress,
   setTabName,
   setDataLocation,
   setMid,
@@ -125,7 +154,7 @@ export const {
   setDescription,
   setName,
   setLoading,
-  setAuthInfo
+  setAuthInfo,
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -140,5 +169,9 @@ export const selectDescription = (state: RootState) => state.cCAWizard.marking;
 export const selectName = (state: RootState) => state.cCAWizard.marking;
 export const selectLoading = (state: RootState) => state.cCAWizard.loading;
 export const selectAuthInfo = (state: RootState) => state.cCAWizard.authInfo;
+export const selectParser = (state: RootState) => state.cCAWizard.parser;
+export const selectProgressStatus = (state: RootState) => state.cCAWizard.progressStatus;
+export const selectProgress = (state: RootState) => state.cCAWizard.progress;
+export const selectRemotePath = (state: RootState) => state.cCAWizard.remotePath;
 
 export default cCAWizardSlice.reducer;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index 7b21f59a7..073b5c39d 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -2,29 +2,40 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
-import { useSetUploadStatus } from "../CCAWizardUtils";
 import RemoteFileBrowser from "components/RemoteFileBrowser";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
 import {
   selectAuthInfo,
   selectTab,
   setTabName,
+  setParser,
   TabNames,
+  setRemotePath,
+  selectLoading,
+  selectProgress,
+  selectProgressStatus,
 } from "../wizard-store/reducers/cCAWizardSlice";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
-  const setUploadStatus = useSetUploadStatus();
-  const [parser, setParser] = React.useState<string | undefined>(undefined);
+  const loading = useAppSelector(selectLoading);
+  const progress = useAppSelector(selectProgress);
+  const progressStatus = useAppSelector(selectProgressStatus);
   const dispatch = useAppDispatch();
   const { hostname, sessionExists } = useAppSelector(selectAuthInfo);
   const currentTab = useAppSelector(selectTab);
+  // set the path
   const onSelectTableFile = (newPath: any, type: any, file: any) => {
-    console.log(newPath, type, file);
-  };
-  const onSelectParserCallBack = (parser: string) => {
-    console.log("parser", parser);
+    dispatch(setRemotePath({ type, path: newPath }));
   };
+  // set parser function
+  const onSetParser = React.useCallback(
+    (parser: string) => {
+      dispatch(setParser(parser));
+    },
+    [dispatch],
+  );
+  // if auth is lost go back to the auth page
   const onReauth = () => {
     if (currentTab === TabNames.CCA_REMOTE_BROWSER_TAB) {
       dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
@@ -36,17 +47,30 @@ export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
         <>
           <RemoteFileBrowser
             onSelectFileCallBack={onSelectTableFile}
-            onSelectParserCallBack={onSelectParserCallBack}
             onReauthCallBack={onReauth}
             hostname={hostname}
             useSMB={false}
             showSelector={false}
           />
-          <SlycatParserControls setParser={setParser} />
+          <SlycatParserControls setParser={onSetParser} />
         </>
       ) : (
         <span>Bad connection re-authenticate</span>
       )}
+      {loading && (
+        <div className="progress" style={{ visibility: progress > 0 ? undefined : "hidden" }}>
+          <div
+            className="progress-bar progress-bar-striped progress-bar-animated"
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={100}
+            style={{ width: progress?.toString() + "%" }}
+          >
+            {progressStatus}
+          </div>
+        </div>
+      )}
     </div>
   );
 };

From a2140b239bf4cdee35d3b5e764a99fdc02416f3b Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Thu, 7 Aug 2025 13:29:19 -0600
Subject: [PATCH 29/31] cleanup from rebase

---
 .../FileBrowser/RemoteFileBrowser.tsx         |   4 +-
 web-server/components/RemoteFileBrowser.tsx   | 379 ------------------
 .../wizard-tabs/CCARemoteBrowser.tsx          |   2 +-
 3 files changed, 3 insertions(+), 382 deletions(-)
 delete mode 100644 web-server/components/RemoteFileBrowser.tsx

diff --git a/web-server/components/FileBrowser/RemoteFileBrowser.tsx b/web-server/components/FileBrowser/RemoteFileBrowser.tsx
index d35a63642..fa859f2f6 100644
--- a/web-server/components/FileBrowser/RemoteFileBrowser.tsx
+++ b/web-server/components/FileBrowser/RemoteFileBrowser.tsx
@@ -27,7 +27,7 @@ export interface RemoteFileBrowserProps {
   hostname: string;
   persistenceId?: string;
   onSelectFileCallBack: Function;
-  onSelectParserCallBack: Function;
+  onSelectParserCallBack?: Function;
   onReauthCallBack: Function;
   selectedOption?: string;
   showSelector?: boolean;
@@ -188,7 +188,7 @@ export default function RemoteFileBrowser(props: RemoteFileBrowserProps) {
         onDoubleClick={handleFileNavigation}
       />
 
-      {props.showSelector !== false && props.selectedOption && (
+      {props.showSelector !== false && props.onSelectParserCallBack && props.selectedOption && (
         <SlycatSelector
           onSelectCallBack={props.onSelectParserCallBack}
           label={"Filetype"}
diff --git a/web-server/components/RemoteFileBrowser.tsx b/web-server/components/RemoteFileBrowser.tsx
deleted file mode 100644
index 1f62fb653..000000000
--- a/web-server/components/RemoteFileBrowser.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import * as React from "react";
-import { useState, useEffect } from "react";
-import client from "js/slycat-web-client";
-import SlycatSelector, { Option } from "components/SlycatSelector";
-
-/**
- * @member hostname name of the host we are connecting
- * (assumes we have a connection already to the host)
- * @member persistenceId uuid for local storage
- * @member onSelectFileCallBack called every time a file is selected
- * returns the files info (path, file.type, file:FileMetaData)
- * @member onSelectParserCallBack called every time a parser is selected
- * returns the parser type (dakota or csv)
- * @member onReauthCallBack called every time we lose connection to the host
- * @member selectedOption optional string for parser selection (required when showSelector is true)
- * @member showSelector optional boolean to control whether selector is shown (defaults to true)
- * @member useSMB optional boolean to use SMB browsing instead of regular SSH browsing (defaults to false)
- * @export
- * @interface RemoteFileBrowserProps
- */
-export interface RemoteFileBrowserProps {
-  hostname: string;
-  persistenceId?: string;
-  onSelectFileCallBack: Function;
-  onSelectParserCallBack?: Function | undefined;
-  onReauthCallBack: Function;
-  selectedOption?: string;
-  showSelector?: boolean;
-  useSMB?: boolean;
-}
-
-/**
- * @member type file type
- * @member name filename
- * @member size size of file
- * @member mtime last accessed time
- * @member mimeType type of file
- * @interface FileMetaData
- */
-interface FileMetaData {
-  type: string;
-  name: string;
-  size: string;
-  mtime: string;
-  mimeType: string;
-}
-
-/**
- * used to create a file browsing window like using 'ls' and 'cd' in a linux terminal
- *
- * @export
- * @param props RemoteFileBrowserProps
- */
-export default function RemoteFileBrowser(props: RemoteFileBrowserProps) {
-  const [path, setPath] = useState("/"); // path shown in box
-  const [pathInput, setPathInput] = useState("/"); // path to current file when selected
-  const [rawFiles, setRawFiles] = useState<FileMetaData[]>([]); // list of the current files meta data we are looking at
-  const [pathError, setPathError] = useState(false); // do we have a path error
-  const [browseError, setBrowseError] = useState(false); // do we have a browsing error
-  const [browserUpdating, setBrowserUpdating] = useState(false); // are we in the middle of getting data
-  const [selected, setSelected] = useState(-1); // id of selected file
-
-  const persistenceId = props?.persistenceId ?? "";
-
-  /**
-   * given a path return all the items in said path (like ls)
-   *
-   * @param pathInput path to return all ls properties from
-   */
-  const browse = (pathInput: string) => {
-    // First check if we have a remote connection...
-    client.get_remotes_fetch(props.hostname).then((json) => {
-      // If we have a session, go on.
-      if (json.status) {
-        pathInput = pathInput === "" ? "/" : pathInput;
-        setRawFiles([]);
-        setBrowserUpdating(true);
-        setSelected(-1);
-        setPath(pathInput);
-        setPathInput(pathInput);
-
-        // Use SMB or regular browse method based on props
-        const browseMethod = props.useSMB
-          ? client.post_remote_browse_smb
-          : client.post_remote_browse;
-
-        browseMethod({
-          hostname: props.hostname,
-          path: pathInput,
-          success: (results: any) => {
-            localStorage.setItem(
-              "slycat-remote-browser-path-" + persistenceId + props.hostname,
-              pathInput,
-            );
-            setBrowseError(false);
-            setPathError(false);
-
-            let files: FileMetaData[] = [];
-            if (pathInput != "/")
-              files.push({
-                type: "",
-                name: "..",
-                size: "",
-                mtime: "",
-                mimeType: "application/x-directory",
-              });
-            for (let i = 0; i != results.names.length; ++i)
-              files.push({
-                name: results.names[i],
-                size: results.sizes[i],
-                type: results.types[i],
-                mtime: results.mtimes[i],
-                mimeType: results["mime-types"][i],
-              });
-            setRawFiles(files);
-            setBrowserUpdating(false);
-          },
-          error: (results: any) => {
-            if (path != pathInput) {
-              setPathError(true);
-              setBrowserUpdating(false);
-            }
-            if (results.status == 400 && results.statusText === "Remote access failed.") {
-              alert("bad file path");
-            }
-            if (results.status == 400 && results.statusText === "Socket closed") {
-              props.onReauthCallBack();
-            }
-            setBrowseError(true);
-            setBrowserUpdating(false);
-          },
-        });
-      }
-      // Otherwise...we don't have a session anymore, so
-      // run the reauth callback if one was passed.
-      else {
-        if (props.onReauthCallBack) {
-          props.onReauthCallBack();
-        }
-      }
-    });
-  };
-
-  /**
-   * takes a path and returns the directory above it
-   *
-   * @param path string path
-   * @returns new string path one level up
-   */
-  const pathDirname = (path: string): string => {
-    let new_path = path.replace(/\/\.?(\w|\-|\.)*\/?$/, "");
-    if (new_path == "") new_path = "/";
-    return new_path;
-  };
-
-  /**
-   * takes left path and right path and joins them
-   * @param right string path
-   * @param left string path
-   * @requires joined paths
-   */
-  const pathJoin = (left: string, right: string): string => {
-    let new_path = left;
-    if (new_path.slice(-1) != "/") new_path += "/";
-    new_path += right;
-    return new_path;
-  };
-
-  /**
-   * given a file(which includes its full path), browse to the path above it
-   *
-   * @param file meta data for the file selected to browse up
-   * one level from said path
-   */
-  const browseUpByFile = (file: FileMetaData) => {
-    setSelected(-1);
-    // If the file is our parent directory, move up the hierarchy.
-    if (file.name === "..") {
-      browse(pathDirname(path));
-    }
-    // If the file is a directory, move down the hierarchy.
-    else if (file.type === "d") {
-      browse(pathJoin(path, file.name));
-    }
-  };
-
-  const keyPress = (event: any, pathInput: string) => {
-    if (event.key == "Enter") {
-      // How would I trigger the button that is in the render? I have this so far.
-      browse(pathInput);
-    }
-  };
-
-  /**
-   * Given a row id and file info set the selected file and
-   * callBack to tell caller Path, file.type, file:FileMetaData
-   *
-   * @param file an object of FileMetaData
-   * @param i index of selected row in the table
-   */
-  const selectRow = (file: FileMetaData, i: number) => {
-    let newPath: string = path;
-    const path_split: string[] = path.split("/");
-
-    /**
-     * If the user types out the full path, including file name,
-     * we don't want to join the file name with the path
-     * (resulting in duplicate file names).
-     */
-
-    if (path_split[path_split.length - 1] !== file.name) {
-      newPath = pathJoin(path, file.name);
-    }
-
-    setSelected(i);
-    // tell our create what we selected
-    props.onSelectFileCallBack(newPath, file.type, file);
-  };
-
-  /**
-   * takes a list of file info from the state and converts it
-   * to an html
-   *
-   * @returns JSX.Element[] with the styled file list
-   */
-  const getFilesAsJsx = (): JSX.Element[] => {
-    const rawFilesJSX = rawFiles
-      .map((rawFile, i) => {
-        // For SMB, skip files with no mtime
-        if (props.useSMB && !rawFile.mtime) {
-          return null;
-        }
-
-        return (
-          <tr
-            className={selected == i ? "table-active" : ""}
-            key={i}
-            onClick={() => selectRow(rawFile, i)}
-            onDoubleClick={() => browseUpByFile(rawFile)}
-          >
-            <td data-bind-fail="html:icon">
-              {rawFile.mimeType === "application/x-directory" ? (
-                <span className="fa fa-folder"></span>
-              ) : (
-                <span className="fa fa-file-o"></span>
-              )}
-            </td>
-            <td data-bind-fail="text:name">{rawFile.name}</td>
-            <td data-bind-fail="text:size">{rawFile.size}</td>
-            <td data-bind-fail="text:mtime">{rawFile.mtime}</td>
-          </tr>
-        );
-      })
-      .filter((item): item is JSX.Element => item !== null); // Filter out null items for TypeScript
-    return rawFilesJSX;
-  };
-
-  useEffect(() => {
-    const storedPath = localStorage.getItem(
-      "slycat-remote-browser-path-" + persistenceId + props.hostname,
-    );
-    if (storedPath != null) {
-      setPath(storedPath);
-      setPathInput(storedPath);
-      browse(pathDirname(storedPath));
-    } else {
-      browse("/");
-    }
-  }, []); // Empty dependency array means this runs once on mount
-
-  let options: Option[] = [];
-  if (props.selectedOption == "xyce") {
-    options = [
-      {
-        text: "Dakota tabular",
-        value: "slycat-dakota-parser",
-      },
-    ];
-  } else {
-    options = [
-      {
-        text: "Comma separated values (CSV)",
-        value: "slycat-csv-parser",
-      },
-      {
-        text: "Dakota tabular",
-        value: "slycat-dakota-parser",
-      },
-    ];
-  }
-  const pathStyle: any = {
-    width: "calc(100% - 44px)",
-    float: "left",
-    marginRight: "5px",
-  };
-  const styleTable: any = {
-    position: "relative",
-    height: window.innerHeight * 0.4 + "px",
-    overflow: "auto",
-    display: "block",
-    border: "1px solid rgb(222, 226, 230)",
-  };
-  return (
-    <div className="slycat-remote-browser">
-      <label className="fw-bold justify-content-start mb-2" htmlFor="slycat-remote-browser-path">
-        {props.hostname}:
-      </label>
-      <div className="form-group row path mb-3">
-        <div className="col-sm-12">
-          <div className="input-group" style={pathStyle}>
-            <input
-              type="text"
-              className="form-control"
-              id="slycat-remote-browser-path"
-              value={pathInput}
-              onKeyPress={() => keyPress(event, pathInput)}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setPathInput(e.target.value);
-              }}
-            />
-            <button className="btn btn-secondary" onClick={() => browse(pathInput)}>
-              Go
-            </button>
-          </div>
-          <div className="btn-group" role="group" style={{ float: "right" }}>
-            <button
-              className="btn btn-secondary"
-              type="button"
-              title="Navigate to parent directory"
-              onClick={() => {
-                browse(pathDirname(path));
-              }}
-            >
-              <i className="fa fa-level-up" aria-hidden="true"></i>
-            </button>
-          </div>
-        </div>
-        {/* <div className="path alert alert-danger" role="alert">
-                Oops, that path is not accessible. Please try again.
-              </div> */}
-      </div>
-
-      {!browserUpdating ? (
-        <div style={styleTable} className="mb-3">
-          <table
-            className="table table-hover table-sm"
-            style={{ borderBottom: "1px solid rgb(222, 226, 230)" }}
-          >
-            <thead className="thead-light">
-              <tr>
-                <th></th>
-                <th>Name</th>
-                <th>Size</th>
-                <th>Date Modified</th>
-              </tr>
-            </thead>
-            <tbody>{getFilesAsJsx()}</tbody>
-          </table>
-        </div>
-      ) : (
-        <button className="btn btn-primary" type="button" disabled>
-          <span
-            className="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="true"
-          ></span>
-          Loading...
-        </button>
-      )}
-      {props.showSelector !== false && props.onSelectParserCallBack && props.selectedOption && (
-        <SlycatSelector
-          onSelectCallBack={props.onSelectParserCallBack}
-          label={"Filetype"}
-          options={options}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index 073b5c39d..769bd5d63 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -2,7 +2,7 @@
  DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
  retains certain rights in this software. */
 import * as React from "react";
-import RemoteFileBrowser from "components/RemoteFileBrowser";
+import RemoteFileBrowser from "components/FileBrowser/RemoteFileBrowser";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
 import {
   selectAuthInfo,

From d0600beb6f51a8a7c0fb5853e870a019b1934ed1 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Tue, 19 Aug 2025 13:31:16 -0600
Subject: [PATCH 30/31] Update SlycatRemoteControls.jsx

---
 web-server/components/SlycatRemoteControls.jsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web-server/components/SlycatRemoteControls.jsx b/web-server/components/SlycatRemoteControls.jsx
index a5f1d9aba..1139fb363 100644
--- a/web-server/components/SlycatRemoteControls.jsx
+++ b/web-server/components/SlycatRemoteControls.jsx
@@ -22,8 +22,8 @@ export default class SlycatRemoteControls extends Component {
     const display = this.populateDisplay();
     this.state = {
       remote_hosts: [],
-      hostname: display.hostname ? display.hostname : null,
-      username: display.username ? display.username : null,
+      hostname: display.hostname ? display.hostname : '',
+      username: display.username ? display.username : '',
       session_exists: this.props.sessionExists ? this.props.sessionExists : false,
       password: "",
       hostnames: [],
@@ -91,12 +91,12 @@ export default class SlycatRemoteControls extends Component {
     if (localStorage.getItem("slycat-remote-controls-hostname")) {
       display.hostname = localStorage.getItem("slycat-remote-controls-hostname")
         ? localStorage.getItem("slycat-remote-controls-hostname")
-        : null;
+        : undefined;
     }
     if (localStorage.getItem("slycat-remote-controls-username")) {
       display.username = localStorage.getItem("slycat-remote-controls-username")
         ? localStorage.getItem("slycat-remote-controls-username")
-        : null;
+        : undefined;
     }
     return display;
   };
@@ -143,10 +143,10 @@ export default class SlycatRemoteControls extends Component {
     const state = {
       remote_hosts: [],
       enable: true,
-      hostname: display.hostname ? display.hostname : null,
-      username: display.username ? display.username : null,
+      hostname: display.hostname ? display.hostname : '',
+      username: display.username ? display.username : '',
       session_exists: false,
-      password: null,
+      password: '',
       initialLoad: false,
     };
     this.setState(state);

From e190ad1bfdeaa06e2a390225010531a4266ca8b6 Mon Sep 17 00:00:00 2001
From: Matt <mletter@sandia.gov>
Date: Tue, 19 Aug 2025 13:39:58 -0600
Subject: [PATCH 31/31] PR change corrections

---
 web-server/plugins/slycat-cca/js/components/CCANavItems.tsx   | 2 +-
 web-server/plugins/slycat-cca/js/components/CCAWizard.tsx     | 2 +-
 .../plugins/slycat-cca/js/components/CCAWizardSteps.tsx       | 2 +-
 .../plugins/slycat-cca/js/components/CCAWizardUtils.tsx       | 4 ++--
 .../js/components/slycat-local-browser/SlycatLocalBrowser.tsx | 2 +-
 .../js/components/wizard-store/reducers/cCAWizardSlice.tsx    | 4 ++--
 .../plugins/slycat-cca/js/components/wizard-store/store.tsx   | 2 +-
 .../js/components/wizard-tabs/CCAAuthenticationTab.tsx        | 2 +-
 .../js/components/wizard-tabs/CCADataWizardSelectionTab.tsx   | 2 +-
 .../slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx | 2 +-
 .../slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx | 2 +-
 .../js/components/wizard-tabs/CCATableIngestion.tsx           | 4 ++--
 12 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
index 66781eaf5..2d22e9d8b 100644
--- a/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCANavItems.tsx
@@ -4,7 +4,7 @@
 import * as React from "react";
 import { CCANavItem } from "./CCANavItem";
 import { useAppSelector } from "./wizard-store/hooks";
-import { selectDataLocation, selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
+import { selectDataLocation, selectTab, TabNames } from "./wizard-store/reducers/CCAWizardSlice";
 
 export const CCAWizardNavItems = () => {
   const tabName = useAppSelector(selectTab);
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
index 0b40d1d56..aa997b3be 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizard.tsx
@@ -10,7 +10,7 @@ import {
   useHandleWizardSetup,
 } from "./CCAWizardUtils";
 import { useAppSelector } from "./wizard-store/hooks";
-import { selectMid, selectPid } from "./wizard-store/reducers/cCAWizardSlice";
+import { selectMid, selectPid } from "./wizard-store/reducers/CCAWizardSlice";
 
 interface CCAWizardParams {
   pid: string;
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
index 7993705e5..1a5038484 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { CCAWizardDataSelectionTab } from "./wizard-tabs/CCADataWizardSelectionTab";
 import { CCAWizardNavItems } from "./CCANavItems";
 import { useAppSelector } from "./wizard-store/hooks";
-import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
+import { selectTab, TabNames } from "./wizard-store/reducers/CCAWizardSlice";
 import { CCALocalBrowserTab } from "./wizard-tabs/CCALocalBrowserTab";
 import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
 import { CCAModelCreation } from "./wizard-tabs/CCAModelCreation";
diff --git a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
index 73f224c20..c28f04820 100644
--- a/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
+++ b/web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx
@@ -34,11 +34,11 @@ import {
   setProgressStatus,
   setTabName,
   TabNames,
-} from "./wizard-store/reducers/cCAWizardSlice";
+} from "./wizard-store/reducers/CCAWizardSlice";
 import client from "js/slycat-web-client";
 import fileUploader from "js/slycat-file-uploader-factory";
 import * as dialog from "js/slycat-dialog";
-import { REMOTE_AUTH_LABELS } from "../../../../utils/ui-labels";
+import { REMOTE_AUTH_LABELS } from "utils/ui-labels";
 
 /**
  * A hook for controlling how the back and continue buttons work based on the current redux state
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
index a3ae26af3..23adfc778 100644
--- 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,7 +5,7 @@ import * as React from "react";
 import { useHandleLocalFileSubmit } from "../CCAWizardUtils";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectParser, setParser } from "../wizard-store/reducers/cCAWizardSlice";
+import { selectParser, setParser } from "../wizard-store/reducers/CCAWizardSlice";
 
 export const SlycatLocalBrowser = (props: { setUploadStatus: (status: boolean) => void }) => {
   const { setUploadStatus } = props;
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
index 36a571904..e01e1742f 100644
--- 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
@@ -165,8 +165,8 @@ 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 const selectMarking = (state: RootState) => state.cCAWizard.marking;
-export const selectDescription = (state: RootState) => state.cCAWizard.marking;
-export const selectName = (state: RootState) => state.cCAWizard.marking;
+export const selectDescription = (state: RootState) => state.cCAWizard.description;
+export const selectName = (state: RootState) => state.cCAWizard.name;
 export const selectLoading = (state: RootState) => state.cCAWizard.loading;
 export const selectAuthInfo = (state: RootState) => state.cCAWizard.authInfo;
 export const selectParser = (state: RootState) => state.cCAWizard.parser;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx b/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
index 8fe350273..f5aa5d460 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-store/store.tsx
@@ -1,5 +1,5 @@
 import { configureStore } from '@reduxjs/toolkit'
-import cCAWizardReducer from './reducers/cCAWizardSlice'
+import cCAWizardReducer from './reducers/CCAWizardSlice'
 const globalWindow = (window as any);
 export const cCAWizardStore = configureStore({
   reducer: {
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
index a1a9f200e..a56da9134 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx
@@ -12,7 +12,7 @@ import {
   setAuthInfo,
   setTabName,
   TabNames,
-} from "../wizard-store/reducers/cCAWizardSlice";
+} from "../wizard-store/reducers/CCAWizardSlice";
 import { useHandleAuthentication } from "../CCAWizardUtils";
 export const CCAAuthenticationTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
index bf7f1226c..6579456c5 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCADataWizardSelectionTab.tsx
@@ -7,7 +7,7 @@ import {
   dataLocationType,
   selectDataLocation,
   setDataLocation,
-} from "../wizard-store/reducers/cCAWizardSlice";
+} from "../wizard-store/reducers/CCAWizardSlice";
 
 export const CCAWizardDataSelectionTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
index 15a252aec..93e3afddc 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx
@@ -4,7 +4,7 @@
 import * as React from "react";
 import selectable_markings from "js/slycat-selectable-markings";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectMarking, setDescription, setMarking, setName } from "../wizard-store/reducers/cCAWizardSlice";
+import { selectMarking, setDescription, setMarking, setName } from "../wizard-store/reducers/CCAWizardSlice";
 
 export const CCAModelCreation = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
diff --git a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
index 769bd5d63..0e1a65358 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx
@@ -14,7 +14,7 @@ import {
   selectLoading,
   selectProgress,
   selectProgressStatus,
-} from "../wizard-store/reducers/cCAWizardSlice";
+} from "../wizard-store/reducers/CCAWizardSlice";
 import { SlycatParserControls } from "../slycat-parser-controls/SlycatParserControls";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
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
index 1026d2479..ad9d5f0cc 100644
--- a/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx
+++ b/web-server/plugins/slycat-cca/js/components/wizard-tabs/CCATableIngestion.tsx
@@ -4,7 +4,7 @@
 import * as React from "react";
 import SlycatTableIngestion from "js/slycat-table-ingestion-react";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectAttributes } from "../wizard-store/reducers/cCAWizardSlice";
+import { selectAttributes } from "../wizard-store/reducers/CCAWizardSlice";
 import { useHandleTableIngestionOnChange } from "../CCAWizardUtils";
 
 export const CCATableIngestion = (props: { hidden?: boolean }) => {
@@ -34,7 +34,7 @@ export const CCATableIngestion = (props: { hidden?: boolean }) => {
         <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
+              <input type="checkbox" /> Scale to unit variance
             </label>
           </div>
         </div>