Fixed Request Nov V.1

src/components/NavigationComponents/Header/CustomHeaderSummaryTable.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import type { CustomHeaderProps } from 'ag-grid-react';
+
+import { usePageRouter } from '@/hooks/usePageRouter';
+import { getHeaderColomnColor } from '@/utils/functions/getColorStyle';
+
+type SortOrder = 'asc' | 'desc' | null;
+
+const CustomHeaderSummaryTable = (props: CustomHeaderProps) => {
+  const { styleName } = usePageRouter();
+  const [ascSort, setAscSort] = useState('inactive');
+  const [descSort, setDescSort] = useState('inactive');
+
+  useEffect(() => {
+    const sortModel = props.api
+      .getColumnState()
+      .find((col) => col.colId === props.column.getColId());
+
+    if (!sortModel || !sortModel.sort) {
+      setAscSort('inactive');
+      setDescSort('inactive');
+    } else if (sortModel.sort === 'asc') {
+      setAscSort('active');
+      setDescSort('inactive');
+    } else if (sortModel.sort === 'desc') {
+      setAscSort('inactive');
+      setDescSort('active');
+    }
+  }, [props.api, props.column]);
+
+  const handleSortRequest = useCallback(
+    (
+      order: SortOrder,
+      event:
+        | React.MouseEvent<HTMLButtonElement>
+        | React.TouchEvent<HTMLButtonElement>,
+    ) => {
+      props.setSort(order, event.shiftKey);
+
+      if (order === 'asc') {
+        setAscSort('active');
+        setDescSort('inactive');
+      } else if (order === 'desc') {
+        setAscSort('inactive');
+        setDescSort('active');
+      } else {
+        setAscSort('inactive');
+        setDescSort('inactive');
+      }
+    },
+    [props],
+  );
+
+  const renderSortButtons = () => {
+    if (!props.enableSorting) return null;
+    return (
+      <div className="sort-buttons" style={{ display: 'flex' }}>
+        <button
+          type="button"
+          onClick={(event) => handleSortRequest('asc', event)}
+          onTouchEnd={(event) => handleSortRequest('asc', event)}
+          className={`customSortUpLabel ${ascSort}`}
+        >
+          <i className="fa fa-long-arrow-alt-up"></i>
+        </button>
+        <button
+          type="button"
+          onClick={(event) => handleSortRequest('desc', event)}
+          onTouchEnd={(event) => handleSortRequest('desc', event)}
+          className={`customSortDownLabel ${descSort}`}
+        >
+          <i className="fa fa-long-arrow-alt-down"></i>
+        </button>
+      </div>
+    );
+  };
+
+  return (
+    <div className="customHeaderLabel-box">
+      <div
+        className="customHeaderLabel"
+        style={{ color: getHeaderColomnColor(styleName!) }}
+      >
+        {props.displayName}
+      </div>
+      {renderSortButtons()}
+    </div>
+  );
+};
+
+export default CustomHeaderSummaryTable;

src/components/PresentationComponents/BarGraph/BarGraph.tsx

@@ -224,6 +224,16 @@ function BarGraph() {
     [],
   );
 
+  const handleClearAll = useCallback(() => {
+    setChips([]);
+    setYAxes([]);
+    setError(true);
+    setBarOptions((prevOptions) => ({
+      ...prevOptions,
+      y_vars: '',
+    }));
+  }, []);
+
   if (isLoading) {
     return (
       <div className="Skeleton-loading">
@@ -246,6 +256,7 @@ function BarGraph() {
         selectedOptions={barGraphOptions}
         handleChange={handleChangeBarGraphOption}
         handleChangeMultipleYSelected={handleChangeBarGraphChipYSelected}
+        handleClearAll={handleClearAll}
         maxWidth={maxWidth}
         XFieldText={'X Field'}
         YFieldText={'Multi-Selector Y-Field'}

src/components/PresentationComponents/GlobalSearch/GlobalHomeNavigations.tsx

@@ -45,13 +45,27 @@ const GlobalHomeNavigations = () => {
           <div className="voyages-people-places-title">
             {translatedHomepage.navigatorTitleVoyages}
           </div>
-          <Link to={`${TRANSATLANTICPAGE}#voyages`} onClick={handleHomeSearch}>
+          <button
+            type="button"
+            onClick={() => {
+              handleHomeSearch();
+              window.location.assign(`${TRANSATLANTICPAGE}#voyages`);
+            }}
+            className="voyages-people-places-link-btn"
+            aria-label={translatedHomepage.navigatorTitleVoyages}
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+            }}
+          >
             <img
               src={voyageIcon}
               alt="Search by Vessels"
               style={{ opacity: 0.65 }}
             />
-          </Link>
+          </button>
           <div className="voyages-people-places-subtitle">
             {translatedHomepage.navigatorSubTitleVoyages}
           </div>
@@ -60,18 +74,27 @@ const GlobalHomeNavigations = () => {
           <div className="voyages-people-places-title">
             {translatedHomepage.navigatorTitlePeople}
           </div>
-          <Link
-            to={`/${PASTHOMEPAGE}`}
+          <button
+            type="button"
+            className="voyages-people-places-link-btn"
             onClick={() => {
               const keysToRemove = Object.keys(localStorage);
               keysToRemove.forEach((key) => {
                 localStorage.removeItem(key);
               });
               dispatch(setPathNameEnslaved(ALLENSLAVED));
+              window.location.assign(`/${PASTHOMEPAGE}`);
+            }}
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
             }}
+            aria-label={translatedHomepage.navigatorTitlePeople}
           >
             <img src={peopleIcon} alt="People" style={{ opacity: 0.65 }} />
-          </Link>
+          </button>
           <div className="voyages-people-places-subtitle">
             {translatedHomepage.navigatorSubTitlePeople}
           </div>
@@ -81,7 +104,11 @@ const GlobalHomeNavigations = () => {
             {translatedHomepage.navigatorTitleTimelapse}
           </div>
           <Link to={`${TRANSATLANTICTIMELAPSE}#timelapse`}>
-            <img src={timelapseIcon} alt="Timelapse" />
+            <img
+              src={timelapseIcon}
+              alt="Timelapse"
+              style={{ opacity: 0.65 }}
+            />
           </Link>
           <div className="voyages-people-places-subtitle">
             <div>{translatedHomepage.navigatorSubTitleTimelapse}</div>
@@ -93,7 +120,12 @@ const GlobalHomeNavigations = () => {
             {translatedHomepage.navigatorTitleWriting}
           </div>
           <Link to={`/${BLOGPAGE}`}>
-            <img src={resourceIcon} alt="Writing" width={129} />
+            <img
+              src={resourceIcon}
+              alt="Writing"
+              width={129}
+              style={{ opacity: 0.65 }}
+            />
           </Link>
           <div className="voyages-people-places-subtitle">
             {translatedHomepage.navigatorSubTitleWriting}

src/components/PresentationComponents/Map/HandleZoomEvent.tsx

@@ -1,3 +1,11 @@
+import { useEffect } from 'react';
+
+import L from 'leaflet';
+import { useMap, useMapEvents } from 'react-leaflet';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setHasFetchedRegion } from '@/redux/getNodeEdgesAggroutesMapDataSlice';
+import { AppDispatch, RootState } from '@/redux/store';
 import {
   ESTIMATES,
   PLACE,
@@ -7,12 +15,6 @@ import {
   broadRegion,
 } from '@/share/CONST_DATA';
 import { HandleZoomEventProps } from '@/share/InterfaceTypesMap';
-import { useMap, useMapEvents } from 'react-leaflet';
-import L from 'leaflet';
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, RootState } from '@/redux/store';
-import { setHasFetchedRegion } from '@/redux/getNodeEdgesAggroutesMapDataSlice';
 
 export const HandleZoomEvent: React.FC<HandleZoomEventProps> = ({
   setZoomLevel,
@@ -23,7 +25,7 @@ export const HandleZoomEvent: React.FC<HandleZoomEventProps> = ({
   const map = useMap();
   const dispatch: AppDispatch = useDispatch();
   const { nodesData } = useSelector(
-    (state: RootState) => state.getNodeEdgesAggroutesMapData
+    (state: RootState) => state.getNodeEdgesAggroutesMapData,
   );
   const oceanic_animation_edges_layer_group = L.layerGroup();
   const oceanic_main_edges_layer_group = L.layerGroup();
@@ -37,7 +39,7 @@ export const HandleZoomEvent: React.FC<HandleZoomEventProps> = ({
       oceanic_edges_holding_layer_group.addTo(map);
       oceanic_main_edges_layer_group.addTo(oceanic_edges_holding_layer_group);
       oceanic_animation_edges_layer_group.addTo(
-        oceanic_edges_holding_layer_group
+        oceanic_edges_holding_layer_group,
       );
       endpoint_main_edges_layer_group.addTo(map);
       endpoint_animation_edges_layer_group.addTo(map);
@@ -53,7 +55,16 @@ export const HandleZoomEvent: React.FC<HandleZoomEventProps> = ({
         map.removeLayer(oceanic_edges_holding_layer_group);
       }
     };
-  }, [map, setZoomLevel, zoomLevel]);
+  }, [
+    endpoint_animation_edges_layer_group,
+    endpoint_main_edges_layer_group,
+    map,
+    oceanic_animation_edges_layer_group,
+    oceanic_edges_holding_layer_group,
+    oceanic_main_edges_layer_group,
+    setZoomLevel,
+    zoomLevel,
+  ]);
 
   useMapEvents({
     zoomend: () => {
@@ -67,23 +78,21 @@ export const HandleZoomEvent: React.FC<HandleZoomEventProps> = ({
         }
         if (styleRouteName !== ESTIMATES) {
           if (newZoomLevel >= ZOOM_LEVEL_THRESHOLD) {
-            if(setRegionPlace){
+            if (setRegionPlace) {
               setRegionPlace(PLACE);
             }
-
           } else {
-            if(setRegionPlace){
+            if (setRegionPlace) {
               setRegionPlace(REGION);
             }
-
           }
         } else if (styleRouteName === ESTIMATES) {
           if (newZoomLevel >= ZOOM_LEVEL_REGION_ESTIMATE_MIN) {
-            if(setRegionPlace){
+            if (setRegionPlace) {
               setRegionPlace(REGION);
             }
           } else {
-            if(setRegionPlace) setRegionPlace(broadRegion);
+            if (setRegionPlace) setRegionPlace(broadRegion);
           }
         }
       }

src/components/PresentationComponents/Map/LeafletMap.tsx

@@ -252,6 +252,7 @@ export const LeafletMap = ({ setZoomLevel, zoomLevel }: LeafletMapProps) => {
     clusterNodeValue,
     filtersObj,
     currentBlockName,
+    regionPlace,
   ]);
 
   const handleDataResponse = (response: any, regionOrPlace: string) => {

src/components/PresentationComponents/PieGraph/PieGraph.tsx

@@ -213,11 +213,15 @@ function PieGraph() {
             width: '100%',
             maxWidth: chartWidth,
             height: chartHeight,
-            minHeight: 500,
+            minHeight: maxWidth < 768 ? 400 : chartHeight,
             border: '1px solid #ccc',
             marginTop: 18,
             overflow: 'auto',
             position: 'relative',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: maxWidth < 768 ? '10px' : '0',
           }}
         >
           <Plot
@@ -231,13 +235,17 @@ function PieGraph() {
                 textinfo: 'label+percent',
                 insidetextorientation: 'radial',
                 outsidetextfont: {
-                  size: 14,
+                  size: maxWidth < 768 ? 12 : 14,
                   color: '#333',
                   family: 'Arial, sans-serif',
                 },
                 hole: 0.1,
                 textposition: 'inside',
                 showlegend: showLegend,
+                domain: {
+                  x: [0, 1],
+                  y: [0, 1],
+                },
               },
             ]}
             layout={{
@@ -250,10 +258,17 @@ function PieGraph() {
               },
               font: {
                 family: 'Arial, sans-serif',
-                size: maxWidth < 500 ? 10 : 14,
+                size: maxWidth < 500 ? 9 : maxWidth < 768 ? 11 : 14,
                 color: '#333333',
               },
               autosize: true,
+              margin: {
+                l: maxWidth < 768 ? 10 : 40,
+                r: maxWidth < 768 ? 10 : 40,
+                t: maxWidth < 768 ? 70 : 80,
+                b: maxWidth < 768 ? 20 : 60,
+                pad: 4,
+              },
               legend: {
                 orientation: showLegend ? 'v' : 'h',
                 x: showLegend ? 1.02 : 0.5,