feat: added layerName toggle to Layer Toggle switches

src/js/components/leftPanel/layersPanel/LayerToggleSwitch.tsx

@@ -7,7 +7,6 @@ import '../../../../css/layer-toggle-checkbox.scss';
 import { handleCustomColorTheme } from '../../../../utils';
 import { LAYER_IDS } from '../../../../../configs/layer-config';
 import { setProdesLayer } from '../../../store/appState/actions';
-import Switch from 'react-switch';
 import ToggleComponent from '../../ui/ToggleComponent';
 //Dynamic custom theme override using styled-components lib
 interface CheckBoxWrapperProps {
@@ -62,7 +61,13 @@ const LayerToggleSwitch = (props: LayerToggleProps): React.ReactElement => {
   return (
     <CheckboxWrapper customColorTheme={themeColor}>
       <div className="layer-checkbox">
-        <ToggleComponent themeColor={themeColor} onChange={toggleVisibility} checked={!!isChecked} disabled={isError} />
+        <ToggleComponent
+          themeColor={themeColor}
+          onChange={toggleVisibility}
+          checked={!!isChecked}
+          disabled={isError}
+          layerName={layerID}
+        />
         <label className="styled-checkboxlabel" htmlFor={`layer-checkbox-${layerID}`}>
           {layerID}
         </label>

src/js/components/ui/ToggleComponent.tsx

@@ -1,19 +1,34 @@
-import React from 'react';
+import { layer } from 'esri/views/3d/support/LayerPerformanceInfo';
+import React, { useEffect } from 'react';
 import Switch from 'react-switch';
 
 interface IToggleComponent {
   onChange: (checked: boolean) => void;
   checked: boolean;
   themeColor: string;
   disabled: boolean;
+  layerName?: string;
 }
 
 const ToggleComponent = (props: IToggleComponent) => {
-  const { onChange, checked, themeColor, disabled } = props;
+  const { onChange, checked, themeColor, disabled, layerName } = props;
+
+  useEffect(() => {
+    // The class, id, and data-layer-name are tied to Google Analytics. Allows WRI to track clicks on the layer checkboxes and the layer name.
+    if (!layerName) return;
+
+    const layerElement = document.querySelector(`[data-layer-name="${layerName}"]`);
+    if (checked) {
+      layerElement?.setAttribute('class', `layer-checkbox-on`);
+    } else {
+      layerElement?.removeAttribute('class');
+    }
+  }, [checked, layerName]);
+
   return (
     <div>
       <Switch
-        className="react-switch"
+        className={'react-switch' + (checked ? ' layer-checkbox-on' : '')}
         checkedIcon={false}
         height={13}
         width={25}
@@ -23,6 +38,8 @@ const ToggleComponent = (props: IToggleComponent) => {
         onChange={onChange}
         checked={checked}
         disabled={disabled}
+        id={`layer-checkbox-${layerName}`}
+        data-layer-name={layerName}
       />
     </div>
   );