added server support to inputs

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>

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' }}
               />
             );
           }

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>
   );
 };

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

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,24 +13,47 @@ 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);
   const [textInputValue, setTextInputValue] = React.useState<string | undefined>(undefined);
   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') {

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 && (

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 && (

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,

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;
 }