fix(legend) Ordering issues with store

[Alex-NRCan]

Description

Quick PR to help fixing the ordering issues:

• Improved the layer visibility states, layer ordering (started creating selectors on the store to use those instead of a whole store object in some hooks)
• Removing some 'get' functions from the state to focus on using 'use' hooks instead.
• Added a lot of hooks such as useCallbacks to try to help gain performance.
• Added a lot of useMemo in some layer components
• Cleaned up a lot of relative imports for absolute imports using alias.
• Removed the fakeStore creation.
• Removed the i18n cloning that was happening in app-start and in overview-map

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Hosted: Feb. 14th @ 15h30 : https://alex-nrcan.github.io/geoview/

Checklist:

• I have build (rush build) and deploy (rush host) my PR
• I have connected the issues(s) to this PR
• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have created new issue(s) related to the outcome of this PR is needed
• I have made corresponding changes to the documentation
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

---

This change is 

[Alex-NRCan]

Reviewed 9 of 9 files at r1, 22 of 22 files at r2, 19 of 19 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @Alex-NRCan)

[Alex-NRCan]

Reviewed 12 of 12 files at r4, 34 of 34 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @jolevesq)

[jolevesq]

Reviewed 1 of 9 files at r1, 8 of 22 files at r2, 13 of 19 files at r3, 11 of 12 files at r4, 34 of 34 files at r5, all commit messages.
Reviewable status: all files reviewed, 25 unresolved discussions (waiting on @DamonU2)

---

packages/geoview-core/src/core/app-start.tsx line 56 at r5 (raw file):

  }, [mapId]);

  // GV get store values by id because context is not set.... it is the only 2 atomic selector by id

should say 1 atomic selector

---

packages/geoview-core/src/core/app-start.tsx line 58 at r5 (raw file):

  // GV get store values by id because context is not set.... it is the only 2 atomic selector by id
  // once context is define, map id is available
  const theme = useAppDisplayThemeById(mapId);

I think this store hook was only used here, have you deleted it in the store?

---

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx line 83 at r5 (raw file):

  const legendExpanded = !useSelectorLayerLegendCollapsed(mapId, layer.layerPath);

  const listItemSpring = useSpring({

Can we remove the animation?

---

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx line 92 at r5 (raw file):

  const isLayerChildSelected = useCallback(
    (startingLayer: TypeLegendLayer): boolean => {
      // Log

Remove // Log ?

---

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx line 115 at r5 (raw file):

  // returns true if any of the layer children has visibility of false
  const layerHasDisabledVisibility = useCallback((startingLayer: TypeLegendLayer): boolean => {
    // Log

Remove // Log ?

---

packages/geoview-core/src/core/components/common/layer-list.tsx line 87 at r5 (raw file):

  const handleLayerKeyDown = useCallback(
    (event: React.KeyboardEvent, selectedLayer: LayerListEntry): void => {
      // Log

I mostly removed the // Log comment everywhere. I find it easier to read and logger is mostly always the first line

---

packages/geoview-core/src/core/components/layers/left-panel/layers-list.tsx line 8 at r5 (raw file):

import { TypeLegendLayer } from '@/core/components/layers/types';
import { TABS } from '@/core/utils/constant';
import { SingleLayer } from './single-layer';

Do you want to use relative path like elsewhere?

---

packages/geoview-core/src/core/components/layers/left-panel/layers-list.tsx line 33 at r5 (raw file):

  });

  // TODO: Check - This sort should likely happen elsewhere than in a rendering component

Agree, should happen when layer are reordered and (delete/added). If this sortedLayers is use as dependencies it forces the re rendering

---

packages/geoview-core/src/core/components/legend/legend-layer-ctrl.tsx line 93 at r5 (raw file):

  // Log
  logger.logTraceRender('components/legend/legend-layer-ctrl', layerPath, isVisible);

There is double renderer log, is it indented? If so we should add a message so it is not deleted later

---

packages/geoview-core/src/core/components/legend/legend.tsx line 18 at r5 (raw file):

import { TypeLegendLayer } from '@/core/components/layers/types';
import { CONTAINER_TYPE } from '@/core/utils/constant';
import { useDebounceLayerLegendLayers } from './hooks/use-legend-debounce';

We put relative? I saw you did for some... We said we accept ./ but it may be better to standardize and always use @

---

packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-dynamic.ts line 26 at r5 (raw file):

} from '@/geo/map/map-schema-types';
import { esriGetFieldType, esriGetFieldDomain } from '@/geo/layer/gv-layers/utils';
import { AbstractGVRaster } from './abstract-gv-raster';

Change ./ ?

---

packages/geoview-core/src/core/components/layers/layers-panel.tsx line 33 at r5 (raw file):

  const showLayerDetailsPanel = useCallback(
    (layerId: string): void => {

Do we need a logger for use callback?

---

packages/geoview-core/src/geo/layer/layer-sets/legends-layer-set.ts line 5 at r5 (raw file):

import { logger } from '@/core/utils/logger';
import { TypeLayerStatus } from '@/geo/map/map-schema-types';
import { AbstractLayerSet, PropagationType } from './abstract-layer-set';

change ,/ ?

---

packages/geoview-core/src/core/components/layers/left-panel/delete-undo-button.tsx line 63 at r5 (raw file):

  const { setOrToggleLayerVisibility } = useMapStoreActions();
  const { setSelectedFooterLayerListItemId } = useUIStoreActions();
  const isVisible = useSelectorLayerVisibility(mapId, layerPath);

mapId is not already available within the store state?

---

packages/geoview-core/src/core/components/layers/left-panel/delete-undo-button.tsx line 77 at r5 (raw file):

  };

  const handleDeleteKeyDown = (e: KeyboardEvent): void => {

Should we rename e to event?

---

packages/geoview-core/src/geo/layer/gv-layers/tile/gv-xyz-tiles.ts line 7 at r5 (raw file):

import { XYZTilesLayerEntryConfig } from '@/core/utils/config/validation-classes/raster-validation-classes/xyz-layer-entry-config';
import { AbstractGVTile } from './abstract-gv-tile';

Change ./ ?

---

packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx line 73 at r5 (raw file):

   * @param e React.MouseEvent<HTMLElement> The mouse click event
   */
  const handleClickContent = useCallback((event: React.MouseEvent<HTMLElement>): void => {

We need a logger?

---

packages/geoview-core/src/core/containers/focus-trap.tsx line 10 at r5 (raw file):

import { Modal, Button } from '@/ui';
import { UseHtmlToReact } from '@/core/components/common/hooks/use-html-to-react';
import { getFocusTrapSxClasses } from './containers-style';

Do we keep ./

---

packages/geoview-core/src/ui/drawer/drawer.tsx line 9 at r5 (raw file):

import { IconButton, ChevronLeftIcon, ChevronRightIcon } from '@/ui';
import { logger } from '@/core/utils/logger';
import { getSxClasses } from './drawer-style';

Change ./ ?

---

packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-image.ts line 20 at r5 (raw file):

import { validateExtent } from '@/geo/utils/utilities';
import { getLegendStyles } from '@/geo/utils/renderer/geoview-renderer';
import { AbstractGVRaster } from './abstract-gv-raster';

Change ./ ?

---

packages/geoview-core/src/core/workers/abstract-worker.ts line 3 at r5 (raw file):

import { wrap, Remote } from 'comlink';
import { logger } from '@/core/utils/logger';
import { WorkerLogLevel } from './helper/logger-worker';

Change ./ ?

---

packages/geoview-core/src/geo/layer/layer-sets/all-feature-info-layer-set.ts line 6 at r5 (raw file):

import { AbstractBaseLayer } from '@/geo/layer/gv-layers/abstract-base-layer';
import { GVWMS } from '@/geo/layer/gv-layers/raster/gv-wms';
import { AbstractLayerSet, PropagationType } from './abstract-layer-set';

Change ./ ?

---

packages/geoview-core/src/core/stores/state-api.ts line 6 at r5 (raw file):

import { SwiperEventProcessor } from '@/api/event-processors/event-processor-children/swiper-event-processor';
import { TimeSliderEventProcessor } from '@/api/event-processors/event-processor-children/time-slider-event-processor';
import { GeoChartStoreByLayerPath, TypeGeochartResultSetEntry } from './store-interface-and-intial-values/geochart-state';

Do we change all the ./ in this file?

---

packages/geoview-core/src/ui/modal/modal.tsx line 17 at r5 (raw file):

import { CloseIcon, IconButton } from '@/ui';
import { getSxClasses } from './modal-style';

Change ./ ?

---

packages/geoview-core/src/core/components/legend/legend-layer.tsx line 75 at r5 (raw file):

  const { setLegendCollapsed } = useMapStoreActions();
  const { getLayerStatus } = useLayerStoreActions();
  const isVisible = useSelectorLayerVisibility(mapId, layer.layerPath);

Same as before, mapId should be accessible from within the state itself?