#221 - chore(frontend): Fix Maintainability/Reliability Issues - SonarQube

apps/frontend/src/app/components/AssetsDropdown.tsx

@@ -58,7 +58,7 @@ const AssetsDropdown = () => {
     const layerData = loadedLayers.find(
       (layer) => layer.asset_name === layerName,
     );
-    if (!layerData || !layerData.layer_url) {
+    if (!layerData?.layer_url) {
       toast.error(`Layer URL not found for ${layerName}`);
       return;
     }
@@ -120,9 +120,9 @@ const AssetsDropdown = () => {
                 [...loadedLayers]
                   .sort((a, b) => a.asset_name.localeCompare(b.asset_name))
                   .filter((a) => a.item_id === itemIds[sliderValue])
-                  .map((layer, index) => (
+                  .map((layer) => (
                     <button
-                      key={index}
+                      key={layer.asset_name}
                       className={`layerButton ${selectedAssetLayers.includes(layer.asset_name) ? 'active' : ''}`}
                       data-testid={`layerButton-${layer.asset_name}`}
                       onClick={() => handleLayerClick(layer.asset_name)}
@@ -132,7 +132,6 @@ const AssetsDropdown = () => {
                     </button>
                   ))
               ) : (
-                <>
                 <div
                   style={{
                     position: 'absolute',
@@ -152,7 +151,7 @@ const AssetsDropdown = () => {
                   <div className="spinner"></div>
                   <span>{t('loading_label')}</span>
                 </div>
-                </>
+
               )}
             </div>
           )}

apps/frontend/src/app/components/Footer.tsx

@@ -129,9 +129,9 @@ const Footer = () => {
     isDraggingRef.current = false;
     document.removeEventListener('mousemove', handleMouseMove);
     document.removeEventListener('mouseup', handleMouseUp);
-  
+
     const finalValue = pendingSliderRef.current;
-  
+
     setSliderValue(finalValue);
     const map = mapRef.current as Map;
     if (timeStamps.length > 0) {
@@ -171,7 +171,7 @@ const Footer = () => {
           timeStamps.length - 1,
         ),
       );
-  
+
       setPendingSliderValue(newValue);
       pendingSliderRef.current = newValue;
     }
@@ -232,14 +232,14 @@ const Footer = () => {
       ? parseInt(stringCurrentSliderValue)
       : 0;
     if (timestampsResponse) {
-      await setTimeStamps(timestampsResponse);
+      setTimeStamps(timestampsResponse);
 
       setSliderValue(currentSliderValue); // State update is async, so move changeLayer to useEffect
     }
     const itemIdsResponse = await fetchItemIds();
 
     if (Array.isArray(itemIdsResponse)) {
-      await setItemIds(itemIdsResponse);
+      setItemIds(itemIdsResponse);
 
       if (itemIdsResponse.length > 0) {
         await processLoadedLayers(itemIdsResponse[currentSliderValue]);
@@ -323,7 +323,6 @@ const Footer = () => {
         >
           <div className="sliderTrack">
             {timeStamps.length > 0 && (
-              <>
                 <div
                   className="timeMarkerThumb"
                   style={{
@@ -346,7 +345,6 @@ const Footer = () => {
                       : ''}
                   </span>
                 </div>
-              </>
             )}
           </div>
         </div>

apps/frontend/src/app/components/MapMetaData.tsx

@@ -41,6 +41,7 @@ const MapMetaData: React.FC<MapMetaDataProps> = ({
   datasetSource = '',
   visible,
   refreshDatasets,
+  onClose,
 }) => {
   const { t } = useTranslation();
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -75,35 +76,35 @@ const MapMetaData: React.FC<MapMetaDataProps> = ({
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     if (!containerRef.current) return;
-    
+
     setIsResizing(true);
     startXRef.current = e.clientX;
     startWidthRef.current = containerRef.current.offsetWidth;
-    
+
     // Hint browser about upcoming changes for better performance
     if (containerRef.current) {
       containerRef.current.style.willChange = 'width';
     }
-    
+
     e.preventDefault();
   }, []);
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
     if (!isResizing || !containerRef.current) return;
-    
+
     const dx = e.clientX - startXRef.current;
     let newWidth = startWidthRef.current + dx;
-    
+
     // Apply constraints
     newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
-    
+
     // DIRECT DOM UPDATE (no React state lag)
     containerRef.current.style.width = `${newWidth}px`;
   }, [isResizing, maxWidth, minWidth]);
 
   const handleMouseUp = useCallback(() => {
     if (!isResizing || !containerRef.current) return;
-    
+
     // Only update React state AFTER dragging finishes
     setWidth(containerRef.current.offsetWidth);
     containerRef.current.style.willChange = 'auto';
@@ -322,24 +323,26 @@ const MapMetaData: React.FC<MapMetaDataProps> = ({
   );
 
   const NonCollapsedMetaData = (
-    <div 
+    <div
       className="metadata-container"
       ref={containerRef}
       style={{ width: `${width}px` }}
       data-testid="metadata-container"
     >
-      <div className="header" onClick={toggleCollapse} data-testid="name-div">
-        {name || t('unknown_name')}
-        <span className="collapse-icon">
+      <button className="header-button" onClick={toggleCollapse} data-testid="name-div">
+        <div className="header">
+          {name || t('unknown_name')}
+          <span className="collapse-icon">
           <RiCollapseDiagonalFill size={20} />
-        </span>
-      </div>
+          </span>
+        </div>
+      </button>
       <div className="content">
         {[
           {
             label: t('description'),
             value: description,
-            testId: 'dataset-description',
+            testId: 'dataset-description'
           },
           { label: t('format'), value: format, testId: 'dataset-format' },
           {
@@ -379,7 +382,7 @@ const MapMetaData: React.FC<MapMetaDataProps> = ({
         <AssetsDropdown />
       </div>
       {/* Resize handle */}
-      <div 
+      <div
         className="resize-handle"
         ref={resizeRef}
         onMouseDown={handleMouseDown}
@@ -391,4 +394,4 @@ const MapMetaData: React.FC<MapMetaDataProps> = ({
   return <>{isCollapsed ? CollapsedMetaData : NonCollapsedMetaData}</>;
 };
 
-export default MapMetaData;
+export default MapMetaData;

apps/frontend/src/app/components/MapView.tsx

@@ -292,10 +292,10 @@ export const changeLayer = (
   timestamp?: string,
 ) => {
   if (collection) {
-    refreshLayer(map, (collection = true));
+    refreshLayer(map, true);
   }
   if (timestamp) {
-    refreshLayer(map, (collection = false), timestamp);
+    refreshLayer(map, false, timestamp);
   }
 };
 

apps/frontend/src/app/components/Sidebar.tsx

@@ -45,28 +45,45 @@ const Sidebar = () => {
         </button>
       ) : (
         <>
-          <div className='sidebar-toggle' onClick={toggleCollapse}>
-            <img className='icon' src={viewsIcon} alt={t('collapse')} />
-          </div>
+          <button className="sidebar-toggle-button" onClick={toggleCollapse} aria-label={t('collapse')}>
+            <div className="sidebar-toggle">
+              <img className="icon" src={viewsIcon} alt={t('collapse')} />
+            </div>
+          </button>
 
-          <img
-            className='layer-image'
-            src={defaultImage}
-            alt={t('default_layer')}
+          <button
+            className="layer-image-button"
             onClick={() => handleLayerChange('default')}
-          />
-          <img
-            className='layer-image'
-            src={terrainImage}
-            alt={t('topographical_layer')}
+            aria-label={t('default_layer')}
+          >
+            <img
+              className='layer-image'
+              src={defaultImage}
+              alt={t('default_layer')}
+            />
+          </button>
+          <button
+            className='layer-image-button'
             onClick={() => handleLayerChange('topographical')}
-          />
-          <img
-            className='layer-image'
-            src={satelliteImage}
-            alt={t('satellite_layer')}
+            aria-label={t('topographical_layer')}
+          >
+            <img
+              className='layer-image'
+              src={terrainImage}
+              alt={t('topographical_layer')}
+            />
+          </button>
+          <button
+            className='layer-image-button'
             onClick={() => handleLayerChange('satellite')}
-          />
+            aria-label={t('satellite_layer')}
+          >
+            <img
+              className='layer-image'
+              src={satelliteImage}
+              alt={t('satellite_layer')}
+            />
+          </button>
         </>
       )}
     </div>

apps/frontend/src/app/styles/MapMetaData.css

@@ -95,7 +95,20 @@
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
+.header-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+}
 
+.header-button .header {
+  display: flex;
+  align-items: center;
+}
 .content {
   padding: 12px;
   transition: max-height 0.3s ease, opacity 0.3s ease;

apps/frontend/src/app/styles/Sidebar.css

@@ -40,7 +40,15 @@
   align-items: center;
   outline: none;
 }
-
+.sidebar-toggle-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  height: auto;
+  cursor: pointer;
+}
 .icon {
   width: 30px;
   height: 30px;
@@ -50,7 +58,13 @@
 .icon:hover {
   transform: scale(1.05);
 }
-
+.layer-image-button {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+}
 .layer-image {
   width: 100%;
   height: auto;