[fix] Image export legend positioning

examples/demo-app/src/app.tsx

@@ -44,8 +44,8 @@
 // Sample data
 /* eslint-disable no-unused-vars */
 import sampleTripData, {testCsvData, sampleTripDataConfig} from './data/sample-trip-data';
 import sampleGeojson from './data/sample-small-geojson';
-import sampleGeojsonPoints from './data/sample-geojson-points';
+// import sampleGeojsonPoints from './data/sample-geojson-points';
 import sampleGeojsonConfig from './data/sample-geojson-config';
 import sampleH3Data, {config as h3MapConfig} from './data/sample-hex-id-csv';
 import sampleS2Data, {config as s2MapConfig, dataId as s2DataId} from './data/sample-s2-data';
@@ -160,11 +160,11 @@
     //   window.setTimeout(_showBanner, 3000);
     // }
     // load sample data
-    // _loadSampleData();
+    _loadSampleData();
 
     // Notifications
     // _loadMockNotifications();
   }, [dispatch, id, provider, query]);
 
   const _setStartScreenCapture = useCallback(
     flag => {
@@ -180,8 +180,7 @@
     [dispatch]
   );
 
-  // eslint-disable-next-line no-unused-vars
   const _showBanner = useCallback(() => {
     toggleShowBanner(true);
   }, [toggleShowBanner]);
 
@@ -542,7 +541,6 @@
     );
   }, []);
 
-  // eslint-disable-next-line no-unused-vars
   const _loadSampleData = useCallback(() => {
     // _loadPointData();
     // _loadGeojsonData();
@@ -554,8 +552,8 @@
     // _loadGpsData();
     // _loadRowData();
     // _loadVectorTileData();
-    _loadSyncedFilterWTripLayer();
-    _replaceSyncedFilterWTripLayer();
+    // _loadSyncedFilterWTripLayer();
+    // _replaceSyncedFilterWTripLayer();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     _loadPointData,

src/common-utils/src/h3-utils.ts

@@ -36,7 +36,7 @@
   };
 }
 
-export const isHexField = (field, fieldIdx, dataContainer) => {
+export const isHexField = (field, _fieldIdx, _dataContainer) => {
   return field.type === ALL_FIELD_TYPES.h3;
 };
 

src/components/src/common/histogram-plot.tsx

@@ -132,7 +132,7 @@
     const barWidth = useMemo(() => {
       if (groupKeys.length === 0) return 0;
       // find histogramsByGroup with max number of bins
-      const maxGroup = groupKeys.reduce((accu, key, idx) => {
+      const maxGroup = groupKeys.reduce((accu, key, _idx) => {
         if (histogramsByGroup[key].length > accu.length) {
           return histogramsByGroup[key];
         }

src/components/src/common/item-selector/dropdown-list.tsx

@@ -26,12 +26,11 @@
 };
 
 const defaultDisplay = d => d;
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const ListItem = ({
   value,
   displayOption = defaultDisplay,
   disabled,
   light
 }: ListItemProps<any>) => {
   const displayValue = displayOption(value);
   return (

src/components/src/common/sync-timeline-control.tsx

@@ -50,7 +50,7 @@
     return (
       <div>
         {Object.values(syncTimelineAnimationItems)
-          .filter((item, index) => item.id !== syncTimelineMode)
+          .filter((item, _index) => item.id !== syncTimelineMode)
           .map(item => (
             <IconButton
               key={item.id}

src/components/src/container.tsx

@@ -118,7 +118,15 @@ export function ContainerFactory(
           dispatch(deleteEntry(id));
         }
       };
-    }, [id]);
+    }, [
+      id,
+      dispatch,
+      initialUiState,
+      mapStylesReplaceDefault,
+      mapboxApiAccessToken,
+      mapboxApiUrl,
+      mint
+    ]);
 
     useEffect(() => {
       // check if id has changed, if true, copy state over

src/components/src/hooks/use-legend-position.ts

@@ -43,23 +43,18 @@
 };
 const MIN_CONTENT_HEIGHT = 100;
 
-/**
- * Returns a function that calculates the anchored position of the map legend
- * that is being dragged.
- */
-export default function useLegendPosition({
+export type UseCalcLegendPositionProps = {
+  legendContentRef: React.MutableRefObject<HTMLElement | null>;
+  isSidePanelShown: boolean;
+  sidePanelWidth: number;
+};
+
+export function useCalcLegendPosition({
   legendContentRef,
   isSidePanelShown,
-  settings,
-  onChangeSettings,
-  theme
-}: Params): ReturnType {
-  const pos = settings?.position ?? DEFAULT_POSITION;
-  const contentHeight = settings?.contentHeight ?? -1;
-  const positionStyles = useMemo(() => ({[pos.anchorX]: pos.x, [pos.anchorY]: pos.y}), [pos]);
-  const startHeightRef = useRef(0);
-
-  const calcPosition = useCallback((): MapLegendControlSettings['position'] => {
+  sidePanelWidth
+}: UseCalcLegendPositionProps) {
+  return useCallback((): MapLegendControlSettings['position'] => {
     const root = legendContentRef.current?.closest('.kepler-gl');
     const legendContent = legendContentRef.current;
     if (!legendContent || !(root instanceof HTMLElement)) {
@@ -86,7 +81,31 @@
         ? {y: topOffset, anchorY: 'top'}
         : {y: bottomOffset, anchorY: 'bottom'})
     };
-  }, [isSidePanelShown]);
+  }, [isSidePanelShown, legendContentRef?.current, sidePanelWidth]);
+}
+
+/**
+ * Returns a function that calculates the anchored position of the map legend
+ * that is being dragged.
+ */
+export default function useLegendPosition({
+  legendContentRef,
+  isSidePanelShown,
+  settings,
+  onChangeSettings,
+  theme
+}: Params): ReturnType {
+  const pos = settings?.position ?? DEFAULT_POSITION;
+  const contentHeight = settings?.contentHeight ?? -1;
+  const positionStyles = useMemo(() => ({[pos.anchorX]: pos.x, [pos.anchorY]: pos.y}), [pos]);
+  const startHeightRef = useRef(0);
+  const sidePanelWidth = theme.sidePanel?.width || 0;
+
+  const calcPosition = useCalcLegendPosition({
+    legendContentRef,
+    isSidePanelShown,
+    sidePanelWidth
+  });
   const updatePosition = useCallback(
     () => onChangeSettings({position: calcPosition()}),
     [calcPosition, onChangeSettings]
@@ -118,7 +137,6 @@
   );
 
   // Shift when side panel is shown/hidden
-  const sidePanelWidth = theme.sidePanel?.width || 0;
   const posRef = useRef(pos);
   posRef.current = pos;
   useEffect(() => {