diff --git a/packages/base/src/annotations/components/Annotation.tsx b/packages/base/src/annotations/components/Annotation.tsx
index f3aa8196d..54989ceb3 100644
--- a/packages/base/src/annotations/components/Annotation.tsx
+++ b/packages/base/src/annotations/components/Annotation.tsx
@@ -19,37 +19,32 @@ export interface IAnnotationProps {
   children?: JSX.Element[] | JSX.Element;
 }
 
-const Annotation: React.FC<IAnnotationProps> = ({
-  itemId,
-  annotationModel,
-  rightPanelModel,
-  children,
-}) => {
+const Annotation: React.FC<IAnnotationProps> = props => {
   const [messageContent, setMessageContent] = useState('');
   const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    rightPanelModel?.jGISModel,
+    props.rightPanelModel?.jGISModel,
   );
 
-  const annotation = annotationModel.getAnnotation(itemId);
+  const annotation = props.annotationModel.getAnnotation(props.itemId);
   const contents = useMemo(() => annotation?.contents ?? [], [annotation]);
 
   /**
    * Update the model when it changes.
    */
-  rightPanelModel?.documentChanged.connect((_, widget) => {
+  props.rightPanelModel?.documentChanged.connect((_, widget) => {
     setJgisModel(widget?.model);
   });
 
   const handleSubmit = () => {
-    annotationModel.addContent(itemId, messageContent);
+    props.annotationModel.addContent(props.itemId, messageContent);
     setMessageContent('');
   };
 
   const handleDelete = async () => {
     // If the annotation has no content
     // we remove it right away without prompting
-    if (!annotationModel.getAnnotation(itemId)?.contents.length) {
-      return annotationModel.removeAnnotation(itemId);
+    if (!props.annotationModel.getAnnotation(props.itemId)?.contents.length) {
+      return props.annotationModel.removeAnnotation(props.itemId);
     }
 
     const result = await showDialog({
@@ -59,24 +54,24 @@ const Annotation: React.FC<IAnnotationProps> = ({
     });
 
     if (result.button.accept) {
-      annotationModel.removeAnnotation(itemId);
+      props.annotationModel.removeAnnotation(props.itemId);
     }
   };
 
   const centerOnAnnotation = () => {
-    jgisModel?.centerOnPosition(itemId);
+    jgisModel?.centerOnPosition(props.itemId);
   };
 
   return (
     <div className="jGIS-Annotation">
-      {children}
+      {props.children}
       <div>
         {contents.map(content => {
           return (
             <Message
               user={content.user}
               message={content.value}
-              self={annotationModel.user?.username === content.user?.username}
+              self={props.annotationModel.user?.username === content.user?.username}
             />
           );
         })}
@@ -98,7 +93,7 @@ const Annotation: React.FC<IAnnotationProps> = ({
         <Button className="jp-mod-styled jp-mod-warn" onClick={handleDelete}>
           <FontAwesomeIcon icon={faTrash} />
         </Button>
-        {rightPanelModel && (
+        {props.rightPanelModel && (
           <Button
             className="jp-mod-styled jp-mod-accept"
             onClick={centerOnAnnotation}
diff --git a/packages/base/src/annotations/components/AnnotationFloater.tsx b/packages/base/src/annotations/components/AnnotationFloater.tsx
index dba0fd97d..bef71689a 100644
--- a/packages/base/src/annotations/components/AnnotationFloater.tsx
+++ b/packages/base/src/annotations/components/AnnotationFloater.tsx
@@ -4,11 +4,8 @@ import React, { useState } from 'react';
 
 import Annotation, { IAnnotationProps } from './Annotation';
 
-const AnnotationFloater: React.FC<IAnnotationProps> = ({
-  itemId,
-  annotationModel: model,
-}) => {
-  const annotation = model.getAnnotation(itemId);
+const AnnotationFloater: React.FC<IAnnotationProps> = props => {
+  const annotation = props.annotationModel.getAnnotation(props.itemId);
   const [isOpen, setIsOpen] = useState(annotation?.open);
 
   // Function that either
@@ -17,15 +14,15 @@ const AnnotationFloater: React.FC<IAnnotationProps> = ({
   // - closes the annotation if `!open` and the annotation is not empty
   const setOpenOrDelete = (open: boolean) => {
     if (open) {
-      model.updateAnnotation(itemId, { open: true });
+      props.annotationModel.updateAnnotation(props.itemId, { open: true });
       return setIsOpen(true);
     }
 
-    const current = model.getAnnotation(itemId);
+    const current = props.annotationModel.getAnnotation(props.itemId);
     if (!current?.contents.length) {
-      model.removeAnnotation(itemId);
+      props.annotationModel.removeAnnotation(props.itemId);
     } else {
-      model.updateAnnotation(itemId, { open: false });
+      props.annotationModel.updateAnnotation(props.itemId, { open: false });
       setIsOpen(false);
     }
   };
@@ -40,7 +37,7 @@ const AnnotationFloater: React.FC<IAnnotationProps> = ({
         className="jGIS-FloatingAnnotation"
         style={{ visibility: isOpen ? 'visible' : 'hidden' }}
       >
-        <Annotation itemId={itemId} annotationModel={model}>
+        <Annotation itemId={props.itemId} annotationModel={props.annotationModel}>
           <div
             className="jGIS-Popup-Topbar"
             onClick={() => {
diff --git a/packages/base/src/annotations/components/Message.tsx b/packages/base/src/annotations/components/Message.tsx
index 4c14714a7..ef163a6b6 100644
--- a/packages/base/src/annotations/components/Message.tsx
+++ b/packages/base/src/annotations/components/Message.tsx
@@ -19,16 +19,15 @@ interface IProps {
 }
 
 export const Message: React.FC<IProps> = props => {
-  const { self, message, user } = props;
-  const color = user?.color ?? 'black';
-  const author = user?.display_name ?? '';
-  const initials = user?.initials ?? '';
+  const color = props.user?.color ?? 'black';
+  const author = props.user?.display_name ?? '';
+  const initials = props.user?.initials ?? '';
 
   return (
     <div
       className="jGIS-Annotation-Message"
       style={{
-        flexFlow: self ? 'row' : 'row-reverse',
+        flexFlow: props.self ? 'row' : 'row-reverse',
       }}
     >
       <div
@@ -41,7 +40,7 @@ export const Message: React.FC<IProps> = props => {
         <span style={{ width: 24, textAlign: 'center' }}>{initials}</span>
       </div>
       <div className="jGIS-Annotation-Message-Content">
-        <p style={{ padding: 7, margin: 0 }}>{message}</p>
+        <p style={{ padding: 7, margin: 0 }}>{props.message}</p>
       </div>
     </div>
   );
diff --git a/packages/base/src/dialogs/layerBrowserDialog.tsx b/packages/base/src/dialogs/layerBrowserDialog.tsx
index e8af9cc3f..631ec11ea 100644
--- a/packages/base/src/dialogs/layerBrowserDialog.tsx
+++ b/packages/base/src/dialogs/layerBrowserDialog.tsx
@@ -25,13 +25,7 @@ interface ILayerBrowserDialogProps {
   cancel: () => void;
 }
 
-export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
-  model,
-  registry,
-  formSchemaRegistry,
-  okSignalPromise,
-  cancel,
-}) => {
+export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = props => {
   const [searchTerm, setSearchTerm] = useState('');
   const [activeLayers, setActiveLayers] = useState<string[]>([]);
   const [selectedCategory, setSelectedCategory] =
@@ -39,19 +33,19 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
   const [creatingCustomRaster, setCreatingCustomRaster] = useState(false);
 
   const [galleryWithCategory, setGalleryWithCategory] =
-    useState<IRasterLayerGalleryEntry[]>(registry);
+    useState<IRasterLayerGalleryEntry[]>(props.registry);
 
-  const providers = [...new Set(registry.map(item => item.source.provider))];
+  const providers = [...new Set(props.registry.map(item => item.source.provider))];
 
   const filteredGallery = galleryWithCategory.filter(item =>
     item.name.toLowerCase().includes(searchTerm),
   );
 
   useEffect(() => {
-    model.sharedModel.layersChanged.connect(handleLayerChange);
+    props.model.sharedModel.layersChanged.connect(handleLayerChange);
 
     return () => {
-      model.sharedModel.layersChanged.disconnect(handleLayerChange);
+      props.model.sharedModel.layersChanged.disconnect(handleLayerChange);
     };
   }, []);
 
@@ -61,7 +55,7 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
   const handleLayerChange = (_: any, change: IJGISLayerDocChange) => {
     // The split is to get rid of the 'Layer' part of the name to match the names in the gallery
     setActiveLayers(
-      Object.values(model.sharedModel.layers).map(
+      Object.values(props.model.sharedModel.layers).map(
         layer => layer.name.split(' ')[0],
       ),
     );
@@ -79,8 +73,8 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
     selectedCategory?.classList.remove('jGIS-layer-browser-category-selected');
 
     const filteredGallery = sameAsOld
-      ? registry
-      : registry.filter(item =>
+      ? props.registry
+      : props.registry.filter(item =>
           item.source.provider?.includes(categoryTab.innerText),
         );
 
@@ -115,21 +109,21 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
       name: tile.name + ' Layer',
     };
 
-    model.sharedModel.addSource(sourceId, sourceModel);
-    model.addLayer(UUID.uuid4(), layerModel);
+    props.model.sharedModel.addSource(sourceId, sourceModel);
+    props.model.addLayer(UUID.uuid4(), layerModel);
   };
 
   if (creatingCustomRaster) {
     // Disconnect any previous handler
-    okSignalPromise.promise.then(value => {
-      value.disconnect(cancel, this);
+    props.okSignalPromise.promise.then(value => {
+      value.disconnect(props.cancel, this);
     });
 
     return (
       <div className="jGIS-customlayer-form">
         <CreationFormWrapper
-          model={model}
-          formSchemaRegistry={formSchemaRegistry}
+          model={props.model}
+          formSchemaRegistry={props.formSchemaRegistry}
           createLayer={true}
           createSource={true}
           layerType={'RasterLayer'}
@@ -143,16 +137,16 @@ export const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps> = ({
             minZoom: 0,
             attribution: '(C) OpenStreetMap contributors',
           }}
-          okSignalPromise={okSignalPromise}
-          cancel={cancel}
+          okSignalPromise={props.okSignalPromise}
+          cancel={props.cancel}
         />
       </div>
     );
   }
 
   // Ok is like cancel in the case of gallery item selections
-  okSignalPromise.promise.then(value => {
-    value.connect(cancel, this);
+  props.okSignalPromise.promise.then(value => {
+    value.connect(props.cancel, this);
   });
 
   return (
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
index 7021eca85..6181c949a 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
@@ -14,10 +14,7 @@ interface ICanvasSelectComponentProps {
   setSelected: (item: any) => void;
 }
 
-const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
-  selectedRamp,
-  setSelected,
-}) => {
+const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = props => {
   const colorRampNames = [
     'jet',
     // 'hsv', 11 steps min
@@ -86,16 +83,16 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
 
   useEffect(() => {
     if (colorMaps.length > 0) {
-      updateCanvas(selectedRamp);
+      updateCanvas(props.selectedRamp);
     }
-  }, [selectedRamp]);
+  }, [props.selectedRamp]);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
   };
 
   const selectItem = (item: any) => {
-    setSelected(item);
+    props.setSelected(item);
     setIsOpen(false);
     updateCanvas(item);
   };
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
index bf9251883..526158bd0 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
@@ -25,13 +25,7 @@ export type ColorRampOptions = {
   selectedMode: string;
 };
 
-const ColorRamp: React.FC<IColorRampProps> = ({
-  layerParams,
-  modeOptions,
-  classifyFunc,
-  showModeRow,
-  showRampSelector,
-}) => {
+const ColorRamp: React.FC<IColorRampProps> = props => {
   const [selectedRamp, setSelectedRamp] = useState('');
   const [selectedMode, setSelectedMode] = useState('');
   const [numberOfShades, setNumberOfShades] = useState('');
@@ -39,15 +33,15 @@ const ColorRamp: React.FC<IColorRampProps> = ({
 
   useEffect(() => {
     populateOptions();
-  }, [layerParams]);
+  }, [props.layerParams]);
 
   const populateOptions = async () => {
     let nClasses, singleBandMode, colorRamp;
 
-    if (layerParams.symbologyState) {
-      nClasses = layerParams.symbologyState.nClasses;
-      singleBandMode = layerParams.symbologyState.mode;
-      colorRamp = layerParams.symbologyState.colorRamp;
+    if (props.layerParams.symbologyState) {
+      nClasses = props.layerParams.symbologyState.nClasses;
+      singleBandMode = props.layerParams.symbologyState.mode;
+      colorRamp = props.layerParams.symbologyState.colorRamp;
     }
     setNumberOfShades(nClasses ? nClasses : '9');
     setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
@@ -56,7 +50,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
 
   return (
     <div className="jp-gis-color-ramp-container">
-      {showRampSelector && (
+      {props.showRampSelector && (
         <div className="jp-gis-symbology-row">
           <label htmlFor="color-ramp-select">Color Ramp:</label>
           <CanvasSelectComponent
@@ -65,9 +59,9 @@ const ColorRamp: React.FC<IColorRampProps> = ({
           />
         </div>
       )}
-      {showModeRow && (
+      {props.showModeRow && (
         <ModeSelectRow
-          modeOptions={modeOptions}
+          modeOptions={props.modeOptions}
           numberOfShades={numberOfShades}
           setNumberOfShades={setNumberOfShades}
           selectedMode={selectedMode}
@@ -80,7 +74,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
         <Button
           className="jp-Dialog-button jp-mod-accept jp-mod-styled"
           onClick={() =>
-            classifyFunc(
+            props.classifyFunc(
               selectedMode,
               numberOfShades,
               selectedRamp,
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx
index e6da51cb5..ffbd40a00 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRampEntry.tsx
@@ -8,15 +8,11 @@ interface IColorRampEntryProps {
   onClick: (item: any) => void;
 }
 
-const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
-  index,
-  colorMap,
-  onClick,
-}) => {
+const ColorRampEntry: React.FC<IColorRampEntryProps> = props => {
   const canvasHeight = 30;
 
   useEffect(() => {
-    const canvas = document.getElementById(`cv-${index}`) as HTMLCanvasElement;
+    const canvas = document.getElementById(`cv-${props.index}`) as HTMLCanvasElement;
     if (!canvas) {
       return;
     }
@@ -29,7 +25,7 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
     for (let i = 0; i <= 255; i++) {
       ctx.beginPath();
 
-      const color = colorMap.colors[i];
+      const color = props.colorMap.colors[i];
       ctx.fillStyle = color;
 
       ctx.fillRect(i * 2, 0, 2, canvasHeight);
@@ -38,13 +34,13 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
 
   return (
     <div
-      key={colorMap.name}
-      onClick={() => onClick(colorMap.name)}
+      key={props.colorMap.name}
+      onClick={() => props.onClick(props.colorMap.name)}
       className="jp-gis-color-ramp-entry"
     >
-      <span className="jp-gis-color-label">{colorMap.name}</span>
+      <span className="jp-gis-color-label">{props.colorMap.name}</span>
       <canvas
-        id={`cv-${index}`}
+        id={`cv-${props.index}`}
         height={canvasHeight}
         className="jp-gis-color-canvas"
       ></canvas>
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
index c6be6814d..f033515f9 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
@@ -6,13 +6,7 @@ interface IModeSelectRowProps {
   setSelectedMode: (value: string) => void;
   modeOptions: string[];
 }
-const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
-  numberOfShades,
-  setNumberOfShades,
-  selectedMode,
-  setSelectedMode,
-  modeOptions,
-}) => {
+const ModeSelectRow: React.FC<IModeSelectRowProps> = props => {
   return (
     <div className="jp-gis-symbology-row">
       <div className="jp-gis-color-ramp-div">
@@ -21,9 +15,9 @@ const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
           className="jp-mod-styled"
           name="class-number-input"
           type="number"
-          value={selectedMode === 'continuous' ? 52 : numberOfShades}
-          onChange={event => setNumberOfShades(event.target.value)}
-          disabled={selectedMode === 'continuous'}
+          value={props.selectedMode === 'continuous' ? 52 : props.numberOfShades}
+          onChange={event => props.setNumberOfShades(event.target.value)}
+          disabled={props.selectedMode === 'continuous'}
         />
       </div>
       <div className="jp-gis-color-ramp-div">
@@ -33,11 +27,11 @@ const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
             name="mode-select"
             id="mode-select"
             className="jp-mod-styled"
-            value={selectedMode}
-            onChange={event => setSelectedMode(event.target.value)}
+            value={props.selectedMode}
+            onChange={event => props.setSelectedMode(event.target.value)}
           >
-            {modeOptions.map(mode => (
-              <option key={mode} value={mode} selected={selectedMode === mode}>
+            {props.modeOptions.map(mode => (
+              <option key={mode} value={mode} selected={props.selectedMode === mode}>
                 {mode}
               </option>
             ))}
diff --git a/packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx b/packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx
index 5e0261289..abfad0c96 100644
--- a/packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_stops/StopContainer.tsx
@@ -10,26 +10,22 @@ interface IStopContainerProps {
   setStopRows: (stops: IStopRow[]) => void;
 }
 
-const StopContainer: React.FC<IStopContainerProps> = ({
-  selectedMethod,
-  stopRows,
-  setStopRows,
-}) => {
+const StopContainer: React.FC<IStopContainerProps> = props => {
   const addStopRow = () => {
-    setStopRows([
+    props.setStopRows([
       {
         stop: 0,
         output: [0, 0, 0, 1],
       },
-      ...stopRows,
+      ...props.stopRows,
     ]);
   };
 
   const deleteStopRow = (index: number) => {
-    const newFilters = [...stopRows];
+    const newFilters = [...props.stopRows];
     newFilters.splice(index, 1);
 
-    setStopRows(newFilters);
+    props.setStopRows(newFilters);
   };
 
   return (
@@ -39,16 +35,16 @@ const StopContainer: React.FC<IStopContainerProps> = ({
           <span style={{ flex: '0 0 18%' }}>Value</span>
           <span>Output Value</span>
         </div>
-        {stopRows.map((stop, index) => (
+        {props.stopRows.map((stop, index) => (
           <StopRow
             key={`${index}-${stop.output}`}
             index={index}
             value={stop.stop}
             outputValue={stop.output}
-            stopRows={stopRows}
-            setStopRows={setStopRows}
+            stopRows={props.stopRows}
+            setStopRows={props.setStopRows}
             deleteRow={() => deleteStopRow(index)}
-            useNumber={selectedMethod === 'radius' ? true : false}
+            useNumber={props.selectedMethod === 'radius' ? true : false}
           />
         ))}
       </div>
diff --git a/packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx b/packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx
index f67700859..a14d76969 100644
--- a/packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_stops/StopRow.tsx
@@ -13,22 +13,14 @@ const StopRow: React.FC<{
   setStopRows: (stopRows: IStopRow[]) => void;
   deleteRow: () => void;
   useNumber?: boolean;
-}> = ({
-  index,
-  value,
-  outputValue,
-  stopRows,
-  setStopRows,
-  deleteRow,
-  useNumber,
-}) => {
+}> = props => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (inputRef.current === document.activeElement) {
       inputRef.current?.focus();
     }
-  }, [stopRows]);
+  }, [props.stopRows]);
 
   const rgbArrToHex = (rgbArr: number | number[]) => {
     if (!Array.isArray(rgbArr)) {
@@ -63,13 +55,13 @@ const StopRow: React.FC<{
   };
 
   const handleStopChange = (event: { target: { value: string | number } }) => {
-    const newRows = [...stopRows];
-    newRows[index].stop = +event.target.value;
-    setStopRows(newRows);
+    const newRows = [...props.stopRows];
+    newRows[props.index].stop = +event.target.value;
+    props.setStopRows(newRows);
   };
 
   const handleBlur = () => {
-    const newRows = [...stopRows];
+    const newRows = [...props.stopRows];
     newRows.sort((a, b) => {
       if (a.stop < b.stop) {
         return -1;
@@ -79,41 +71,41 @@ const StopRow: React.FC<{
       }
       return 0;
     });
-    setStopRows(newRows);
+    props.setStopRows(newRows);
   };
 
   const handleOutputChange = (event: { target: { value: any } }) => {
-    const newRows = [...stopRows];
-    useNumber
-      ? (newRows[index].output = +event.target.value)
-      : (newRows[index].output = hexToRgb(event.target.value));
-    setStopRows(newRows);
+    const newRows = [...props.stopRows];
+    props.useNumber
+      ? (newRows[props.index].output = +event.target.value)
+      : (newRows[props.index].output = hexToRgb(event.target.value));
+    props.setStopRows(newRows);
   };
 
   return (
     <div className="jp-gis-color-row">
       <input
-        id={`jp-gis-color-value-${index}`}
+        id={`jp-gis-color-value-${props.index}`}
         type="number"
-        value={value}
+        value={props.value}
         onChange={handleStopChange}
         onBlur={handleBlur}
         className="jp-mod-styled jp-gis-color-row-value-input"
       />
 
-      {useNumber ? (
+      {props.useNumber ? (
         <input
           type="number"
           ref={inputRef}
-          value={outputValue as number}
+          value={props.outputValue as number}
           onChange={handleOutputChange}
           className="jp-mod-styled jp-gis-color-row-output-input"
         />
       ) : (
         <input
-          id={`jp-gis-color-color-${index}`}
+          id={`jp-gis-color-color-${props.index}`}
           ref={inputRef}
-          value={rgbArrToHex(outputValue)}
+          value={rgbArrToHex(props.outputValue)}
           type="color"
           onChange={handleOutputChange}
           className="jp-mod-styled jp-gis-color-row-output-input"
@@ -121,10 +113,10 @@ const StopRow: React.FC<{
       )}
 
       <Button
-        id={`jp-gis-remove-color-${index}`}
+        id={`jp-gis-remove-color-${props.index}`}
         className="jp-Button jp-gis-filter-icon"
       >
-        <FontAwesomeIcon icon={faTrash} onClick={deleteRow} />
+        <FontAwesomeIcon icon={faTrash} onClick={props.deleteRow} />
       </Button>
     </div>
   );
diff --git a/packages/base/src/dialogs/symbology/symbologyDialog.tsx b/packages/base/src/dialogs/symbology/symbologyDialog.tsx
index 4a3bee9cf..1d93acd84 100644
--- a/packages/base/src/dialogs/symbology/symbologyDialog.tsx
+++ b/packages/base/src/dialogs/symbology/symbologyDialog.tsx
@@ -39,12 +39,7 @@ export interface IStopRow {
   output: number | number[];
 }
 
-const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-}) => {
+const SymbologyDialog: React.FC<ISymbologyDialogProps> = props => {
   const [selectedLayer, setSelectedLayer] = useState<string | null>(null);
   const [componentToRender, setComponentToRender] = useState<any>(null);
 
@@ -52,11 +47,11 @@ const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
 
   useEffect(() => {
     const handleClientStateChanged = () => {
-      if (!model.localState?.selected?.value) {
+      if (!props.model.localState?.selected?.value) {
         return;
       }
 
-      const currentLayer = Object.keys(model.localState.selected.value)[0];
+      const currentLayer = Object.keys(props.model.localState.selected.value)[0];
 
       setSelectedLayer(currentLayer);
     };
@@ -64,10 +59,10 @@ const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
     // Initial state
     handleClientStateChanged();
 
-    model.clientStateChanged.connect(handleClientStateChanged);
+    props.model.clientStateChanged.connect(handleClientStateChanged);
 
     return () => {
-      model.clientStateChanged.disconnect(handleClientStateChanged);
+      props.model.clientStateChanged.disconnect(handleClientStateChanged);
     };
   }, []);
 
@@ -76,7 +71,7 @@ const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
       return;
     }
 
-    const layer = model.getLayer(selectedLayer);
+    const layer = props.model.getLayer(selectedLayer);
 
     if (!layer) {
       return;
@@ -89,10 +84,10 @@ const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
       case 'HeatmapLayer':
         LayerSymbology = (
           <VectorRendering
-            model={model}
-            state={state}
-            okSignalPromise={okSignalPromise}
-            cancel={cancel}
+            model={props.model}
+            state={props.state}
+            okSignalPromise={props.okSignalPromise}
+            cancel={props.cancel}
             layerId={selectedLayer}
           />
         );
@@ -100,10 +95,10 @@ const SymbologyDialog: React.FC<ISymbologyDialogProps> = ({
       case 'WebGlLayer':
         LayerSymbology = (
           <TiffRendering
-            model={model}
-            state={state}
-            okSignalPromise={okSignalPromise}
-            cancel={cancel}
+            model={props.model}
+            state={props.state}
+            okSignalPromise={props.okSignalPromise}
+            cancel={props.cancel}
             layerId={selectedLayer}
           />
         );
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx b/packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx
index 3c9cefd23..fc132d3fc 100644
--- a/packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx
+++ b/packages/base/src/dialogs/symbology/tiff_layer/TiffRendering.tsx
@@ -4,24 +4,21 @@ import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 import MultibandColor from './types/MultibandColor';
 import SingleBandPseudoColor from './types/SingleBandPseudoColor';
 
-const TiffRendering: React.FC<ISymbologyDialogProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-}) => {
+const TiffRendering: React.FC<ISymbologyDialogProps> = props => {
   const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
   const [selectedRenderType, setSelectedRenderType] = useState<string>();
   const [componentToRender, setComponentToRender] = useState<any>(null);
 
   let RenderComponent;
 
-  if (!layerId) {
+  if (!props.layerId) {
     return;
   }
   useEffect(() => {
-    const layer = model.getLayer(layerId);
+    if (!props.layerId) {
+      throw new Error('Layer ID is required');
+    }
+    const layer = props.model.getLayer(props.layerId);
     const renderType = layer?.parameters?.symbologyState?.renderType;
     setSelectedRenderType(renderType ?? 'Singleband Pseudocolor');
   }, []);
@@ -35,22 +32,22 @@ const TiffRendering: React.FC<ISymbologyDialogProps> = ({
       case 'Singleband Pseudocolor':
         RenderComponent = (
           <SingleBandPseudoColor
-            model={model}
-            state={state}
-            okSignalPromise={okSignalPromise}
-            cancel={cancel}
-            layerId={layerId}
+            model={props.model}
+            state={props.state}
+            okSignalPromise={props.okSignalPromise}
+            cancel={props.cancel}
+            layerId={props.layerId}
           />
         );
         break;
       case 'Multiband Color':
         RenderComponent = (
           <MultibandColor
-            model={model}
-            state={state}
-            okSignalPromise={okSignalPromise}
-            cancel={cancel}
-            layerId={layerId}
+            model={props.model}
+            state={props.state}
+            okSignalPromise={props.okSignalPromise}
+            cancel={props.cancel}
+            layerId={props.layerId}
           />
         );
         break;
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx b/packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx
index 62036c54b..dc7cd473e 100644
--- a/packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx
+++ b/packages/base/src/dialogs/symbology/tiff_layer/components/BandRow.tsx
@@ -22,17 +22,9 @@ interface IBandRowProps {
  * @param setBandRows Function to update band rows in parent
  * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
  */
-const BandRow: React.FC<IBandRowProps> = ({
-  label,
-  index,
-  bandRow,
-  bandRows,
-  setSelectedBand,
-  setBandRows,
-  isMultibandColor,
-}) => {
-  const [minValue, setMinValue] = useState(bandRow?.stats.minimum);
-  const [maxValue, setMaxValue] = useState(bandRow?.stats.maximum);
+const BandRow: React.FC<IBandRowProps> = props => {
+  const [minValue, setMinValue] = useState(props.bandRow?.stats.minimum);
+  const [maxValue, setMaxValue] = useState(props.bandRow?.stats.maximum);
 
   const handleMinValueChange = (event: {
     target: { value: string | number };
@@ -49,27 +41,27 @@ const BandRow: React.FC<IBandRowProps> = ({
   };
 
   const setNewBands = () => {
-    const newBandRows = [...bandRows];
-    newBandRows[index].stats.minimum = minValue;
-    newBandRows[index].stats.maximum = maxValue;
-    setBandRows(newBandRows);
+    const newBandRows = [...props.bandRows];
+    newBandRows[props.index].stats.minimum = minValue;
+    newBandRows[props.index].stats.maximum = maxValue;
+    props.setBandRows(newBandRows);
   };
 
   return (
     <>
       <div className="jp-gis-symbology-row">
-        <label htmlFor={`band-select-${index}`}>{label}:</label>
+        <label htmlFor={`band-select-${props.index}`}>{props.label}:</label>
         <div className="jp-select-wrapper">
           <select
-            name={`band-select-${index}`}
-            onChange={event => setSelectedBand(+event.target.value)}
+            name={`band-select-${props.index}`}
+            onChange={event => props.setSelectedBand(+event.target.value)}
             className="jp-mod-styled"
           >
-            {bandRows.map((band, bandIndex) => (
+            {props.bandRows.map((band, bandIndex) => (
               <option
                 key={bandIndex}
                 value={band.band}
-                selected={band.band === bandRow?.band}
+                selected={band.band === props.bandRow?.band}
                 className="jp-mod-styled"
               >
                 {band.colorInterpretation
@@ -77,11 +69,11 @@ const BandRow: React.FC<IBandRowProps> = ({
                   : `Band ${band.band}`}
               </option>
             ))}
-            {isMultibandColor ? (
+            {props.isMultibandColor ? (
               <option
                 key={'unset'}
                 value={-1}
-                selected={!bandRow}
+                selected={!props.bandRow}
                 className="jp-mod-styled"
               >
                 Unset
@@ -90,7 +82,7 @@ const BandRow: React.FC<IBandRowProps> = ({
           </select>
         </div>
       </div>
-      {isMultibandColor ? null : (
+      {props.isMultibandColor ? null : (
         <div className="jp-gis-symbology-row" style={{ gap: '0.5rem' }}>
           <div
             style={{
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx b/packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx
index 6465a8584..8333ee12f 100644
--- a/packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx
+++ b/packages/base/src/dialogs/symbology/tiff_layer/types/MultibandColor.tsx
@@ -16,21 +16,16 @@ interface ISelectedBands {
 
 type rgbEnum = keyof ISelectedBands;
 
-const MultibandColor: React.FC<ISymbologyDialogProps> = ({
-  model,
-  okSignalPromise,
-  cancel,
-  layerId,
-}) => {
-  if (!layerId) {
+const MultibandColor: React.FC<ISymbologyDialogProps> = props => {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
 
-  const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
+  const { bandRows, setBandRows, loading } = useGetBandInfo(props.model, layer);
 
   const [selectedBands, setSelectedBands] = useState<ISelectedBands>({
     red: 1,
@@ -50,12 +45,12 @@ const MultibandColor: React.FC<ISymbologyDialogProps> = ({
   useEffect(() => {
     populateOptions();
 
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -88,6 +83,9 @@ const MultibandColor: React.FC<ISymbologyDialogProps> = ({
 
   const handleOk = () => {
     // Update layer
+    if (!props.layerId) {
+      throw new Error('layerId is required for MultibandColor component');
+    }
     if (!layer.parameters) {
       return;
     }
@@ -119,8 +117,8 @@ const MultibandColor: React.FC<ISymbologyDialogProps> = ({
     layer.parameters.color = colorExpr;
     layer.type = 'WebGlLayer';
 
-    model.sharedModel.updateLayer(layerId, layer);
-    cancel();
+    props.model.sharedModel.updateLayer(props.layerId, layer);
+    props.cancel();
   };
 
   return (
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx b/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
index f483ca164..b4ccfbac7 100644
--- a/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
+++ b/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
@@ -23,16 +23,11 @@ import { GlobalStateDbManager } from '@/src/store';
 
 export type InterpolationType = 'discrete' | 'linear' | 'exact';
 
-const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
-  model,
-  okSignalPromise,
-  cancel,
-  layerId,
-}) => {
-  if (!layerId) {
+const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = props => {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
@@ -42,7 +37,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
 
   const stateDb = GlobalStateDbManager.getInstance().getStateDb();
 
-  const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
+  const { bandRows, setBandRows, loading } = useGetBandInfo(props.model, layer);
 
   const [layerState, setLayerState] = useState<ReadonlyJSONObject>();
   const [selectedBand, setSelectedBand] = useState(1);
@@ -62,12 +57,12 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
   useEffect(() => {
     populateOptions();
 
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -87,7 +82,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
 
   const populateOptions = async () => {
     const layerState = (await stateDb?.fetch(
-      `jupytergis:${layerId}`,
+      `jupytergis:${props.layerId}`,
     )) as ReadonlyJSONObject;
 
     setLayerState(layerState);
@@ -158,13 +153,16 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
   };
 
   const handleOk = () => {
+    if (!props.layerId) {
+      throw new Error('layerId is required for SingleBandPseudoColor component');
+    }
     // Update source
     const bandRow = bandRowsRef.current[selectedBand - 1];
     if (!bandRow) {
       return;
     }
     const sourceId = layer.parameters?.source;
-    const source = model.getSource(sourceId);
+    const source = props.model.getSource(sourceId);
 
     if (!source || !source.parameters) {
       return;
@@ -178,7 +176,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
 
     source.parameters.urls[0] = sourceInfo;
 
-    model.sharedModel.updateSource(sourceId, source);
+    props.model.sharedModel.updateSource(sourceId, source);
 
     // Update layer
     if (!layer.parameters) {
@@ -260,8 +258,8 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
     layer.parameters.color = colorExpr;
     layer.type = 'WebGlLayer';
 
-    model.sharedModel.updateLayer(layerId, layer);
-    cancel();
+    props.model.sharedModel.updateLayer(props.layerId, layer);
+    props.cancel();
   };
 
   const addStopRow = () => {
@@ -297,7 +295,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
     let stops: number[] = [];
 
     const currentBand = bandRows[selectedBand - 1];
-    const source = model.getSource(layer?.parameters?.source);
+    const source = props.model.getSource(layer?.parameters?.source);
     const sourceInfo = source?.parameters?.urls[0];
     const nClasses = selectedMode === 'continuous' ? 52 : +numberOfShades;
 
diff --git a/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx b/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
index 666401ec2..480f5eba2 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/VectorRendering.tsx
@@ -101,29 +101,23 @@ const useLayerRenderType = (
     setSelectedRenderType(renderType);
   }, []);
 
-const VectorRendering: React.FC<ISymbologyDialogProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-}) => {
+const VectorRendering: React.FC<ISymbologyDialogProps> = props => {
   const [selectedRenderType, setSelectedRenderType] = useState<
     VectorRenderType | undefined
   >();
   const [symbologyTab, setSymbologyTab] = useState<SymbologyTab>('color');
 
-  if (!layerId) {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
 
   const { featureProperties, isLoading: featuresLoading } = useGetProperties({
-    layerId,
-    model: model,
+    layerId: props.layerId,
+    model: props.model,
   });
 
   useLayerRenderType(layer, setSelectedRenderType);
@@ -186,11 +180,11 @@ const VectorRendering: React.FC<ISymbologyDialogProps> = ({
       </div>
 
       <selectedRenderTypeProps.component
-        model={model}
-        state={state}
-        okSignalPromise={okSignalPromise}
-        cancel={cancel}
-        layerId={layerId}
+        model={props.model}
+        state={props.state}
+        okSignalPromise={props.okSignalPromise}
+        cancel={props.cancel}
+        layerId={props.layerId}
         {...(selectedRenderTypeProps.isTabbed ? { symbologyTab } : {})}
         {...(selectedRenderTypeProps.selectableAttributesAndValues
           ? {
diff --git a/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx b/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx
index c1ead96ac..3736b05e2 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/components/ValueSelect.tsx
@@ -6,24 +6,20 @@ interface IValueSelectProps {
   setSelectedValue: (value: string) => void;
 }
 
-const ValueSelect: React.FC<IValueSelectProps> = ({
-  featureProperties,
-  selectedValue,
-  setSelectedValue,
-}) => {
+const ValueSelect: React.FC<IValueSelectProps> = props => {
   return (
     <div className="jp-gis-symbology-row">
       <label htmlFor={'vector-value-select'}>Value:</label>
       <select
         name={'vector-value-select'}
-        onChange={event => setSelectedValue(event.target.value)}
+        onChange={event => props.setSelectedValue(event.target.value)}
         className="jp-mod-styled"
       >
-        {Object.keys(featureProperties).map((feature, index) => (
+        {Object.keys(props.featureProperties).map((feature, index) => (
           <option
             key={index}
             value={feature}
-            selected={feature === selectedValue}
+            selected={feature === props.selectedValue}
             className="jp-mod-styled"
           >
             {feature}
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx
index cb55557f1..4ea2fd0c0 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Canonical.tsx
@@ -5,32 +5,25 @@ import React, { useEffect, useRef, useState } from 'react';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
 import { ISymbologyDialogWithAttributesProps } from '../../symbologyDialog';
 
-const Canonical: React.FC<ISymbologyDialogWithAttributesProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-  selectableAttributesAndValues,
-}) => {
+const Canonical: React.FC<ISymbologyDialogWithAttributesProps> = props => {
   const selectedValueRef = useRef<string>();
   const [selectedValue, setSelectedValue] = useState('');
 
-  if (!layerId) {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
 
   useEffect(() => {
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk, this);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -40,16 +33,19 @@ const Canonical: React.FC<ISymbologyDialogWithAttributesProps> = ({
     const layerParams = layer.parameters as IVectorLayer;
     const value =
       layerParams.symbologyState?.value ??
-      Object.keys(selectableAttributesAndValues)[0];
+      Object.keys(props.selectableAttributesAndValues)[0];
 
     setSelectedValue(value);
-  }, [selectableAttributesAndValues]);
+  }, [props.selectableAttributesAndValues]);
 
   useEffect(() => {
     selectedValueRef.current = selectedValue;
   }, [selectedValue]);
 
   const handleOk = () => {
+    if (!props.layerId) {
+      throw new Error('Layer ID is required for symbology update');
+    }
     if (!layer.parameters) {
       return;
     }
@@ -71,12 +67,12 @@ const Canonical: React.FC<ISymbologyDialogWithAttributesProps> = ({
       layer.type = 'VectorLayer';
     }
 
-    model.sharedModel.updateLayer(layerId, layer);
-    cancel();
+    props.model.sharedModel.updateLayer(props.layerId, layer);
+    props.cancel();
   };
 
   const body = (() => {
-    if (Object.keys(selectableAttributesAndValues)?.length === 0) {
+    if (Object.keys(props.selectableAttributesAndValues)?.length === 0) {
       return (
         <p className="errors">
           This symbology type is not available; no attributes contain a hex
@@ -86,7 +82,7 @@ const Canonical: React.FC<ISymbologyDialogWithAttributesProps> = ({
     } else {
       return (
         <ValueSelect
-          featureProperties={selectableAttributesAndValues}
+          featureProperties={props.selectableAttributesAndValues}
           selectedValue={selectedValue}
           setSelectedValue={setSelectedValue}
         />
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
index fc7fcf002..1d9f5c6b0 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
@@ -13,15 +13,7 @@ import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
 import { SymbologyTab } from '@/src/types';
 
-const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-  symbologyTab,
-  selectableAttributesAndValues,
-}) => {
+const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = props => {
   const selectedAttributeRef = useRef<string>();
   const stopRowsRef = useRef<IStopRow[]>();
   const colorRampOptionsRef = useRef<ReadonlyJSONObject | undefined>();
@@ -39,10 +31,10 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   });
   const manualStyleRef = useRef(manualStyle);
 
-  if (!layerId) {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
@@ -52,12 +44,12 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
 
     setStopRows(valueColorPairs);
 
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk, this);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -93,7 +85,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
         radius: layer.parameters.color['circle-radius'] || 5,
       });
     }
-  }, [layerId]);
+  }, [props.layerId]);
 
   useEffect(() => {
     manualStyleRef.current = manualStyle;
@@ -104,10 +96,10 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     const layerParams = layer.parameters as IVectorLayer;
     const attribute =
       layerParams.symbologyState?.value ??
-      Object.keys(selectableAttributesAndValues)[0];
+      Object.keys(props.selectableAttributesAndValues)[0];
 
     setSelectedAttribute(attribute);
-  }, [selectableAttributesAndValues]);
+  }, [props.selectableAttributesAndValues]);
 
   useEffect(() => {
     selectedAttributeRef.current = selectedAttribute;
@@ -129,7 +121,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     });
 
     const stops = Array.from(
-      selectableAttributesAndValues[selectedAttribute],
+      props.selectableAttributesAndValues[selectedAttribute],
     ).sort((a, b) => a - b);
 
     const valueColorPairs = Utils.getValueColorPairs(
@@ -142,6 +134,9 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   };
 
   const handleOk = () => {
+    if (!props.layerId) {
+      throw new Error('layerId is required for Categorized component');
+    }
     if (!layer.parameters) {
       return;
     }
@@ -157,7 +152,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
         expr.push(stop.output);
       });
 
-      if (symbologyTab === 'color') {
+      if (props.symbologyTab === 'color') {
         expr.push([0, 0, 0, 0.0]); // fallback color
 
         newStyle['fill-color'] = expr;
@@ -181,7 +176,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       colorRamp: colorRampOptionsRef.current?.selectedRamp,
       nClasses: colorRampOptionsRef.current?.numberOfShades,
       mode: colorRampOptionsRef.current?.selectedMode,
-      symbologyTab,
+      symbologyTab: props.symbologyTab,
     };
 
     layer.parameters.symbologyState = symbologyState;
@@ -191,11 +186,14 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       layer.type = 'VectorLayer';
     }
 
-    model.sharedModel.updateLayer(layerId, layer);
-    cancel();
+    props.model.sharedModel.updateLayer(props.layerId, layer);
+    props.cancel();
   };
 
   const handleReset = (method: SymbologyTab) => {
+    if (!props.layerId) {
+      throw new Error('layerId is required for Categorized component');
+    }
     if (!layer?.parameters) {
       return;
     }
@@ -225,11 +223,11 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
 
     layer.parameters.color = newStyle;
 
-    model.sharedModel.updateLayer(layerId, layer);
+    props.model.sharedModel.updateLayer(props.layerId, layer);
   };
 
   const body = (() => {
-    if (Object.keys(selectableAttributesAndValues).length === 0) {
+    if (Object.keys(props.selectableAttributesAndValues).length === 0) {
       return (
         <p className="errors">
           This symbology type is not available; no attributes contain numeric
@@ -240,14 +238,14 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       return (
         <>
           <ValueSelect
-            featureProperties={selectableAttributesAndValues}
+            featureProperties={props.selectableAttributesAndValues}
             selectedValue={selectedAttribute}
             setSelectedValue={setSelectedAttribute}
           />
 
           <div className="jp-gis-layer-symbology-container">
             {/* Inputs depending on active tab */}
-            {symbologyTab === 'color' && (
+            {props.symbologyTab === 'color' && (
               <>
                 <div className="jp-gis-symbology-row">
                   <label>Fill Color:</label>
@@ -295,7 +293,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
               </>
             )}
 
-            {symbologyTab === 'radius' && (
+            {props.symbologyTab === 'radius' && (
               <div className="jp-gis-symbology-row">
                 <label>Circle Radius:</label>
                 <input
@@ -319,7 +317,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
               modeOptions={[]}
               classifyFunc={buildColorInfoFromClassification}
               showModeRow={false}
-              showRampSelector={symbologyTab === 'color'}
+              showRampSelector={props.symbologyTab === 'color'}
             />
             <StopContainer
               selectedMethod={''}
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
index ec18970cc..aac5c9daf 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
@@ -14,15 +14,7 @@ import {
 import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
 
-const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-  symbologyTab,
-  selectableAttributesAndValues,
-}) => {
+const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = props => {
   const modeOptions = [
     'quantile',
     'equal interval',
@@ -55,10 +47,10 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   const colorManualStyleRef = useRef(colorManualStyle);
   const radiusManualStyleRef = useRef(radiusManualStyle);
 
-  if (!layerId) {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
@@ -66,12 +58,12 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   useEffect(() => {
     updateStopRowsBasedOnLayer();
 
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk, this);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -107,19 +99,19 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
         radius: layer.parameters.color['circle-radius'] || 5,
       });
     }
-  }, [layerId]);
+  }, [props.layerId]);
 
   useEffect(() => {
     colorStopRowsRef.current = colorStopRows;
     radiusStopRowsRef.current = radiusStopRows;
     selectableAttributeRef.current = selectedAttribute;
-    symbologyTabRef.current = symbologyTab;
+    symbologyTabRef.current = props.symbologyTab;
     colorRampOptionsRef.current = colorRampOptions;
   }, [
     colorStopRows,
     radiusStopRows,
     selectedAttribute,
-    symbologyTab,
+    props.symbologyTab,
     colorRampOptions,
   ]);
 
@@ -132,10 +124,10 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     const layerParams = layer.parameters as IVectorLayer;
     const attribute =
       layerParams.symbologyState?.value ??
-      Object.keys(selectableAttributesAndValues)[0];
+      Object.keys(props.selectableAttributesAndValues)[0];
 
     setSelectedAttribute(attribute);
-  }, [selectableAttributesAndValues]);
+  }, [props.selectableAttributesAndValues]);
 
   const updateStopRowsBasedOnLayer = () => {
     if (!layer) {
@@ -147,6 +139,9 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   };
 
   const handleOk = () => {
+    if (!props.layerId) {
+      throw new Error('layerId is required for Graduated component');
+    }
     if (!layer.parameters) {
       return;
     }
@@ -206,8 +201,8 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       layer.type = 'VectorLayer';
     }
 
-    model.sharedModel.updateLayer(layerId, layer);
-    cancel();
+    props.model.sharedModel.updateLayer(props.layerId, layer);
+    props.cancel();
   };
 
   const buildColorInfoFromClassification = (
@@ -223,7 +218,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
 
     let stops;
 
-    const values = Array.from(selectableAttributesAndValues[selectedAttribute]);
+    const values = Array.from(props.selectableAttributesAndValues[selectedAttribute]);
 
     switch (selectedMode) {
       case 'quantile':
@@ -262,11 +257,11 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     }
 
     const stopOutputPairs =
-      symbologyTab === 'radius'
+      props.symbologyTab === 'radius'
         ? stops.map(v => ({ stop: v, output: v }))
         : Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
 
-    if (symbologyTab === 'radius') {
+    if (props.symbologyTab === 'radius') {
       setRadiusStopRows(stopOutputPairs);
     } else {
       setColorStopRows(stopOutputPairs);
@@ -274,6 +269,9 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   };
 
   const handleReset = (method: string) => {
+    if (!props.layerId) {
+      throw new Error('layerId is required for Graduated component');
+    }
     if (!layer?.parameters) {
       return;
     }
@@ -294,11 +292,11 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     }
 
     layer.parameters.color = newStyle;
-    model.sharedModel.updateLayer(layerId, layer);
+    props.model.sharedModel.updateLayer(props.layerId, layer);
   };
 
   const body = (() => {
-    if (Object.keys(selectableAttributesAndValues)?.length === 0) {
+    if (Object.keys(props.selectableAttributesAndValues)?.length === 0) {
       return (
         <p className="errors">
           This symbology type is not available; no attributes contain numeric
@@ -309,12 +307,12 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       return (
         <>
           <ValueSelect
-            featureProperties={selectableAttributesAndValues}
+            featureProperties={props.selectableAttributesAndValues}
             selectedValue={selectedAttribute}
             setSelectedValue={setSelectedAttribute}
           />
           <div className="jp-gis-layer-symbology-container">
-            {symbologyTab === 'color' && (
+            {props.symbologyTab === 'color' && (
               <>
                 <div className="jp-gis-symbology-row">
                   <label>Fill Color:</label>
@@ -361,7 +359,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
                 </div>
               </>
             )}
-            {symbologyTab === 'radius' && (
+            {props.symbologyTab === 'radius' && (
               <div className="jp-gis-symbology-row">
                 <label>Circle Radius:</label>
                 <input
@@ -385,13 +383,13 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
             modeOptions={modeOptions}
             classifyFunc={buildColorInfoFromClassification}
             showModeRow={true}
-            showRampSelector={symbologyTab === 'color'}
+            showRampSelector={props.symbologyTab === 'color'}
           />
           <StopContainer
-            selectedMethod={symbologyTab || 'color'}
-            stopRows={symbologyTab === 'color' ? colorStopRows : radiusStopRows}
+            selectedMethod={props.symbologyTab || 'color'}
+            stopRows={props.symbologyTab === 'color' ? colorStopRows : radiusStopRows}
             setStopRows={
-              symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows
+              props.symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows
             }
           />
         </>
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
index 6a9f378d9..525358bf3 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
@@ -4,17 +4,11 @@ import React, { useEffect, useRef, useState } from 'react';
 import CanvasSelectComponent from '@/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 
-const Heatmap: React.FC<ISymbologyDialogProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-}) => {
-  if (!layerId) {
+const Heatmap: React.FC<ISymbologyDialogProps> = props => {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer?.parameters) {
     return;
   }
@@ -32,12 +26,12 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
   useEffect(() => {
     populateOptions();
 
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk, this);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -59,6 +53,9 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
   };
 
   const handleOk = () => {
+    if (!props.layerId) {
+      throw new Error('Layer ID is required for symbology update');
+    }
     if (!layer.parameters) {
       return;
     }
@@ -80,9 +77,9 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
     layer.parameters.radius = heatmapOptionsRef.current.radius;
     layer.type = 'HeatmapLayer';
 
-    model.sharedModel.updateLayer(layerId, layer);
+    props.model.sharedModel.updateLayer(props.layerId, layer);
 
-    cancel();
+    props.cancel();
   };
 
   return (
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
index 5e6b06ec8..90acf48f8 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/SimpleSymbol.tsx
@@ -4,14 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ISymbologyTabbedDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
 import { IParsedStyle, parseColor } from '@/src/tools';
 
-const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
-  model,
-  state,
-  okSignalPromise,
-  cancel,
-  layerId,
-  symbologyTab,
-}) => {
+const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = props => {
   const styleRef = useRef<IParsedStyle>();
 
   const [style, setStyle] = useState<IParsedStyle>({
@@ -26,10 +19,10 @@ const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
   const joinStyleOptions = ['bevel', 'round', 'miter'];
   const capStyleOptions = ['butt', 'round', 'square'];
 
-  if (!layerId) {
+  if (!props.layerId) {
     return;
   }
-  const layer = model.getLayer(layerId);
+  const layer = props.model.getLayer(props.layerId);
   if (!layer) {
     return;
   }
@@ -57,12 +50,12 @@ const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
     };
     initStyle();
 
-    okSignalPromise.promise.then(okSignal => {
+    props.okSignalPromise.promise.then(okSignal => {
       okSignal.connect(handleOk, this);
     });
 
     return () => {
-      okSignalPromise.promise.then(okSignal => {
+      props.okSignalPromise.promise.then(okSignal => {
         okSignal.disconnect(handleOk, this);
       });
     };
@@ -73,6 +66,9 @@ const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
   }, [style]);
 
   const handleOk = () => {
+    if (!props.layerId) {
+      throw new Error('Layer ID is required for symbology update');
+    }
     if (!layer.parameters) {
       return;
     }
@@ -101,8 +97,8 @@ const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
       layer.type = 'VectorLayer';
     }
 
-    model.sharedModel.updateLayer(layerId, layer);
-    cancel();
+    props.model.sharedModel.updateLayer(props.layerId, layer);
+    props.cancel();
   };
 
   const renderColorTab = () => (
@@ -211,7 +207,7 @@ const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps> = ({
   return (
     <div className="jp-gis-layer-symbology-container">
       <p>Color all features the same way.</p>
-      {symbologyTab === 'color' ? renderColorTab() : renderRadiusTab()}
+      {props.symbologyTab === 'color' ? renderColorTab() : renderRadiusTab()}
     </div>
   );
 };
diff --git a/packages/base/src/mainview/CollaboratorPointers.tsx b/packages/base/src/mainview/CollaboratorPointers.tsx
index cd8cec206..1cb5febe8 100644
--- a/packages/base/src/mainview/CollaboratorPointers.tsx
+++ b/packages/base/src/mainview/CollaboratorPointers.tsx
@@ -18,15 +18,13 @@ export type ClientPointer = {
   lonLat: { latitude: number; longitude: number };
 };
 
-const CollaboratorPointers: React.FC<ICollaboratorPointersProps> = ({
-  clients,
-}) => {
+const CollaboratorPointers: React.FC<ICollaboratorPointersProps> = props => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      {clients &&
-        Object.values(clients).map(client => (
+      {props.clients &&
+        Object.values(props.clients).map(client => (
           <div
             className="jGIS-Popup-Wrapper"
             style={{
diff --git a/packages/base/src/mainview/FollowIndicator.tsx b/packages/base/src/mainview/FollowIndicator.tsx
index c364e72b5..109f85867 100644
--- a/packages/base/src/mainview/FollowIndicator.tsx
+++ b/packages/base/src/mainview/FollowIndicator.tsx
@@ -5,19 +5,17 @@ interface IFollowIndicatorProps {
   remoteUser: User.IIdentity | null | undefined;
 }
 
-export const FollowIndicator: React.FC<IFollowIndicatorProps> = ({
-  remoteUser,
-}) => {
-  return remoteUser?.display_name ? (
+export const FollowIndicator: React.FC<IFollowIndicatorProps> = props => {
+  return props.remoteUser?.display_name ? (
     <div
       style={{
         position: 'absolute',
         top: 1,
         right: 3,
-        background: remoteUser.color,
+        background: props.remoteUser.color,
       }}
     >
-      {`Following ${remoteUser.display_name}`}
+      {`Following ${props.remoteUser.display_name}`}
     </div>
   ) : null;
 };
diff --git a/packages/base/src/mainview/TemporalSlider.tsx b/packages/base/src/mainview/TemporalSlider.tsx
index 771ad1817..3251e2440 100644
--- a/packages/base/src/mainview/TemporalSlider.tsx
+++ b/packages/base/src/mainview/TemporalSlider.tsx
@@ -53,10 +53,7 @@ const stepMap = {
   year: millisecondsInDay * daysInYear,
 };
 
-const TemporalSlider: React.FC<ITemporalSliderProps> = ({
-  model,
-  filterStates,
-}) => {
+const TemporalSlider: React.FC<ITemporalSliderProps> = props => {
   const [layerId, setLayerId] = useState('');
   const [selectedFeature, setSelectedFeature] = useState('');
   const [range, setRange] = useState({ start: 0, end: 1 }); // min/max of current range being displayed
@@ -71,16 +68,16 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
   const layerIdRef = useRef('');
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
-  const { featureProperties } = useGetProperties({ layerId, model });
+  const { featureProperties } = useGetProperties({ layerId, model: props.model });
 
   useEffect(() => {
     // This is for when the selected layer changes
     const handleClientStateChanged = () => {
-      if (!model.localState?.selected?.value) {
+      if (!props.model.localState?.selected?.value) {
         return;
       }
 
-      const selectedLayerId = Object.keys(model.localState.selected.value)[0];
+      const selectedLayerId = Object.keys(props.model.localState.selected.value)[0];
 
       // reset
       if (selectedLayerId !== layerIdRef.current) {
@@ -112,19 +109,19 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
         Object.keys(newValue).length === 0 ||
         newValue.type !== oldValue.type
       ) {
-        model.toggleTemporalController();
+        props.model.toggleTemporalController();
       }
     };
 
     // Initial state
     handleClientStateChanged();
 
-    model.clientStateChanged.connect(handleClientStateChanged);
-    model.sharedLayersChanged.connect(handleLayerChange);
+    props.model.clientStateChanged.connect(handleClientStateChanged);
+    props.model.sharedLayersChanged.connect(handleLayerChange);
 
     return () => {
-      model.clientStateChanged.disconnect(handleClientStateChanged);
-      model.sharedLayersChanged.disconnect(handleLayerChange);
+      props.model.clientStateChanged.disconnect(handleClientStateChanged);
+      props.model.sharedLayersChanged.disconnect(handleLayerChange);
       removeFilter();
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -167,7 +164,7 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
     }
 
     // if we have state then remove the ms from the converted feature name
-    const currentState = filterStates[layerId];
+    const currentState = props.filterStates[layerId];
     const currentFeature = currentState?.feature.slice(0, -2);
     setValidFeatures(results);
     setSelectedFeature(currentFeature ?? results[0]);
@@ -208,7 +205,7 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
     );
 
     //using filter item as a state object to restore prev values
-    const currentState = filterStates[layerId];
+    const currentState = props.filterStates[layerId];
     const step =
       Object.values(filteredSteps).slice(-1)[0] ?? stepMap.millisecond;
 
@@ -220,12 +217,12 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
       end: currentState?.betweenMax ?? min + step,
     });
 
-    model.addFeatureAsMs(layerId, selectedFeature);
+    props.model.addFeatureAsMs(layerId, selectedFeature);
   }, [selectedFeature]);
 
   // minMax needs to be set before current value so the slider displays correctly
   useEffect(() => {
-    const currentState = filterStates[layerId];
+    const currentState = props.filterStates[layerId];
 
     setCurrentValue(
       typeof currentState?.value === 'number' ? currentState.value : minMax.min,
@@ -267,7 +264,7 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
       betweenMax: value + step,
     };
 
-    const layer = model.getLayer(layerId);
+    const layer = props.model.getLayer(layerId);
     if (!layer) {
       return;
     }
@@ -293,11 +290,11 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
 
     // Apply the updated filters to the layer
     layer.filters = { logicalOp, appliedFilters };
-    model.triggerLayerUpdate(layerId, layer);
+    props.model.triggerLayerUpdate(layerId, layer);
   };
 
   const removeFilter = () => {
-    const layer = model.getLayer(layerIdRef.current);
+    const layer = props.model.getLayer(layerIdRef.current);
     if (!layer) {
       return;
     }
@@ -318,7 +315,7 @@ const TemporalSlider: React.FC<ITemporalSliderProps> = ({
 
     // Apply the updated filters to the layer
     layer.filters = { logicalOp, appliedFilters };
-    model.triggerLayerUpdate(layerIdRef.current, layer);
+    props.model.triggerLayerUpdate(layerIdRef.current, layer);
   };
 
   const playAnimation = () => {
diff --git a/packages/base/src/panelview/components/filter-panel/FilterRow.tsx b/packages/base/src/panelview/components/filter-panel/FilterRow.tsx
index 0362b0761..a04fb8117 100644
--- a/packages/base/src/panelview/components/filter-panel/FilterRow.tsx
+++ b/packages/base/src/panelview/components/filter-panel/FilterRow.tsx
@@ -9,38 +9,38 @@ const FilterRow: React.FC<{
   filterRows: any;
   setFilterRows: any;
   deleteRow: () => void;
-}> = ({ index, features, filterRows, setFilterRows, deleteRow }) => {
+}> = props => {
   const operators = ['==', '!=', '>', '<', '>=', '<='];
 
   const [sortedFeatures, setSortedFeatures] = useState<{ [key: string]: any }>(
     {},
   );
   const [selectedFeature, setSelectedFeature] = useState(
-    filterRows[index].feature || Object.keys(features)[0],
+    props.filterRows[props.index].feature || Object.keys(props.features)[0],
   );
 
   // Ensure selected feature matches filter rows and proper values are displayed
   useEffect(() => {
-    setSelectedFeature(filterRows[index].feature);
-  }, [filterRows]);
+    setSelectedFeature(props.filterRows[props.index].feature);
+  }, [props.filterRows]);
 
   useEffect(() => {
-    const sortedKeys = Object.keys(features).sort();
+    const sortedKeys = Object.keys(props.features).sort();
     const sortedResult: { [key: string]: any } = {};
 
     for (const key of sortedKeys) {
       // Convert each Set to a sorted array
-      const sortedArray = Array.from(features[key]).sort();
+      const sortedArray = Array.from(props.features[key]).sort();
       sortedResult[key] = sortedArray;
     }
 
     setSortedFeatures(sortedResult);
-  }, [features]);
+  }, [props.features]);
 
   // Update the value when a new feature is selected
   useEffect(() => {
     const valueSelect = document.getElementById(
-      `jp-gis-value-select-${index}`,
+      `jp-gis-value-select-${props.index}`,
     ) as HTMLSelectElement;
 
     if (!valueSelect) {
@@ -52,26 +52,26 @@ const FilterRow: React.FC<{
   }, [selectedFeature]);
 
   const onValueChange = (value: string | number) => {
-    const newFilters = [...filterRows];
+    const newFilters = [...props.filterRows];
     const isNum = typeof sortedFeatures[selectedFeature][0] === 'number';
 
-    newFilters[index].value = isNum ? +value : value;
-    setFilterRows(newFilters);
+    newFilters[props.index].value = isNum ? +value : value;
+    props.setFilterRows(newFilters);
   };
 
   const handleKeyChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const newFilters = [...filterRows];
-    newFilters[index].feature = event.target.value;
+    const newFilters = [...props.filterRows];
+    newFilters[props.index].feature = event.target.value;
     setSelectedFeature(event.target.value);
-    setFilterRows(newFilters);
+    props.setFilterRows(newFilters);
   };
 
   const handleOperatorChange = (
     event: React.ChangeEvent<HTMLSelectElement>,
   ) => {
-    const newFilters = [...filterRows];
-    newFilters[index].operator = event.target.value;
-    setFilterRows(newFilters);
+    const newFilters = [...props.filterRows];
+    newFilters[props.index].operator = event.target.value;
+    props.setFilterRows(newFilters);
   };
 
   const handleValueChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -81,7 +81,7 @@ const FilterRow: React.FC<{
   return (
     <div className="jp-gis-filter-row">
       <select
-        id={`jp-gis-feature-select-${index}`}
+        id={`jp-gis-feature-select-${props.index}`}
         className="jp-mod-styled rjsf"
         onChange={handleKeyChange}
       >
@@ -90,14 +90,14 @@ const FilterRow: React.FC<{
           <option
             key={featureIndex}
             value={feature}
-            selected={feature === filterRows[index].feature}
+            selected={feature === props.filterRows[props.index].feature}
           >
             {feature}
           </option>
         ))}
       </select>
       <select
-        id={`jp-gis-operator-select-${index}`}
+        id={`jp-gis-operator-select-${props.index}`}
         className="jp-mod-styled rjsf"
         onChange={handleOperatorChange}
       >
@@ -105,14 +105,14 @@ const FilterRow: React.FC<{
           <option
             key={operatorIndex}
             value={operator}
-            selected={operator === filterRows[index].operator}
+            selected={operator === props.filterRows[props.index].operator}
           >
             {operator}
           </option>
         ))}
       </select>
       <select
-        id={`jp-gis-value-select-${index}`}
+        id={`jp-gis-value-select-${props.index}`}
         className="jp-mod-styled rjsf"
         onChange={handleValueChange}
       >
@@ -122,17 +122,17 @@ const FilterRow: React.FC<{
             <option
               key={valueIndex}
               value={value}
-              selected={value === filterRows[index].value}
+              selected={value === props.filterRows[props.index].value}
             >
               {value}
             </option>
           ))}
       </select>
       <Button
-        id={`jp-gis-remove-filter-${index}`}
+        id={`jp-gis-remove-filter-${props.index}`}
         className="jp-Button jp-gis-filter-icon"
       >
-        <FontAwesomeIcon icon={faTrash} onClick={deleteRow} />
+        <FontAwesomeIcon icon={faTrash} onClick={props.deleteRow} />
       </Button>
     </div>
   );
diff --git a/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx b/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
index 842f1111f..6750a9f75 100644
--- a/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
+++ b/packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx
@@ -50,10 +50,7 @@ interface IIdentifyComponentProps {
   tracker: IJupyterGISTracker;
 }
 
-const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
-  controlPanelModel,
-  tracker,
-}) => {
+const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = props => {
   const [widgetId, setWidgetId] = useState('');
   const [features, setFeatures] = useState<IDict<any>>();
   const [visibleFeatures, setVisibleFeatures] = useState<IDict<any>>({
@@ -61,36 +58,36 @@ const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
   });
   const [remoteUser, setRemoteUser] = useState<User.IIdentity | null>(null);
   const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    controlPanelModel?.jGISModel,
+    props.controlPanelModel?.jGISModel,
   );
 
   const featuresRef = useRef(features);
   /**
    * Update the model when it changes.
    */
-  controlPanelModel?.documentChanged.connect((_, widget) => {
+  props.controlPanelModel?.documentChanged.connect((_, widget) => {
     setJgisModel(widget?.model);
   });
 
   // Reset state values when current widget changes
   useEffect(() => {
     const handleCurrentChanged = () => {
-      if (tracker.currentWidget?.id === widgetId) {
+      if (props.tracker.currentWidget?.id === widgetId) {
         return;
       }
 
-      if (tracker.currentWidget) {
-        setWidgetId(tracker.currentWidget.id);
+      if (props.tracker.currentWidget) {
+        setWidgetId(props.tracker.currentWidget.id);
       }
       setFeatures({});
       setVisibleFeatures({ 0: true });
     };
-    tracker.currentChanged.connect(handleCurrentChanged);
+    props.tracker.currentChanged.connect(handleCurrentChanged);
 
     return () => {
-      tracker.currentChanged.disconnect(handleCurrentChanged);
+      props.tracker.currentChanged.disconnect(handleCurrentChanged);
     };
-  }, []);
+  }, [props.tracker]);
 
   useEffect(() => {
     featuresRef.current = features;
diff --git a/packages/base/src/statusbar/StatusBar.tsx b/packages/base/src/statusbar/StatusBar.tsx
index 2563dd49c..d3e5524b0 100644
--- a/packages/base/src/statusbar/StatusBar.tsx
+++ b/packages/base/src/statusbar/StatusBar.tsx
@@ -16,17 +16,12 @@ interface IStatusBarProps {
   projection?: { code: string; units: string };
   scale: number;
 }
-const StatusBar: React.FC<IStatusBarProps> = ({
-  jgisModel,
-  loading,
-  projection,
-  scale,
-}) => {
+const StatusBar: React.FC<IStatusBarProps> = props => {
   const [coords, setCoords] = useState<JgisCoordinates>({ x: 0, y: 0 });
 
   useEffect(() => {
     const handleClientStateChanged = () => {
-      const pointer = jgisModel?.localState?.pointer?.value;
+      const pointer = props.jgisModel?.localState?.pointer?.value;
 
       if (!pointer) {
         return;
@@ -35,16 +30,16 @@ const StatusBar: React.FC<IStatusBarProps> = ({
       setCoords({ x: pointer?.coordinates.x, y: pointer?.coordinates.y });
     };
 
-    jgisModel.clientStateChanged.connect(handleClientStateChanged);
+    props.jgisModel.clientStateChanged.connect(handleClientStateChanged);
 
     return () => {
-      jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
+      props.jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
     };
-  }, [jgisModel]);
+  }, [props.jgisModel]);
 
   return (
     <div className="jgis-status-bar">
-      {loading && (
+      {props.loading && (
         <div style={{ width: '16%', padding: '0 6px' }}>
           <Progress height={14} />
         </div>
@@ -61,13 +56,13 @@ const StatusBar: React.FC<IStatusBarProps> = ({
       </div>
       <div className="jgis-status-bar-item">
         <FontAwesomeIcon icon={faRuler} />{' '}
-        <span>Scale: 1: {Math.trunc(scale)}</span>
+        <span>Scale: 1: {Math.trunc(props.scale)}</span>
       </div>
       <div className="jgis-status-bar-item">
         <FontAwesomeIcon icon={faGlobe} />{' '}
-        <span>{projection?.code ?? null}</span>
+        <span>{props.projection?.code ?? null}</span>
       </div>
-      <div className="jgis-status-bar-item">Units: {projection?.units}</div>
+      <div className="jgis-status-bar-item">Units: {props.projection?.units}</div>
     </div>
   );
 };