Merge pull request Canadian-Geospatial-Platform#1719 from Alex-NRCan/…

…feat-morelogs

More logs (Canadian-Geospatial-Platform#1719)

packages/geoview-core/src/core/app-start.tsx

@@ -12,6 +12,7 @@ import { getTheme, cgpvTheme } from '@/ui/style/theme';
 import { MapViewer } from '@/geo/map/map-viewer';
 import { TypeMapFeaturesConfig } from '@/core/types/global-types';
 import { api, useAppDisplayLanguageById, useAppDisplayThemeById } from '@/app';
+import { logger } from './utils/logger';
 
 // create a state that will hold map config information
 // TODO: use store, only keep map id on context for store manager to gather right store on hooks
@@ -39,6 +40,9 @@ interface AppStartProps {
  * Initialize the app with maps from inline html configs, url params
  */
 function AppStart(props: AppStartProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/app-start');
+
   const { mapFeaturesConfig } = props;
   const { mapId } = mapFeaturesConfig;
 

packages/geoview-core/src/core/components/app-bar/app-bar.tsx

@@ -23,6 +23,9 @@ import { logger } from '@/core/utils/logger';
  * Create an app-bar with buttons that can open a panel
  */
 export function Appbar(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/app-bar/app-bar');
+
   const mapId = useGeoViewMapId();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/attribution/attribution.tsx

@@ -8,6 +8,7 @@ import { useUIFooterBarExpanded } from '@/core/stores/store-interface-and-intial
 import { useMapAttribution } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { generateId } from '@/core/utils/utilities';
 import { useGeoViewMapId } from '@/app';
+import { logger } from '@/core/utils/logger';
 
 /**
  * Create an Attribution component that will display an attribution box
@@ -16,6 +17,9 @@ import { useGeoViewMapId } from '@/app';
  * @returns {JSX.Element} created attribution element
  */
 export function Attribution(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/attribution/attribution');
+
   const theme = useTheme();
 
   const mapId = useGeoViewMapId();

packages/geoview-core/src/core/components/click-marker/click-marker.tsx

@@ -28,6 +28,9 @@ export type TypeClickMarker = {
  * @returns {JSX.Element} the react element with a marker on click
  */
 export function ClickMarker(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/click-marker/click-marker');
+
   const mapId = useGeoViewMapId();
 
   // internal state

packages/geoview-core/src/core/components/crosshair/crosshair.tsx

@@ -16,6 +16,9 @@ import { logger } from '@/core/utils/logger';
  * @returns {JSX.Element} the crosshair component
  */
 export function Crosshair(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/crosshair/crosshair');
+
   const { t } = useTranslation<string>();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/data-table/data-table-modal.tsx

@@ -28,6 +28,9 @@ import { logger } from '@/core/utils/logger';
  * @returns {JSX.Element} the data table modal component
  */
 export default function DataTableModal(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/data-table/data-table-modal');
+
   const { t } = useTranslation();
 
   const sxtheme = useTheme();

packages/geoview-core/src/core/components/data-table/export-button.tsx

@@ -8,6 +8,7 @@ import { type MRT_ColumnDef as MRTColumnDef } from 'material-react-table';
 
 import { IconButton, DownloadIcon, Tooltip, Menu, MenuItem } from '@/ui';
 import { ColumnsType } from './data-table';
+import { logger } from '@/core/utils/logger';
 
 interface ExportButtonProps {
   rows: ColumnsType[];
@@ -25,6 +26,9 @@ interface ExportButtonProps {
  *
  */
 function ExportButton({ rows, columns, children }: ExportButtonProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/data-table/export-button');
+
   const { t } = useTranslation<string>();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);

packages/geoview-core/src/core/components/data-table/filter-map.tsx

@@ -9,6 +9,7 @@ import {
   useDataTableStoreActions,
   useDataTableStoreMapFilteredRecord,
 } from '@/core/stores/store-interface-and-intial-values/data-table-state';
+import { logger } from '@/core/utils/logger';
 
 interface FilterMapProps {
   layerKey: string;
@@ -22,6 +23,9 @@ interface FilterMapProps {
  *
  */
 function FilterMap({ layerKey }: FilterMapProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/data-table/filter-map');
+
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 

packages/geoview-core/src/core/components/details/details-panel.tsx

@@ -37,6 +37,9 @@ import { logger } from '@/core/utils/logger';
  * @returns {JSX.Element} the layers list
  */
 export function DetailsPanel(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/details/details-panel');
+
   const { t } = useTranslation<string>();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/details/feature-info-new.tsx

@@ -25,6 +25,9 @@ export interface TypeFeatureInfoProps {
  * @returns {JSX.Element} the feature info
  */
 export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/details/feature-info-new');
+
   const { t } = useTranslation<string>();
 
   const theme: Theme & {

packages/geoview-core/src/core/components/details/feature-info-table.tsx

@@ -12,6 +12,7 @@ import { CardMedia, Box, Grid } from '@/ui';
 import { isImage, stringify, generateId, sanitizeHtmlContent } from '@/core/utils/utilities';
 import { HtmlToReact } from '@/core/containers/html-to-react';
 import { getSxClasses } from './details-style';
+import { logger } from '@/core/utils/logger';
 
 interface FeatureInfoTableProps {
   featureInfoList: TypeFieldEntry[];
@@ -24,6 +25,9 @@ interface FeatureInfoTableProps {
  * @returns {JSX.Element} the layers list
  */
 export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/details/feature-info-table');
+
   const { t } = useTranslation<string>();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx

@@ -13,13 +13,17 @@ import { sxClassesFooterBar } from './footer-bar-style';
 import { useMapInteraction } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { useUIFooterBarExpanded } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useGeoViewMapId } from '@/app';
+import { logger } from '@/core/utils/logger';
 
 /**
  * Create a footer bar element that contains attribtuion, mouse position and scale
  *
  * @returns {JSX.Element} the footer bar element
  */
 export function Footerbar(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/footer-bar/footer-bar');
+
   const mapId = useGeoViewMapId();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx

@@ -40,6 +40,9 @@ interface ShellContainerCssProperties {
  * @returns {JSX.Element} returns the Footer Tabs component
  */
 export function FooterTabs(): JSX.Element | null {
+  // Log
+  logger.logTraceRender('components/footer-tabs/footer-tabs');
+
   const mapId = useGeoViewMapId();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/geolocator/geolocator.tsx

@@ -11,6 +11,7 @@ import { OL_ZOOM_DURATION } from '@/core/utils/constant';
 import { useUIAppbarGeolocatorActive } from '@/core/stores/store-interface-and-intial-values/ui-state';
 import { useMapSize, useMapStoreActions } from '@/core/stores/store-interface-and-intial-values/map-state';
 import { useAppGeolocatorServiceURL, useAppDisplayLanguage } from '@/core/stores/store-interface-and-intial-values/app-state';
+import { logger } from '@/core/utils/logger';
 
 export interface GeoListItem {
   key: string;
@@ -23,6 +24,9 @@ export interface GeoListItem {
 }
 
 export function Geolocator() {
+  // Log
+  logger.logTraceRender('components/geolocator/geolocator');
+
   const { t } = useTranslation();
 
   // internal state

packages/geoview-core/src/core/components/hover-tooltip/hover-tooltip.tsx

@@ -45,6 +45,9 @@ const sxClasses = {
  * @returns {JSX.Element} the hover tooltip component
  */
 export function HoverTooltip(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/hover-tooltip/hover-tooltip');
+
   const mapId = useGeoViewMapId();
 
   const { t } = useTranslation<string>();

packages/geoview-core/src/core/components/layers/layers-panel.tsx

@@ -9,6 +9,7 @@ import { useLayersDisplayState, useSelectedLayer } from '@/core/stores/store-int
 import { LayersToolbar } from './layers-toolbar';
 import { LayerDetails } from './right-panel/layer-details';
 import { LeftPanel } from './left-panel/left-panel';
+import { logger } from '@/core/utils/logger';
 
 const Item = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff',
@@ -18,6 +19,9 @@ const Item = styled('div')(({ theme }) => ({
 }));
 
 export function LayersPanel() {
+  // Log
+  logger.logTraceRender('components/layers/layers-panel');
+
   const { t } = useTranslation<string>();
 
   const theme = useTheme();

packages/geoview-core/src/core/components/layers/layers-toolbar.tsx

@@ -14,6 +14,9 @@ interface ResponsiveButtonProps {
 }
 
 function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/layers-toolbar');
+
   const { tooltipKey, translationKey, icon, newState } = props;
   const { t } = useTranslation<string>();
   const breakpoint = 510;

packages/geoview-core/src/core/components/layers/layers.tsx

@@ -1,5 +1,9 @@
+import { logger } from '@/core/utils/logger';
 import { LayersPanel } from './layers-panel';
 
 export function Layers(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/layers');
+
   return <LayersPanel />;
 }

packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx

@@ -7,13 +7,17 @@ import { useGeoViewMapId } from '@/core/stores/geoview-store';
 import { generateId } from '@/core/utils/utilities';
 import { useLayersList } from '@/core/stores/store-interface-and-intial-values/layer-state';
 import { api } from '@/app';
+import { logger } from '@/core/utils/logger';
 
 type EsriOptions = {
   err: string;
   capability: string;
 };
 
 export function AddNewLayer(): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/add-new-layer/add-new-layer');
+
   const { t } = useTranslation<string>();
 
   const { ESRI_DYNAMIC, ESRI_FEATURE, GEOJSON, GEOPACKAGE, WMS, WFS, OGC_FEATURE, XYZ_TILES, GEOCORE } = CONST_LAYER_TYPES;

packages/geoview-core/src/core/components/layers/left-panel/delete-undo-button.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { Box, CircularProgressBase, DeleteOutlineIcon, IconButton, UndoIcon } from '@/ui';
 import { TypeLegendLayer } from '../types';
 import { useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
+import { logger } from '@/core/utils/logger';
 
 interface DeleteUndoButtonProps {
   layer: TypeLegendLayer;
@@ -13,6 +14,9 @@ interface UndoButtonProps {
 }
 
 function UndoButtonWithProgress(props: UndoButtonProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/delete-undo-button/UndoButtonWithProgress');
+
   const { progressValue, onUndo } = props;
   return (
     <Box sx={{ position: 'relative', display: 'inline-flex' }} onClick={onUndo}>
@@ -38,6 +42,9 @@ function UndoButtonWithProgress(props: UndoButtonProps): JSX.Element {
 }
 
 export function DeleteUndoButton(props: DeleteUndoButtonProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/delete-undo-button/DeleteUndoButton');
+
   const { layer } = props;
 
   const [progress, setProgress] = useState(10);

packages/geoview-core/src/core/components/layers/left-panel/layers-list.tsx

@@ -6,6 +6,7 @@ import { getSxClasses } from './left-panel-styles';
 import { Box } from '@/ui';
 import { TypeLegendLayer } from '../types';
 import { useLayerStoreActions, useLayersDisplayState } from '@/core/stores/';
+import { logger } from '@/core/utils/logger';
 
 interface LayerListProps {
   depth: number;
@@ -15,6 +16,9 @@ interface LayerListProps {
 }
 
 export function LayersList({ layersList, setIsLayersListPanelVisible, parentLayerPath, depth }: LayerListProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/layers-list');
+
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 

packages/geoview-core/src/core/components/layers/left-panel/left-panel.tsx

@@ -2,12 +2,16 @@ import { Dispatch, SetStateAction } from 'react';
 import { useLayersDisplayState, useLayersList } from '@/core/stores/store-interface-and-intial-values/layer-state';
 import { LayersList } from './layers-list';
 import { AddNewLayer } from './add-new-layer/add-new-layer';
+import { logger } from '@/core/utils/logger';
 
 interface LeftPanelProps {
   setIsLayersListPanelVisible: Dispatch<SetStateAction<boolean>>;
 }
 
 export function LeftPanel({ setIsLayersListPanelVisible }: LeftPanelProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/left-panel');
+
   // get from the store
   const legendLayers = useLayersList();
   const displayState = useLayersDisplayState();

packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx

@@ -28,6 +28,7 @@ import { useDataTableStoreMapFilteredRecord } from '@/core/stores/store-interfac
 import { DeleteUndoButton } from './delete-undo-button';
 import { LayersList } from './layers-list';
 import { LayerIcon } from '../layer-icon';
+import { logger } from '@/core/utils/logger';
 
 interface SingleLayerProps {
   layer: TypeLegendLayer;
@@ -37,6 +38,9 @@ interface SingleLayerProps {
 }
 
 export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisible }: SingleLayerProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/left-panel/single-layer');
+
   const { t } = useTranslation<string>();
 
   const { toggleLayerVisibility, setSelectedLayerPath } = useLayerStoreActions(); // get store actions

packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx

@@ -28,12 +28,16 @@ import { useUIStoreActions } from '@/core/stores/store-interface-and-intial-valu
 import { generateId } from '@/core/utils/utilities';
 import { LayerIcon } from '../layer-icon';
 import { LayerOpacityControl } from './layer-opacity-control/layer-opacity-control';
+import { logger } from '@/core/utils/logger';
 
 interface LayerDetailsProps {
   layerDetails: TypeLegendLayer;
 }
 
 export function LayerDetails(props: LayerDetailsProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/right-panel/layer-details');
+
   const { layerDetails } = props;
 
   const { t } = useTranslation<string>();

packages/geoview-core/src/core/components/layers/right-panel/layer-opacity-control/layer-opacity-control.tsx

@@ -5,12 +5,16 @@ import { getSxClasses } from './layer-opacity-control-styles';
 import { Box, SliderBase, Typography } from '@/ui';
 import { TypeLegendLayer } from '../../types';
 import { useLayerStoreActions } from '@/core/stores/store-interface-and-intial-values/layer-state';
+import { logger } from '@/core/utils/logger';
 
 interface LayerOpacityControlProps {
   layerDetails: TypeLegendLayer;
 }
 
 export function LayerOpacityControl(props: LayerOpacityControlProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/layers/right-panel/layer-opacity-control/layer-opacity-control');
+
   const { layerDetails } = props;
 
   const { t } = useTranslation<string>();

packages/geoview-core/src/core/components/legend/legend-layer.tsx

@@ -17,12 +17,16 @@ import {
 import { TypeLegendLayer } from '@/core/components/layers/types';
 import { getSxClasses } from './legend-styles';
 import { LayerIcon } from '../layers/layer-icon';
+import { logger } from '@/core/utils/logger';
 
 interface LegendLayerProps {
   layer: TypeLegendLayer;
 }
 
 export function LegendLayer(props: LegendLayerProps): JSX.Element {
+  // Log
+  logger.logTraceRender('components/legend/legend-layer');
+
   const { layer } = props;
 
   const { t } = useTranslation<string>();