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
• Better support for CORS/no CORS WMS services, more dynamic instead of hardcoded url exceptions;
• Removed the 'useSpring' animation for the single-layer component
• Switched the log-level between render and useCallback

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. 18th @ 11h45 : 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?

[jolevesq]

Reviewed 6 of 6 files at r7, all commit messages.
Reviewable status: all files reviewed, 25 unresolved discussions (waiting on @Alex-NRCan and @DamonU2)

[Alex-NRCan]

Reviewed 4 of 6 files at r7, 5 of 5 files at r8, 34 of 34 files at r9, 2 of 2 files at r10, all commit messages.
Reviewable status: all files reviewed, 25 unresolved discussions (waiting on @DamonU2 and @jolevesq)

---

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

Previously, jolevesq (Johann Levesque) wrote…

should say 1 atomic selector

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

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

useAppDisplayThemeById is also used in geochart.tsx

---

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

Previously, jolevesq (Johann Levesque) wrote…

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

See other comment

---

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

Previously, jolevesq (Johann Levesque) wrote…

Do we need a logger for use callback?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

mapId is not already available within the store state?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Should we rename e to event?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Do you want to use relative path like elsewhere?

I've left many relative paths where they were pointing to same folder like './{...}'. I've focused on replacing the ones that were navigating through folder structure. It was getting long to do all the './{...}' too in this PR which main goal isn't about focusing on that.

---

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

Previously, jolevesq (Johann Levesque) wrote…

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

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Can we remove the animation?

Good question. I can try in this PR and see how it goes.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Remove // Log ?

I like them myself, seems easier to read (and not forget the line exists) but can remove them.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Remove // Log ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

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

We can, it's just a lot of changes if I need to change all the './' that exist in the codebase right now for this PR. In another PR maybe?

---

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

Previously, jolevesq (Johann Levesque) wrote…

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

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

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

Wasn't intended, thanks. Likely a rebase/merge hiccup.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Do we keep ./

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Do we change all the ./ in this file?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

change ,/ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

We need a logger?

Done.

---

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

Previously, jolevesq (Johann Levesque) wrote…

Change ./ ?

Done.

[jolevesq]

Reviewed 2 of 5 files at r8, 34 of 34 files at r9, 2 of 2 files at r10, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @DamonU2)

[Alex-NRCan]

Reviewed 9 of 9 files at r12, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @DamonU2)

[DamonU2]

Reviewed 5 of 22 files at r2, 8 of 19 files at r3, 6 of 12 files at r4, 25 of 34 files at r5, 4 of 6 files at r7, 2 of 5 files at r8, 34 of 34 files at r9, 2 of 2 files at r10, 9 of 9 files at r12, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @Alex-NRCan)

---

packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts line 748 at r11 (raw file):

  static setOrderedLayerInfoWithNoOrderChangeState(mapId: string, curOrderedLayerInfo: TypeOrderedLayerInfo[]): void {
    // Redirect
    this.getMapStateProtected(mapId).setterActions.setOrderedLayerInfo(curOrderedLayerInfo);

FYI - I had issues with it not triggering consistently when written this way. No idea why, and I haven't seen any issues in testing, so hopefully this is okay now.

[jolevesq]

Reviewed 5 of 9 files at r12, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @Alex-NRCan)

---

packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts line 103 at r12 (raw file):

    const metadataUrl = this.metadataAccessPath;

    // If the metadata url has a .xml? somewhere

comment do not reflect the code.... it has been replaced by include because some xml was having?getCap.... so wnd with does not work

[Alex-NRCan]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @jolevesq)

---

packages/geoview-core/src/api/event-processors/event-processor-children/map-event-processor.ts line 748 at r11 (raw file):

Previously, DamonU2 (Damon Ulmi) wrote…

FYI - I had issues with it not triggering consistently when written this way. No idea why, and I haven't seen any issues in testing, so hopefully this is okay now.

I've basically removed it, because setOrderedLayerInfo already does [...curOrderedLayerInfo] within the function as well. I fail to see why doing it ahead would improve it? Isn't it just doubling the array reconstruction efforts?

We'll have to improve this anyways, because regenerating a whole array triggers too many hooks for things that didn't change. I'd suggest to keep my PR like it is now, for now.

---

packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts line 103 at r12 (raw file):

Previously, jolevesq (Johann Levesque) wrote…

comment do not reflect the code.... it has been replaced by include because some xml was having?getCap.... so wnd with does not work

Done.

[jolevesq]

Reviewed 3 of 9 files at r12, 1 of 1 files at r13, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @Alex-NRCan)