Adding historical data table view for all types of subjecs

src/GpsFormatToggle/index.js

@@ -23,8 +23,7 @@ const GpsFormatToggle = (props) => {
     });
   };
 
-  const gpsString = showGpsString && calcGpsDisplayString(lat, lng, currentFormat);
-  const displayGpsString = gpsString || null;
+  const gpsString = showGpsString ? calcGpsDisplayString(lat, lng, currentFormat) : null;
 
   return (
     <div className={`${styles.container} ${className}`} {...rest}>
@@ -34,9 +33,9 @@ const GpsFormatToggle = (props) => {
             onClick={() => onGpsFormatClick(gpsFormat)}>{gpsFormat}</li>
         )}
       </ul>
-      {displayGpsString && <div className={styles.gpsStringWrapper}>
-        <span className={styles.value}>{displayGpsString}</span>
-        {showCopyControl && <TextCopyBtn text={displayGpsString} />}
+      {gpsString && <div className={styles.gpsStringWrapper}>
+        <span className={styles.value}>{gpsString}</span>
+        {showCopyControl && <TextCopyBtn text={gpsString} />}
       </div>
       }
     </div>

src/HeatmapToggleButton/index.js

@@ -2,18 +2,20 @@ import React, { memo } from 'react';
 import noop from 'lodash/noop';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
-import LoadingOverlay from '../LoadingOverlay';
+
+import SubjectControlButton from '../SubjectControls/button';
 
 const HeatmapToggleButton = (props) => {
-  const { className: externalClass, heatmapVisible, heatmapPartiallyVisible, onButtonClick, showLabel, loading } = props;
-  const className = heatmapVisible ? 'visible' : heatmapPartiallyVisible ? 'partial' : '';
-  const labelText = className ? 'Heatmap on' : 'Heatmap off';
-
-  return <div className={`${styles.container} ${className} ${showLabel ? ` ${styles.hasLabel}` : ''}`} onClick={showLabel ? onButtonClick : noop}>
-    {loading && <LoadingOverlay className={styles.loadingOverlay} />}
-    <button title={labelText} type="button" className={`${styles.button} ${styles[className]} ${externalClass || ''}`} onClick={onButtonClick}></button>
-    {showLabel && <span>{labelText}</span>}
-  </div>;
+  const { className: externalClass, heatmapVisible, heatmapPartiallyVisible, onButtonClick, ...rest } = props;
+
+  const stateClassName = heatmapVisible ? 'visible' : heatmapPartiallyVisible ? 'partial' : '';
+
+  const containerClassName = `${styles.container} ${stateClassName}`;
+  const buttonClassName = `${styles.button} ${styles[stateClassName]} ${externalClass || ''}`;
+
+  const labelText = stateClassName ? 'Heatmap on' : 'Heatmap off';
+
+  return <SubjectControlButton buttonClassName={buttonClassName} containerClassName={containerClassName} onClick={onButtonClick} labelText={labelText} {...rest} />;
 };
 
 export default memo(HeatmapToggleButton);

src/HeatmapToggleButton/styles.module.scss

@@ -1,92 +1,15 @@
 @import '../common/styles/buttons';
-
-$background_image_url: '../common/images/icons/';
-
-@mixin button($image: 'heatmap') {
-  background: url('#{$background-image_url+$image}.svg');
-  background-size: cover;
-  border: none;
-  display: block;
-  filter: saturate(50%) grayscale(100%);
-  height: $square-button-dimension;
-  outline: none;
-  width: $square-button-dimension;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.button {
-  @include button;
-  &.visible {
-    filter: unset;
-  }
-}
+@import '../SubjectControls/mixins';
 
 .container {
-  align-items: center;
-  display: flex;
-  flex-flow: row;
-  position: relative;
-
-  &.hasLabel {
-    background-color: rgba($secondary-light-gray, .25);
-    border: 0.06rem solid $secondary-medium-light-gray;
-    border-radius: .12rem;
-    max-width: 5.75rem;
-    max-height: 1.85rem;
-    border-radius: 0.2rem;
-    cursor: pointer;
-
-    [class*=spinner] {
-      position: relative;
-      top: -16%;
+  .button {
+    @include buttonBackground('heatmap');
+    filter: saturate(50%) grayscale(100%);
+    &.visible {
+      filter: unset;
     }
-
-    button {
-      min-height: 1.80rem;
-      height: 1.80rem;
-      min-width: 1.80rem;
-      width: 1.80rem;
-    }
-
-    span {
-      font-size: 0.68rem;
-      line-height: normal;
-      padding: .1rem .7rem;
-      margin: 0 -.2rem;
-    }
-
-    &[class*=visible] {
-      border: 0.06px solid $bright-blue;
-      background-color: rgba($bright-blue, 0.1);
-    }
-
-    &[class*=pinned] {
-      border: 0.06px solid $green;
-      background-color: rgba($green, 0.1);
+    &.partial {
+      filter: opacity(50%);
     }
   }
-
-}
-
-.visible {
-  @include button;
 }
-
-.partial {
-  filter: opacity(50%);
-}
-
-div.loadingOverlay {
-  background: none;
-  z-index: 10;
-  [class*=spinner] {
-    height: 1rem;
-    width: 1rem;
-    &::after {
-      background: none;
-    }
-  }
-}

src/SideBar/styles.module.scss

@@ -445,7 +445,9 @@
 }
 
 .controls {
-  div > button, button:not(:last-child) {
+  > div:not(:last-child) {
+    height: 2.25rem;
+    width: 2.25rem;
     margin-right: 0.5rem;
     border-radius: 0.25rem;
   }

src/StaticSensorsLayer/index.js

@@ -1,20 +1,20 @@
 import React, { useContext, memo, useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Provider, connect } from 'react-redux';
-import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
 import mapboxgl from 'mapbox-gl';
 import set from 'lodash/set';
 import isEmpty from 'lodash/isEmpty';
 
-import store from '../store';
 import { MapContext } from '../App';
 import { DEVELOPMENT_FEATURE_FLAGS, LAYER_IDS, SUBJECT_FEATURE_CONTENT_TYPE } from '../constants';
 import { addFeatureCollectionImagesToMap } from '../utils/map';
 import { getSubjectDefaultDeviceProperty } from '../utils/subjects';
+
+import { showPopup } from '../ducks/popup';
+
 import { BACKGROUND_LAYER, LABELS_LAYER } from './layerStyles';
 
 import LayerBackground from '../common/images/sprites/layer-background-sprite.png';
-import SubjectPopup from '../SubjectPopup';
 
 const { ENABLE_NEW_CLUSTERING } = DEVELOPMENT_FEATURE_FLAGS;
 
@@ -38,7 +38,7 @@ const IMAGE_DATA = {
 const popup = new mapboxgl.Popup({ offset: [0, 0], anchor: 'bottom', closeButton: false });
 
 
-const StaticSensorsLayer = ({ staticSensors = {}, isTimeSliderActive, showMapNames, simplifyMapDataOnZoom: { enabled: isDataInMapSimplified } }) => {
+const StaticSensorsLayer = ({ staticSensors = {}, isTimeSliderActive, showMapNames, simplifyMapDataOnZoom: { enabled: isDataInMapSimplified }, showPopup }) => {
   const map = useContext(MapContext);
   const showMapStaticSubjectsNames = showMapNames[STATIC_SENSOR]?.enabled ?? false;
   const [clickedLayerID, setClickedLayerID] = useState('');
@@ -94,31 +94,32 @@ const StaticSensorsLayer = ({ staticSensors = {}, isTimeSliderActive, showMapNam
     }
   }, [map]);
 
-  const createPopup = useCallback((layer) => {
-    const { geometry } = layer;
-
-    const elementContainer = document.createElement('div');
-    ReactDOM.render(<Provider store={store}>
-      <SubjectPopup data={layer}/>
-    </Provider>, elementContainer);
+  const showPopupForStationarySubject = useCallback((layer) => {
+    const { geometry, properties } = layer;
 
-    popup.setLngLat(geometry.coordinates)
-      .setDOMContent(elementContainer)
-      .addTo(map);
-
-    popup.on('close', () => {
+    const handleMapClick = () => {
       setClickedLayerID('');
       setLayerVisibility(layer.layer.id);
-    });
-  }, [map, setLayerVisibility]);
+    };
+
+    showPopup('subject', { geometry, properties, coordinates: geometry.coordinates });
+    setTimeout(() => map.once('click', handleMapClick));
+
+  }, [map, setLayerVisibility, showPopup]);
 
   const onLayerClick = useCallback((event) => {
+    if (event?.originalEvent?.cancelBubble) return;
+
+    event?.preventDefault();
+    event?.originalEvent?.stopPropagation();
+
     const clickedLayer = getStaticSensorLayer(event);
+
     const clickedLayerID = clickedLayer.layer.id;
     setClickedLayerID(clickedLayerID.replace(PREFIX_ID, ''));
-    createPopup(clickedLayer);
+    showPopupForStationarySubject(clickedLayer);
     setLayerVisibility(clickedLayerID, false);
-  }, [getStaticSensorLayer, setClickedLayerID, createPopup, setLayerVisibility]);
+  }, [getStaticSensorLayer, showPopupForStationarySubject, setClickedLayerID, setLayerVisibility]);
 
   const createLayer = useCallback((layerID, sourceId, layout, paint) => {
     if (!map.getLayer(layerID)) {
@@ -198,7 +199,7 @@ const StaticSensorsLayer = ({ staticSensors = {}, isTimeSliderActive, showMapNam
 
 const mapStatetoProps = ({ view: { showMapNames, simplifyMapDataOnZoom } }) => ({ showMapNames, simplifyMapDataOnZoom });
 
-export default connect(mapStatetoProps, null)(memo(StaticSensorsLayer));
+export default connect(mapStatetoProps, { showPopup })(memo(StaticSensorsLayer));
 
 StaticSensorsLayer.propTypes = {
   staticSensors: PropTypes.object.isRequired,

src/SubjectControls/_mixins.scss

@@ -0,0 +1,38 @@
+@import '../common/styles/buttons';
+@import '../common/styles/vars/colors';
+
+
+@mixin buttonBackground($image: 'tracks_off') {
+  $background_image_url: '../common/images/icons/';
+  background-image: url('#{$background_image_url+$image}.svg');
+}
+
+@mixin control {
+  align-items: center;
+  background-size: cover;
+  cursor: pointer;
+  display: flex;
+  flex-flow: row;
+  line-height: normal;
+  overflow: hidden;
+  position: relative;
+
+  .button {
+    @include buttonBackground();
+    background-size: cover;
+    background-color: $subject-control-btn-bg;
+    border: none;
+    display: block;
+    height: $square-button-dimension;
+    outline: none;
+    width: $square-button-dimension;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.visible {
+      filter: unset;
+    }
+  }
+}

src/SubjectControls/button.js

@@ -0,0 +1,35 @@
+import React, { forwardRef, memo } from 'react';
+import noop from 'lodash/noop';
+import PropTypes from 'prop-types';
+import LoadingOverlay from '../LoadingOverlay';
+import styles from './styles.module.scss';
+
+const SubjectControlButton = (props, ref) => {
+  const { buttonClassName = '', containerClassName = '', disabled = false, labelText, onClick, showLabel, loading, ...rest } = props;
+
+  return <div className={`${styles.container} ${containerClassName} ${showLabel ? ` ${styles.hasLabel}` : ''}`} onClick={onClick}>
+    {loading && <LoadingOverlay className={styles.loadingOverlay} />}
+    <button ref={ref} disabled={disabled} title={labelText} type="button" className={`${styles.button} ${buttonClassName}`} {...rest}></button>
+    {showLabel && labelText && <span>{labelText}</span>}
+  </div>;
+};
+
+const memoizedSubjectControlButton = memo(forwardRef(SubjectControlButton));
+
+export default memoizedSubjectControlButton;
+
+memoizedSubjectControlButton.defaultProps = {
+  onClick: noop,
+  showLabel: true,
+  loading: false,
+};
+
+memoizedSubjectControlButton.propTypes = {
+  buttonClassName: PropTypes.string,
+  containerClassName: PropTypes.string,
+  disabled: PropTypes.bool,
+  labelText: PropTypes.string,
+  onClick: PropTypes.func,
+  showLabel: PropTypes.bool,
+  loading: PropTypes.bool,
+};