feat(appBar): fix raw feature info page #closes1280

Canadian-Geospatial-Platform · Feb 16, 2024 · 63d87bb · 63d87bb
1 parent 42e0847
commit 63d87bb
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
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
@@ -52,6 +52,7 @@ export function Appbar(): JSX.Element {
   const interaction = useMapInteraction();
   const appBarComponents = useUIAppbarComponents();
   const { hideClickMarker } = useMapStoreActions();
+  // TODO: remove active footerTab Id and create new one for appbar id.
   const activeFooterTabId = useUIActiveFooterBarTabId();
 
   // get store config for app bar to add (similar logic as in footer-bar)
@@ -149,7 +150,7 @@ export function Appbar(): JSX.Element {
   useEffect(() => {
     // Log
     logger.logTraceUseEffect('APP-BAR - open detail panel when clicked on map', mapId);
-
+    // TODO: remove active footerTab Id and create new one for appbar id.
     // open appbar detail drawer when click on map.
     if (activeFooterTabId === 'details' && buttonPanelGroups?.details?.AppbarPanelButtonDetails?.panel) {
       buttonPanelGroups.details.AppbarPanelButtonDetails.panel.open();
@@ -186,7 +187,7 @@ export function Appbar(): JSX.Element {
 
   useEffect(() => {
     // Log
-    logger.logTraceUseEffect('APP-BAR - create group of appbar buttons from footer bar group', mapId);
+    logger.logTraceUseEffect('APP-BAR - create group of appbar buttons', mapId);
 
     // render footer bar tabs
     (appBarConfig?.tabs.core ?? [])

diff --git a/packages/geoview-core/src/core/components/common/layout.tsx b/packages/geoview-core/src/core/components/common/layout.tsx
@@ -11,6 +11,7 @@ import { LayerTitle } from './layer-title';
 import { EnlargeButton } from './enlarge-button';
 import { CloseButton } from './close-button';
 import { useFooterPanelHeight } from './use-footer-panel-height';
+import { useAppFullscreenActive } from '@/core/stores/store-interface-and-intial-values/app-state';
 
 interface LayoutProps {
   children?: ReactNode;
@@ -29,6 +30,7 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic
 
   const [isLayersPanelVisible, setIsLayersPanelVisible] = useState(false);
   const [isEnlarged, setIsEnlarged] = useState(false);
+  const isMapFullScreen = useAppFullscreenActive();
 
   // Custom hook for calculating the height of footer panel
   const { leftPanelRef, rightPanelRef, panelTitleRef } = useFooterPanelHeight({ footerPanelTab: 'default' });
@@ -41,7 +43,6 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic
   const handleLayerChange = useCallback(
     (layer: LayerListEntry): void => {
       onLayerListClicked?.(layer);
-      console.log('change is firing..');
       // Show the panel (hiding the layers list in the process if we're on mobile)
       setIsLayersPanelVisible(true);
     },
@@ -81,6 +82,7 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic
     );
   }, [isEnlarged, selectedLayerPath, layerList, handleLayerChange]);
 
+  //  TODO: Investigate this why we firing this.
   // // If we're on mobile
   // if (theme.breakpoints.down('md')) {
   //   // If there are no layers and not already showing the right-side panel
@@ -124,10 +126,20 @@ export function Layout({ children, layerList, selectedLayerPath, onLayerListClic
         </ResponsiveGrid.Right>
       </ResponsiveGrid.Root>
       <ResponsiveGrid.Root>
-        <ResponsiveGrid.Left ref={leftPanelRef} isEnlarged={isEnlarged} isLayersPanelVisible={isLayersPanelVisible} fullWidth={fullWidth}>
+        <ResponsiveGrid.Left
+          {...(!isMapFullScreen && !fullWidth && { ref: leftPanelRef })}
+          isEnlarged={isEnlarged}
+          isLayersPanelVisible={isLayersPanelVisible}
+          fullWidth={fullWidth}
+        >
           {renderLayerList()}
         </ResponsiveGrid.Left>
-        <ResponsiveGrid.Right ref={rightPanelRef} isEnlarged={isEnlarged} isLayersPanelVisible={isLayersPanelVisible} fullWidth={fullWidth}>
+        <ResponsiveGrid.Right
+          {...(!isMapFullScreen && !fullWidth && { ref: rightPanelRef })}
+          isEnlarged={isEnlarged}
+          isLayersPanelVisible={isLayersPanelVisible}
+          fullWidth={fullWidth}
+        >
           {children}
         </ResponsiveGrid.Right>
       </ResponsiveGrid.Root>

diff --git a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx
@@ -34,7 +34,7 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp
     if (leftPanelRef.current && isMapFullScreen && (activeFooterBarTabId === footerPanelTab || footerPanelTab === 'default')) {
       const panelTitleHeight = panelTitleRef.current?.clientHeight ?? 0;
       const tabsContainer = document.getElementById('tabsContainer')!;
-      const firstChild = tabsContainer.firstElementChild?.firstElementChild;
+      const firstChild = tabsContainer?.firstElementChild?.firstElementChild;
       const firstChildHeight = firstChild?.clientHeight ?? 0;
       const leftPanelHeight = (window.screen.height * footerPanelResizeValue) / 100 - panelTitleHeight - firstChildHeight;
 

diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx
@@ -266,7 +266,7 @@ export function DetailsPanel({ fullWidth }: DetailsPanelType): JSX.Element {
     // If the layer has features
     if (memoLayerSelectedItem?.numOffeatures) {
       // Log
-      // logger.logDebug('DETAILS-PANEL', 'keep selection', memoLayerSelectedItem);
+      logger.logDebug('DETAILS-PANEL', 'keep selection', memoLayerSelectedItem);
       // All good, keep selection
       // Reset the bypass for next time
       setLayerDataArrayBatchLayerPathBypass(memoLayerSelectedItem.layerPath);
@@ -279,12 +279,12 @@ export function DetailsPanel({ fullWidth }: DetailsPanelType): JSX.Element {
       // If found
       if (anotherLayerEntry) {
         // Log
-        // logger.logDebug('DETAILS-PANEL', 'select another', memoLayerSelectedItem, anotherLayerEntry.layerPath);
+        logger.logDebug('DETAILS-PANEL', 'select another', memoLayerSelectedItem, anotherLayerEntry.layerPath);
         // Select that one
         setSelectedLayerPath(anotherLayerEntry.layerPath);
       } else {
         // Log
-        // logger.logDebug('DETAILS-PANEL', 'select none', memoLayerSelectedItem);
+        logger.logDebug('DETAILS-PANEL', 'select none', memoLayerSelectedItem);
         // None found, select none
         //  TODO:: Investigate infinte loop in appbar for statement.
         // setSelectedLayerPath('');