add read-only prop for axis range

src/components/plotControls/AxisRangeControl.tsx

@@ -22,6 +22,8 @@ export interface AxisRangeControlProps
   disabled?: boolean;
   /** is this for a log scale axis? If so, we'll validate the min value to be > 0 */
   logScale?: boolean;
+  /** set read-only prop */
+  readOnly?: boolean;
 }
 
 export default function AxisRangeControl({
@@ -33,6 +35,7 @@ export default function AxisRangeControl({
   // add disabled prop to disable input fields: default is false
   disabled = false,
   logScale = false,
+  readOnly = false,
 }: AxisRangeControlProps) {
   const validator = useCallback(
     (
@@ -76,6 +79,7 @@ export default function AxisRangeControl({
         validator={validator}
         // add disabled prop to disable input fields
         disabled={disabled}
+        readOnly={readOnly}
       />
     ) : (
       <NumberRangeInput
@@ -87,6 +91,7 @@ export default function AxisRangeControl({
         validator={validator}
         // add disabled prop to disable input fields
         disabled={disabled}
+        readOnly={readOnly}
       />
     )
   ) : null;

src/components/widgets/NumberAndDateInputs.tsx

@@ -31,6 +31,8 @@ type BaseProps<M extends NumberOrDate> = {
   displayRangeViolationWarnings?: boolean;
   /** Disabled? Default is false */
   disabled?: boolean;
+  /** set read-only prop */
+  readOnly?: boolean;
 };
 
 export type NumberInputProps = BaseProps<number>;
@@ -81,6 +83,7 @@ function BaseInput({
   containerStyles,
   displayRangeViolationWarnings = true,
   disabled = false,
+  readOnly = false,
 }: BaseInputProps) {
   if (validator && (required || minValue != null || maxValue != null))
     console.log(
@@ -197,7 +200,7 @@ function BaseInput({
       )}
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         <TextField
-          InputProps={{ classes }}
+          InputProps={{ classes, readOnly: readOnly }}
           value={
             localValue == null
               ? ''

src/components/widgets/NumberAndDateRangeInputs.tsx

@@ -41,6 +41,8 @@ export type BaseProps<M extends NumberOrDateRange> = {
   clearButtonLabel?: string;
   /** add disabled prop to disable input fields */
   disabled?: boolean;
+  /** set read-only prop */
+  readOnly?: boolean;
 };
 
 export type NumberRangeInputProps = BaseProps<NumberRange>;
@@ -84,6 +86,7 @@ function BaseInput({
   clearButtonLabel = 'Clear',
   // add disabled prop to disable input fields
   disabled = false,
+  readOnly = false,
 }: BaseInputProps) {
   if (validator && required)
     console.log(
@@ -188,6 +191,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            readOnly={readOnly}
           />
         ) : (
           <DateInput
@@ -204,6 +208,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            readOnly={readOnly}
           />
         )}
         <div style={{ display: 'flex', flexDirection: 'row' }}>
@@ -236,6 +241,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            readOnly={readOnly}
           />
         ) : (
           <DateInput
@@ -252,6 +258,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            readOnly={readOnly}
           />
         )}
         {showClearButton && (

src/stories/plots/LinePlot.stories.tsx

@@ -1,15 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import LinePlot, { LinePlotProps } from '../../plots/LinePlot';
 import { FacetedData, LinePlotData } from '../../types/plots';
 import FacetedLinePlot from '../../plots/facetedPlots/FacetedLinePlot';
 import AxisRangeControl from '../../components/plotControls/AxisRangeControl';
-import {
-  NumberRange,
-  NumberOrDateRange,
-  NumberOrTimeDelta,
-  TimeDelta,
-} from '../../types/general';
+import { NumberOrDateRange } from '../../types/general';
 import { Toggle } from '@veupathdb/coreui';
 
 export default {
@@ -164,7 +159,7 @@ Faceted.args = {
   },
 };
 
-//DKDK testing log scale
+// testing log scale
 const dataSetLog = {
   series: [
     {
@@ -181,20 +176,30 @@ const TemplateWithSelectedRangeControls: Story<Omit<LinePlotProps, 'data'>> = (
   const [dependentAxisRange, setDependentAxisRange] = useState<
     NumberOrDateRange | undefined
   >({ min: 1, max: 80 });
-  const [dependentAxisLogScale, setDependentAxisLogScale] = useState<
-    boolean | undefined
-  >(false);
+  const [dependentAxisLogScale, setDependentAxisLogScale] = useState<boolean>(
+    false
+  );
+  const [readOnly, setReadOnly] = useState<boolean>(false);
+  const [disabled, setDisabled] = useState<boolean>(false);
 
   const handleDependentAxisRangeChange = async (
     newRange?: NumberOrDateRange
   ) => {
     setDependentAxisRange(newRange);
   };
 
-  const onDependentAxisLogScaleChange = async (value?: boolean) => {
+  const onDependentAxisLogScaleChange = async (value: boolean) => {
     setDependentAxisLogScale(value);
   };
 
+  const onReadOnlyChange = async (value: boolean) => {
+    setReadOnly(value);
+  };
+
+  const onDisabledChange = async (value: boolean) => {
+    setDisabled(value);
+  };
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <LinePlot
@@ -203,25 +208,42 @@ const TemplateWithSelectedRangeControls: Story<Omit<LinePlotProps, 'data'>> = (
         dependentAxisRange={dependentAxisRange}
         dependentAxisLogScale={dependentAxisLogScale}
       />
-      <Toggle
-        label="Log scale (will exclude values &le; 0):"
-        value={dependentAxisLogScale ?? false}
-        onChange={onDependentAxisLogScaleChange}
-        styleOverrides={{ container: { marginLeft: '5em' } }}
-      />
+      <div style={{ display: 'flex' }}>
+        <Toggle
+          label="Log scale (will exclude values &le; 0):"
+          value={dependentAxisLogScale ?? false}
+          onChange={onDependentAxisLogScaleChange}
+          styleOverrides={{ container: { marginLeft: '6.2em' } }}
+        />
+        <Toggle
+          label="read-only"
+          value={readOnly}
+          onChange={onReadOnlyChange}
+          styleOverrides={{ container: { marginLeft: '5em' } }}
+        />
+        <Toggle
+          label="disabled"
+          value={disabled}
+          onChange={onDisabledChange}
+          styleOverrides={{ container: { marginLeft: '5em' } }}
+        />
+      </div>
       <div style={{ height: 25 }} />
       <AxisRangeControl
         label="Y-axis range control"
         range={dependentAxisRange}
         onRangeChange={handleDependentAxisRangeChange}
         containerStyles={{ marginLeft: '5em' }}
+        // set readOnly and disabled with toggle
+        readOnly={readOnly}
+        disabled={disabled}
       />
     </div>
   );
 };
 
-export const LogScale = TemplateWithSelectedRangeControls.bind({});
-LogScale.args = {
+export const LogscaleAndReadonly = TemplateWithSelectedRangeControls.bind({});
+LogscaleAndReadonly.args = {
   containerStyles: {
     height: '450px',
     width: '750px',