From 09201f55ce0dab184febd579fe9961d1b42b11bf Mon Sep 17 00:00:00 2001
From: Brandon McArthur <brandon_mcarthur@msn.com>
Date: Thu, 12 Dec 2024 15:55:38 -0700
Subject: [PATCH] added server support to inputs

---
 src/components/Content/Content.tsx            |  2 +
 .../ContentContainer/ContentContainer.tsx     |  1 +
 src/components/Panel/Panel.tsx                | 12 ++++-
 src/components/PanelDialog/PanelDialog.tsx    | 19 ++++++-
 src/components/PanelInputs/PanelInputText.tsx | 49 +++++++++++++------
 src/components/PanelLabels/PanelLabels.tsx    |  4 +-
 .../PanelZoomLabels/PanelZoomLabels.tsx       |  4 +-
 src/jsApi.ts                                  |  6 +++
 src/types/configs.d.ts                        |  8 ++-
 9 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index de026b9d..a118e3d6 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -220,6 +220,7 @@ const Content: React.FC<ContentProps> = ({ table, tableWrapperRef, tableContentR
                     handlePanelChange={handlePanelChange}
                     selectedValue={curPanel}
                     index={i}
+                    storageInterface={displayInfo?.inputs?.storageInterface || { type: 'localStorage' }}
                   >
                     <PanelGraphicWrapper
                       data={d}
@@ -257,6 +258,7 @@ const Content: React.FC<ContentProps> = ({ table, tableWrapperRef, tableContentR
           source={panelDialog.source as string}
           index={panelDialog.index as number}
           onClose={() => dispatch(setPanelDialog({ open: false }))}
+          storageInterface={displayInfo?.inputs?.storageInterface || { type: 'localStorage' }}
         />
       )}
     </ErrorWrapper>
diff --git a/src/components/ContentContainer/ContentContainer.tsx b/src/components/ContentContainer/ContentContainer.tsx
index fa210e3d..0d118120 100644
--- a/src/components/ContentContainer/ContentContainer.tsx
+++ b/src/components/ContentContainer/ContentContainer.tsx
@@ -173,6 +173,7 @@ const ContentContainer: React.FC = () => {
                 panelKey={panelKey as string}
                 isNumeric={meta.type === INPUT_TYPE_NUMBER}
                 input={meta as ITextInput | INumberInput}
+                storageInterface={displayInfo?.inputs?.storageInterface || { type: 'localStorage' }}
               />
             );
           }
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 8559903e..07e7f28a 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -23,6 +23,7 @@ interface PanelProps {
   handlePanelChange: (value: string) => void;
   selectedValue: string;
   index: number;
+  storageInterface: IInputClientSideStorage | IInputServerSideStorage;
 }
 
 const Panel: React.FC<PanelProps> = ({
@@ -35,6 +36,7 @@ const Panel: React.FC<PanelProps> = ({
   handlePanelChange,
   selectedValue,
   index,
+  storageInterface,
 }) => {
   const dispatch = useDispatch();
   const { data: displayInfo } = useDisplayInfo();
@@ -94,7 +96,15 @@ const Panel: React.FC<PanelProps> = ({
           </div>
         )}
       </div>
-      {showLabels && <PanelLabels data={data} labels={labels} inputs={inputs} onLabelRemove={handleRemoveLabel} />}
+      {showLabels && (
+        <PanelLabels
+          data={data}
+          labels={labels}
+          inputs={inputs}
+          onLabelRemove={handleRemoveLabel}
+          storageInterface={storageInterface}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/PanelDialog/PanelDialog.tsx b/src/components/PanelDialog/PanelDialog.tsx
index 6c9ccac5..118f5ec7 100644
--- a/src/components/PanelDialog/PanelDialog.tsx
+++ b/src/components/PanelDialog/PanelDialog.tsx
@@ -23,13 +23,23 @@ interface PanelDialogProps {
   source: string;
   onClose: () => void;
   index: number;
+  storageInterface: IInputClientSideStorage | IInputServerSideStorage;
 }
 
 interface PanelExtended extends IPanelMeta {
   sourcePath: string;
 }
 
-const PanelDialog: React.FC<PanelDialogProps> = ({ data, filteredData, open, panel, source, onClose, index }) => {
+const PanelDialog: React.FC<PanelDialogProps> = ({
+  data,
+  filteredData,
+  open,
+  panel,
+  source,
+  onClose,
+  index,
+  storageInterface,
+}) => {
   const displayMetas = useDisplayMetas();
   const theme = useTheme();
   const panelMetas = displayMetas.filter((meta) => meta.type === META_TYPE_PANEL && meta.varname !== panel?.varname);
@@ -286,7 +296,12 @@ const PanelDialog: React.FC<PanelDialogProps> = ({ data, filteredData, open, pan
           </IconButton>
         </Box>
       </div>
-      <PanelZoomLabels data={curMetaData || {}} inputs={displayInfo?.inputs?.inputs || []} labels={labels} />
+      <PanelZoomLabels
+        data={curMetaData || {}}
+        inputs={displayInfo?.inputs?.inputs || []}
+        labels={labels}
+        storageInterface={storageInterface}
+      />
       <DialogActions>
         <Button data-testid="panel-dialog-close" aria-label="display info close" onClick={handleClose}>
           Close
diff --git a/src/components/PanelInputs/PanelInputText.tsx b/src/components/PanelInputs/PanelInputText.tsx
index f1b8152e..2860e676 100644
--- a/src/components/PanelInputs/PanelInputText.tsx
+++ b/src/components/PanelInputs/PanelInputText.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { faPencil, faSpinner, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ClickAwayListener, InputAdornment, Popover, TextField, Tooltip } from '@mui/material';
@@ -13,9 +13,18 @@ interface PanelInputTextProps {
   isNumeric?: boolean;
   input: ITextInput | INumberInput;
   iconFontSize?: number;
+  storageInterface: IInputClientSideStorage | IInputServerSideStorage;
 }
 
-const PanelInputText: React.FC<PanelInputTextProps> = ({ name, rows, panelKey, isNumeric, input, iconFontSize }) => {
+const PanelInputText: React.FC<PanelInputTextProps> = ({
+  name,
+  rows,
+  panelKey,
+  isNumeric,
+  input,
+  iconFontSize,
+  storageInterface,
+}) => {
   const theme = useTheme();
   const anchorRef = React.useRef<HTMLDivElement>(null);
   const [inputOpen, setInputOpen] = React.useState(false);
@@ -23,14 +32,28 @@ const PanelInputText: React.FC<PanelInputTextProps> = ({ name, rows, panelKey, i
   const { getStoredValue, setStoredValue, clearStoredValue } = useStoredInputValue(panelKey, name);
   const autoSaveTimer = useRef<NodeJS.Timeout | null>(null);
   const [isSaving, setIsSaving] = useState(false);
-
+  useEffect(() => {
+    if (storageInterface.type === 'server') {
+      const fetchStoredValue = async () => {
+        const value = await storageInterface.getInput(panelKey, name);
+        setTextInputValue(value);
+      };
+      fetchStoredValue();
+    }
+  }, [storageInterface, panelKey, name]);
   const handleSave = (value: string) => {
-    if (!value) {
-      setStoredValue('');
-      clearStoredValue();
-      return;
+    if (storageInterface.type === 'server') {
+      storageInterface.setInput(panelKey, name, value);
+      setTextInputValue(value);
+    }
+    if (storageInterface.type === 'localStorage') {
+      if (!value) {
+        setStoredValue('');
+        clearStoredValue();
+        return;
+      }
+      setStoredValue(value);
     }
-    setStoredValue(value);
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -64,14 +87,13 @@ const PanelInputText: React.FC<PanelInputTextProps> = ({ name, rows, panelKey, i
 
   const handleClickAway = () => {
     setInputOpen(false);
-    setTextInputValue('');
   };
 
   return (
     <div className={styles.panelInputText}>
       <div className={styles.panelInputTextButtonContainer}>
-        <Tooltip title={getStoredValue()} placement="left" arrow>
-          <div className={styles.panelInputTextValue}>{getStoredValue()}</div>
+        <Tooltip title={getStoredValue() || textInputValue} placement="left" arrow>
+          <div className={styles.panelInputTextValue}>{getStoredValue() || textInputValue}</div>
         </Tooltip>
         <button
           type="button"
@@ -90,11 +112,6 @@ const PanelInputText: React.FC<PanelInputTextProps> = ({ name, rows, panelKey, i
         anchorEl={anchorRef.current}
         classes={{ paper: styles.panelInputTextPopover }}
         slotProps={{ paper: { sx: { backgroundColor: theme.palette.secondary.main } } }}
-        TransitionProps={{
-          onEntered: () => {
-            setTextInputValue(getStoredValue() || '');
-          },
-        }}
         sx={{ left: '20px' }}
         onKeyDown={(e) => {
           if (e.key === 'Escape') {
diff --git a/src/components/PanelLabels/PanelLabels.tsx b/src/components/PanelLabels/PanelLabels.tsx
index cc23cd61..c0dd6389 100644
--- a/src/components/PanelLabels/PanelLabels.tsx
+++ b/src/components/PanelLabels/PanelLabels.tsx
@@ -42,9 +42,10 @@ interface PanelLabelsProps {
   labels: IMeta[];
   inputs: IInput[];
   onLabelRemove: (label: string) => void;
+  storageInterface: IInputClientSideStorage | IInputServerSideStorage;
 }
 
-const PanelLabels: React.FC<PanelLabelsProps> = ({ labels, data, inputs, onLabelRemove }) => {
+const PanelLabels: React.FC<PanelLabelsProps> = ({ labels, data, inputs, onLabelRemove, storageInterface }) => {
   const theme = useTheme();
   const displayMetas = useDisplayMetas();
   const { data: displayInfo } = useDisplayInfo();
@@ -96,6 +97,7 @@ const PanelLabels: React.FC<PanelLabelsProps> = ({ labels, data, inputs, onLabel
                     isNumeric={input.type === INPUT_TYPE_NUMBER}
                     input={input as ITextInput | INumberInput}
                     iconFontSize={panelLabelSize.fontSize}
+                    storageInterface={storageInterface}
                   />
                 )}
                 {input.type === INPUT_TYPE_RADIO && (
diff --git a/src/components/PanelZoomLabels/PanelZoomLabels.tsx b/src/components/PanelZoomLabels/PanelZoomLabels.tsx
index 501a3d3c..0c84c30a 100644
--- a/src/components/PanelZoomLabels/PanelZoomLabels.tsx
+++ b/src/components/PanelZoomLabels/PanelZoomLabels.tsx
@@ -28,9 +28,10 @@ interface PanelZoomLabelsProps {
   data: Datum;
   labels: IMeta[];
   inputs: IInput[];
+  storageInterface: IInputClientSideStorage | IInputServerSideStorage;
 }
 
-const PanelZoomLabels: React.FC<PanelZoomLabelsProps> = ({ labels, data, inputs }) => {
+const PanelZoomLabels: React.FC<PanelZoomLabelsProps> = ({ labels, data, inputs, storageInterface }) => {
   const displayMetas = useDisplayMetas();
   const { data: displayInfo } = useDisplayInfo();
   const stateLabels = useSelector(selectLabels);
@@ -80,6 +81,7 @@ const PanelZoomLabels: React.FC<PanelZoomLabelsProps> = ({ labels, data, inputs
                     panelKey={panelKey as string}
                     isNumeric={input.type === INPUT_TYPE_NUMBER}
                     input={input as ITextInput | INumberInput}
+                    storageInterface={storageInterface}
                   />
                 )}
                 {input.type === INPUT_TYPE_RADIO && (
diff --git a/src/jsApi.ts b/src/jsApi.ts
index 14a988ef..433044a4 100644
--- a/src/jsApi.ts
+++ b/src/jsApi.ts
@@ -771,6 +771,12 @@ class TrelliscopeClass implements ITrelliscopeAppSpec {
     return this;
   }
 
+  setDefaultInputs(inputs: IInputs): ITrelliscopeAppSpec {
+    const { name } = this.displayList[0];
+    this.displays[name].displayInfo.inputs = inputs;
+    return this;
+  }
+
   setRangeFilter({
     varname,
     min = null,
diff --git a/src/types/configs.d.ts b/src/types/configs.d.ts
index 7033c82f..6a7e1f60 100644
--- a/src/types/configs.d.ts
+++ b/src/types/configs.d.ts
@@ -247,6 +247,12 @@ interface IInputClientSideStorage {
   type: 'localStorage';
 }
 
+interface IInputServerSideStorage {
+  type: 'server';
+  getInput: (panelKey: string, varname: string) => string;
+  setInput: (panelKey: string, varname: string, value: string) => void;
+}
+
 // how the inputs will be relayed back to the creator of the display
 interface IInputEmailFeedback {
   feedbackEmail: string;
@@ -255,7 +261,7 @@ interface IInputEmailFeedback {
 
 interface IInputs {
   inputs: IInput[];
-  storageInterface: IInputClientSideStorage;
+  storageInterface: IInputClientSideStorage | IInputServerSideStorage;
   feedbackInterface: IInputEmailFeedback;
 }