feat: conditionally render map popover and update dataset menu styles (#378)

Author: vbaroni

apps/frontend/src/components/keplerGl/factories/map/MapPopoverFactory.tsx

@@ -318,35 +318,37 @@ function MapPopoverFactory(LayerHoverInfo, CoordinateInfo) {
 
     return (
       <ThemeProvider theme={lightTheme}>
-        <FloatingFocusManager context={context} modal={frozen}>
-          <StyledMapPopover
-            className={classNames([
-              'map-popover-container',
-              expanded && 'expanded',
-              expanded && !isMobile && 'full-width',
-              expanded && isMobile && 'full-width-mobile',
-            ])}
-            ref={refs.setFloating}
-            style={floatingStyles}
-            {...getFloatingProps()}
-          >
-            <PopoverContent
-              className={classNames(['map-popover', expanded && 'expanded'])}
-              expandable={expandable}
-              maxTooltipFields={maxTooltipFields}
+        {layerHoverProp.fieldsToShow.length > 0 && (
+          <FloatingFocusManager context={context} modal={frozen}>
+            <StyledMapPopover
+              className={classNames([
+                'map-popover-container',
+                expanded && 'expanded',
+                expanded && !isMobile && 'full-width',
+                expanded && isMobile && 'full-width-mobile',
+              ])}
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
             >
-              {Array.isArray(coordinate) && <CoordinateInfo coordinate={coordinate} zoom={zoom} />}
-              {layerHoverProp && (
-                <LayerHoverInfo
-                  {...layerHoverProp}
-                  expanded={expanded}
-                  setExpanded={setExpanded}
-                  setExpandable={setExpandable}
-                />
-              )}
-            </PopoverContent>
-          </StyledMapPopover>
-        </FloatingFocusManager>
+              <PopoverContent
+                className={classNames(['map-popover', expanded && 'expanded'])}
+                expandable={expandable}
+                maxTooltipFields={maxTooltipFields}
+              >
+                {Array.isArray(coordinate) && <CoordinateInfo coordinate={coordinate} zoom={zoom} />}
+                {layerHoverProp && (
+                  <LayerHoverInfo
+                    {...layerHoverProp}
+                    expanded={expanded}
+                    setExpanded={setExpanded}
+                    setExpandable={setExpandable}
+                  />
+                )}
+              </PopoverContent>
+            </StyledMapPopover>
+          </FloatingFocusManager>
+        )}
       </ThemeProvider>
     );
   };

apps/frontend/src/components/map-menu/DatasetMenu.tsx

@@ -18,8 +18,8 @@ const ToggleVisibilityMenuIcon = styled(({ visible, ...props }) => (
   padding: 3px 7px 3px 7px;
   border: 1px solid black;
   border-radius: 17px;
-  background-color: ${({ visible }) => (visible ? 'white' : 'black')};
-  color: ${({ visible }) => (visible ? 'black' : 'white')};
+  background-color: ${({ visible }) => (visible ? 'white' : 'rgb(230, 230, 230)')};
+  color: 'black';
   font-size: 10px;
 `;
 

apps/frontend/src/components/map-menu/MapMenu.tsx

@@ -169,7 +169,7 @@ export const MapMenu = styled(
   }
 
   ul li ${MenuSectionHeading}:last-child {
-    border-bottom: 0;
+    display: none;
   }
 
   ul li ${MenuSectionHeading} + .range-slider__container {