Fixes to add layer UI (#1797)

* reduce commits and remove unwanted code * post build * fix bg color * more color changes * fix more colors * fix style for guides * fix image * more changes * fix more colors * change messaging for new layer added
Canadian-Geospatial-Platform · Feb 14, 2024 · 78e74c5 · 78e74c5
1 parent be0ef67
commit 78e74c5
Show file tree

Hide file tree

Showing 21 changed files with 195 additions and 33 deletions.
diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json
@@ -111,6 +111,7 @@
     "toggleVisibility": "Toggle visibility",
     "toggleCollapse": "Toggle collapse",
     "querying": "Querying",
+    "layerAdded": "Layer __param__ added",
     "instructionsNoLayersTitle": "No layers visible",
     "instructionsNoLayersBody": "Add visible layers on the map."
   },

diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json
@@ -111,6 +111,7 @@
     "toggleVisibility": "Basculer la visibilité",
     "toggleCollapse": "Basculer la fermeture",
     "querying": "Requête en cours",
+    "layerAdded": "Couche __param__  ajoutée",
     "instructionsNoLayersTitle": "Aucune couche visible",
     "instructionsNoLayersBody": "Ajoutez des couches visibles sur la carte."
   },

diff --git a/packages/geoview-core/public/templates/raw-feature-info.html b/packages/geoview-core/public/templates/raw-feature-info.html
@@ -316,6 +316,140 @@ <h4 id="HUC2">2. Basic Map French Dark theme</h4>
     ></div>
     <hr />
 
+    <div class="map-title-holder">
+      <h4 id="HUC3">2. Basic Map English Light theme</h4>
+      <a class="ref-link" href="#top">Top</a>
+    </div>
+    <div
+      id="mapWM3"
+      class="geoview-map"
+      data-lang="en"
+      data-config="{
+        'map': {
+          'interaction': 'dynamic',
+          'viewSettings': {
+            'zoom': 3,
+            'center': [-100, 50],
+            'projection': 3978
+          },
+          'basemapOptions': {
+            'basemapId': 'osm',
+            'shaded': false,
+            'labeled': false
+          },
+          'listOfGeoviewLayerConfig': [
+            {
+              'geoviewLayerId': 'esriFeatureLYR4',
+              'geoviewLayerName': {
+                'en': 'Water quality at monitoring sites',
+                'fr': 'Qualite de eau'
+              },
+              'metadataAccessPath': {
+                'en': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer',
+                'fr': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer'
+              },
+              'geoviewLayerType': 'esriFeature',
+              'initialSettings': { 'visible': 'always' },
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': '8'
+                }
+              ]
+            },
+            {
+              'geoviewLayerId': 'uniqueValueId',
+              'geoviewLayerName': { 'en': 'uniqueValue', 'fr': 'uniqueValue' },
+              'metadataAccessPath': { 'en': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/', 'fr': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/' },
+              'geoviewLayerType': 'esriFeature',
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': '1'
+                }
+              ]
+            },
+            {
+              'geoviewLayerId': 'esriFeatureLYR5',
+              'geoviewLayerName': {
+                'en': 'Top Projects',
+                'fr': 'Projets super'
+              },
+              'metadataAccessPath': {
+                'en': 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/900A_and_top_100_en/MapServer/',
+                'fr': 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/900A_and_top_100_en/MapServer/'
+              },
+              'geoviewLayerType': 'esriFeature',
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': '0'
+                }
+              ]
+            },
+            {
+              'geoviewLayerId': 'geojsonLYR1',
+              'geoviewLayerName': { 'en': 'GeoJSON Sample', 'fr': 'GeoJSON Échantillon' },
+              'metadataAccessPath': { 'en': './geojson/metadata.json', 'fr': './geojson/metadata.json' },
+              'geoviewLayerType': 'GeoJSON',
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': 'polygons.json',
+                  'layerName': { 'en': 'Polygons', 'fr': 'Polygones' }
+                },
+                {
+                  'layerId': 'lines.json',
+                  'layerName': { 'en': 'Lines', 'fr': 'Lignes' }
+                },
+                {
+                  'entryType': 'group',
+                  'layerId': 'point-feature-group',
+                  'layerName': { 'en': 'point-feature-group', 'fr': 'point-feature-group' },
+                  'listOfLayerEntryConfig': [
+                    {
+                      'layerId': 'icon_points.json',
+                      'layerName': { 'en': 'Icons', 'fr': 'Icones' },
+                      'initialSettings': { 'visible': 'yes' }
+                    },
+                    {
+                      'layerId': 'points.json',
+                      'layerName': { 'en': 'Points', 'fr': 'Points' }
+                    },
+                    {
+                      'layerId': 'points_1.json',
+                      'layerName': { 'en': 'Points 1', 'fr': 'Points 1' }
+                    },
+                    {
+                      'layerId': 'points_2.json',
+                      'layerName': { 'en': 'Points 2', 'fr': 'Points 2' }
+                    },
+                    {
+                      'layerId': 'points_3.json',
+                      'layerName': { 'en': 'Points 3', 'fr': 'Points 3' }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+      'theme': 'light',
+      'appBar': {
+        'tabs': {
+          'core': ['geolocator', 'export']
+        }
+      },
+      'navBar': ['zoom', 'fullscreen', 'home', 'location', 'export'],
+      'footerBar': {
+        'tabs': {
+          'core': ['legend', 'layers', 'details', 'data-table']
+        }
+      },
+      'components': ['north-arrow'],
+      'corePackages': [],
+      'externalPackages': [],
+      'suportedLanguages': ['en', 'fr']
+    }"
+    ></div>
+    <hr />
+
     <script src="codedoc.js"></script>
     <script>
       // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready

diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -184,7 +184,7 @@ export function Appbar(): JSX.Element {
           <Box>
             <List sx={sxClasses.appBarList}>
               <ListItem>
-                <ExportButton className={`${sxClasses.appBarButton} ${activeModalId ? 'export' : ''}`} />
+                <ExportButton className={` ${activeModalId ? 'export' : ''}`} />
               </ListItem>
             </List>
           </Box>

diff --git a/packages/geoview-core/src/core/components/common/enlarge-button.tsx b/packages/geoview-core/src/core/components/common/enlarge-button.tsx
@@ -1,8 +1,6 @@
 import { Dispatch } from 'react';
-import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { ArrowBackIcon, ArrowForwardIcon, Button } from '@/ui';
-import { getSxClasses } from './enlarge-button-style';
 
 interface EnlargeButtonProps {
   isEnlarged: boolean;
@@ -18,19 +16,18 @@ interface EnlargeButtonProps {
 export function EnlargeButton({ isEnlarged, onSetIsEnlarged }: EnlargeButtonProps) {
   const { t } = useTranslation<string>();
 
-  const theme = useTheme();
-  const sxClasses = getSxClasses(theme);
-
   return (
     <Button
       type="text"
       size="small"
-      sx={sxClasses.enlargeBtn}
+      color="primary"
+      variant="contained"
+      startIcon={isEnlarged ? <ArrowForwardIcon /> : <ArrowBackIcon />}
+      sx={{ height: '40px', borderRadius: '1.5rem' }}
       onClick={() => onSetIsEnlarged(!isEnlarged)}
       tooltip={isEnlarged ? t('dataTable.reduceBtn')! : t('dataTable.enlargeBtn')!}
       tooltipPlacement="top"
     >
-      {isEnlarged ? <ArrowForwardIcon sx={sxClasses.enlargeBtnIcon} /> : <ArrowBackIcon sx={sxClasses.enlargeBtnIcon} />}
       {isEnlarged ? t('dataTable.reduceBtn') : t('dataTable.enlargeBtn')}
     </Button>
   );

diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -444,7 +444,7 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) {
       sx: (theme) => ({
         // stripe the rows, make odd rows a darker color
         '& tr:nth-of-type(odd) > td': {
-          backgroundColor: `${darken(theme.palette.background.default, 0.1)}`,
+          backgroundColor: theme.palette.geoViewColor.bgColor.darken(0.1),
         },
         '& tr:hover > td': {
           backgroundColor: theme.palette.secondary.light,

diff --git a/packages/geoview-core/src/core/components/details/details-style.ts b/packages/geoview-core/src/core/components/details/details-style.ts
@@ -20,7 +20,7 @@ export const getSxClasses = (theme: Theme) => ({
   rightPanelContainer: {
     border: `2px solid ${theme.palette.geoViewColor.primary.main}`,
     borderRadius: '5px',
-    backgroundColor: theme.palette.geoViewColor.white,
+    color: theme.palette.geoViewColor.textColor.main,
   },
   rightPanelBtnHolder: {
     marginTop: '20px',
@@ -44,6 +44,7 @@ export const getSxClasses = (theme: Theme) => ({
     objectFit: 'scale-down',
     width: '35px',
     height: '35px',
+    marginRight: '10px',
   },
   selectFeatureCheckbox: {
     color: theme.palette.geoViewColor.primary.main,

diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
@@ -110,11 +110,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr
       >
         {/* Left box - feature icon and feature name */}
         <Box sx={sxClasses.flexBoxAlignCenter}>
-          <img
-            src={featureIconSrc}
-            alt={nameFieldValue}
-            style={{ ...theme.iconImage, marginRight: '5px', width: '35px', height: '35px' }}
-          />
+          <Box component="img" src={featureIconSrc} alt={nameFieldValue} sx={sxClasses.featureInfoSingleImage} />
           <Typography sx={{ display: 'inline-block' }} component="div">
             {nameFieldValue}
           </Typography>

diff --git a/packages/geoview-core/src/core/components/details/feature-info-table.tsx b/packages/geoview-core/src/core/components/details/feature-info-table.tsx
@@ -125,7 +125,11 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS
         <Grid
           container
           spacing={5}
-          sx={{ backgroundColor: index % 2 > 0 ? theme.palette.geoViewColor.primary.main : '', marginBottom: '20px' }}
+          sx={{
+            backgroundColor: index % 2 > 0 ? theme.palette.geoViewColor.bgColor.darken(0.1) : '',
+            color: index % 2 > 0 ? theme.palette.geoViewColor.bgColor.darken(0.9) : '',
+            marginBottom: '20px',
+          }}
           key={index}
         >
           <Grid item xs="auto" sx={{ fontWeight: 'bold', width: '80% !important' }}>

diff --git a/packages/geoview-core/src/core/components/export/export-modal-button.tsx b/packages/geoview-core/src/core/components/export/export-modal-button.tsx
@@ -28,6 +28,7 @@ export default function ExportButton(props: ExportProps): JSX.Element {
       tooltipPlacement="bottom-end"
       onClick={() => openModal({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })}
       className={className}
+      color="primary"
     >
       <DownloadIcon />
     </IconButton>

diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
@@ -444,6 +444,7 @@ export function FooterBar(): JSX.Element | null {
             <IconButton
               onClick={handleDynamicFocus}
               tooltip={isFocusToMap ? 'footerBar.focusToMap' : 'footerBar.focusToFooter'}
+              color="primary"
               disabled={
                 isCollapsed || isMapFullScreen || footerPanelResizeValues[footerPanelResizeValues.length - 1] === footerPanelResizeValue
               }

diff --git a/packages/geoview-core/src/core/components/guide/guide-style.ts b/packages/geoview-core/src/core/components/guide/guide-style.ts
@@ -8,7 +8,8 @@ export const getSxClasses = (theme: Theme) => ({
   rightPanelContainer: {
     border: `2px solid ${theme.palette.primary.main}`,
     borderRadius: '5px',
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: theme.palette.geoViewColor.bgColor.light[500],
+    color: theme.palette.geoViewColor.textColor.main,
   },
   footerGuideListItemText: {
     '&:hover': {

diff --git a/packages/geoview-core/src/core/components/layers/layer-icon.tsx b/packages/geoview-core/src/core/components/layers/layer-icon.tsx
@@ -10,7 +10,7 @@ export function LayerIcon({ layer }: LayerIconProps): JSX.Element {
   if (layer.layerStatus === 'error') {
     return <ErrorIcon color="error" />;
   }
-  if (layer.layerStatus === 'processing') {
+  if (layer.layerStatus === 'processing' || layer.layerStatus === 'loading') {
     return (
       <Box sx={{ padding: '5px', marginRight: '10px' }}>
         <CircularProgressBase size={20} />

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -38,7 +38,7 @@ import { TypeCSVLayerConfig, TypeCsvLayerEntryConfig, CSV as CsvGeoviewClass } f
 import { ButtonPropsLayerPanel, SelectChangeEvent, TypeJsonArray, TypeJsonObject } from '@/core/types/global-types';
 import { useGeoViewMapId } from '@/core/stores/geoview-store';
 import { createLocalizedString } from '@/core/utils/utilities';
-import { useLayersList } from '@/core/stores/store-interface-and-intial-values/layer-state';
+import { useLayerStoreActions, useLayersList } from '@/core/stores/store-interface-and-intial-values/layer-state';
 import { Cast, Config, api, generateId } from '@/app';
 import { logger } from '@/core/utils/logger';
 import { EsriImage, TypeEsriImageLayerConfig } from '@/geo/layer/geoview-layers/raster/esri-image';
@@ -74,6 +74,7 @@ export function AddNewLayer(): JSX.Element {
   // get values from store
   const mapId = useGeoViewMapId();
   const layersList = useLayersList();
+  const { setDisplayState, setSelectedLayerPath } = useLayerStoreActions();
 
   const isMultiple = () => hasMetadata && (layerType === ESRI_DYNAMIC || layerType === WFS || layerType === WMS || layerType === GEOJSON);
 
@@ -865,6 +866,21 @@ export function AddNewLayer(): JSX.Element {
       } else emitErrorNotLoaded();
     }
     setIsLoading(false);
+    let message = '';
+    switch(geoviewLayerInstance?.layerPhase) {
+      case 'loading':
+        message = api.utilities.replaceParams([layerName], t('layers.layerAddedAndLoading'));
+        break;
+      case 'error':
+        message = api.utilities.replaceParams([layerName], t('layers.layerAddedWithError'));
+        break;
+      default:
+        setSelectedLayerPath(`${geoviewLayerInstance?.geoviewLayerId}/${geoviewLayerInstance?.geoviewLayerId}`);
+        message = api.utilities.replaceParams([layerName], t('layers.layerAdded'));
+        break;
+    }
+    api.utilities.showMessage(mapId, message, false);
+    setDisplayState('view');
   };
 
   /**

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts b/packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts
@@ -47,7 +47,7 @@ export const getSxClasses = (theme: Theme) => ({
           color: theme.palette.geoViewColor.error.main,
         },
       },
-      '&.loading': {
+      '&.loading, &.processing': {
         background: theme.palette.geoViewColor.info.light[600],
         '& .MuiListItemText-secondary': {
           fontWeight: 'bold',

diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -93,7 +93,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     if (layer.layerStatus === 'error') {
       return t('legend.layerError');
     }
-    if (layer.layerStatus === 'processing') {
+    if (layer.layerStatus === 'processing' || layer.layerStatus === 'loading') {
       return t('legend.layerLoading');
     }
 
@@ -165,7 +165,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
   }
 
   function renderMoreLayerButtons() {
-    if (layer.layerStatus === 'processing' || displayState !== 'view') {
+    if (layer.layerStatus === 'processing' || layer.layerStatus === 'loading' || displayState !== 'view') {
       return null;
     }
     if (layer.layerStatus === 'error') {

diff --git a/packages/geoview-core/src/core/components/legend/legend-styles.ts b/packages/geoview-core/src/core/components/legend/legend-styles.ts
@@ -6,6 +6,7 @@ export const getSxClasses = (theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     height: '700px',
+    backgroundColor: theme.palette.geoViewColor.bgColor.main,
   },
   title: {
     textAlign: 'left',

diff --git a/packages/geoview-core/src/core/components/mouse-position/mouse-position-style.ts b/packages/geoview-core/src/core/components/mouse-position/mouse-position-style.ts
@@ -12,11 +12,11 @@ export const getSxClasses = (theme: Theme) => ({
     width: 'auto',
     backgroundColor: 'transparent !important',
     height: 'inherit !important',
-    color: theme.palette.geoViewColor.white,
+    color: theme.palette.geoViewColor.bgColor.light[800],
     lineHeight: 1.5,
     ':hover': {
       backgroundColor: 'transparent !important',
-      color: theme.palette.geoViewColor.white,
+      color: theme.palette.geoViewColor.bgColor.light[600],
     },
   },
   mousePositionTextContainer: {

diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -99,7 +99,8 @@ export default function Notifications(): JSX.Element {
           tooltip="appbar.notifications"
           tooltipPlacement="bottom-end"
           onClick={handleOpenPopover}
-          className={open ? 'active' : ''}
+          className={open ? 'style1' : ''}
+          color="primary"
         >
           <NotificationsIcon />
         </IconButton>

diff --git a/packages/geoview-core/src/ui/style/light-theme.ts b/packages/geoview-core/src/ui/style/light-theme.ts
@@ -4,7 +4,7 @@ import { GeoViewColorClass, IGeoViewColors } from './types';
 export const lightThemeColors: IGeoViewColors = {
   ...defaultGeoViewColors,
 
-  bgColor: new GeoViewColorClass('#F8F8F8'),
-  primary: new GeoViewColorClass('#515BA5'),
+  bgColor: new GeoViewColorClass('#F9F9F9'),
+  primary: new GeoViewColorClass('#AA4A44'),
   textColor: new GeoViewColorClass('#000000'),
 };