Last seen column in drone status line

CHANGELOG.md

@@ -28,6 +28,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   be shown if any pair of takeoff positions or any pair of landing positions are
   too close to each other.
 
+- Make the "Flash lights" button latchable by holding Shift while activating it.
+
 ### Changed
 
 - When setting the start time based on a time offset from the current time,

src/components/uavs/UAVOperationsButtonGroup.jsx

@@ -1,8 +1,9 @@
 import isEmpty from 'lodash-es/isEmpty';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
+import { useInterval } from 'react-use';
 import { bindActionCreators } from '@reduxjs/toolkit';
 
 import Button from '@material-ui/core/Button';
@@ -27,6 +28,7 @@ import Colors from '~/components/colors';
 import ToolbarDivider from '~/components/ToolbarDivider';
 import Bolt from '~/icons/Bolt';
 
+import { UAV_SIGNAL_DURATION } from '~/features/settings/constants';
 import {
   requestRemovalOfUAVsByIds,
   requestRemovalOfUAVsMarkedAsGone,
@@ -89,16 +91,33 @@ const UAVOperationsButtonGroup = ({
     dispatch
   );
 
+  const [keepFlashing, setKeepFlashing] = useState(false);
+  const flashLightsButtonOnClick = useCallback(
+    (event) => {
+      if (keepFlashing) {
+        setKeepFlashing(false);
+      } else if (event.shiftKey) {
+        setKeepFlashing(true);
+        flashLight();
+      } else {
+        flashLight();
+      }
+    },
+    [flashLight, keepFlashing, setKeepFlashing]
+  );
+
+  useInterval(flashLight, keepFlashing ? UAV_SIGNAL_DURATION * 1000 : null);
+
   const fontSize = size === 'small' ? 'small' : 'medium';
   const iconSize = size;
 
   const flashLightsButton =
     size === 'small' ? (
       <Button
-        startIcon={<WbSunny />}
+        startIcon={<WbSunny color={keepFlashing ? 'primary' : undefined} />}
         disabled={isSelectionEmpty}
         size={iconSize}
-        onClick={flashLight}
+        onClick={flashLightsButtonOnClick}
       >
         {t('UAVOpButtonGrp.flashLights')}
       </Button>
@@ -107,9 +126,12 @@ const UAVOperationsButtonGroup = ({
         <IconButton
           disabled={isSelectionEmpty}
           size={iconSize}
-          onClick={flashLight}
+          onClick={flashLightsButtonOnClick}
         >
-          <WbSunny fontSize={fontSize} />
+          <WbSunny
+            fontSize={fontSize}
+            color={keepFlashing ? 'primary' : undefined}
+          />
         </IconButton>
       </Tooltip>
     );

src/features/settings/constants.ts

@@ -1,4 +1,9 @@
 /**
- * Timeout length for broadcast mode.
+ * Timeout length for broadcast mode, in seconds.
  */
 export const BROADCAST_MODE_TIMEOUT_LENGTH = 5;
+
+/**
+ * Duration of the `UAV-SIGNAL` (flash light) command, in seconds.
+ */
+export const UAV_SIGNAL_DURATION = 5;

src/features/uavs/selectors.js

@@ -41,6 +41,7 @@ import { convertRGB565ToCSSNotation } from '~/flockwave/parsing';
 import { globalIdToUavId } from '~/model/identifiers';
 import { UAVAge } from '~/model/uav';
 import { selectionForSubset } from '~/selectors/selection';
+import { selectOrdered } from '~/utils/collections';
 import { euclideanDistance2D, getMeanAngle } from '~/utils/math';
 import { EMPTY_ARRAY } from '~/utils/redux';
 import { createDeepResultSelector } from '~/utils/selectors';
@@ -68,6 +69,15 @@ export const getUAVIdToStateMapping = (state) => state.uavs.byId;
  */
 export const getUAVById = (state, uavId) => state.uavs.byId[uavId];
 
+/**
+ * Selector that calculates and caches the list of all the UAVs in the
+ * state object.
+ */
+export const getUAVsInOrder = createSelector(
+  (state) => state.uavs,
+  selectOrdered
+);
+
 /**
  * Returns the current position of the UAV with the given ID, given the current
  * state.

src/model/layers.ts

@@ -19,6 +19,7 @@ import Map from '@material-ui/icons/Map';
 import MyLocation from '@material-ui/icons/MyLocation';
 import Timeline from '@material-ui/icons/Timeline';
 import TrackChanges from '@material-ui/icons/TrackChanges';
+import Wifi from '@material-ui/icons/Wifi';
 
 import type BaseLayer from 'ol/layer/Base';
 import type OLLayer from 'ol/layer/Layer';
@@ -49,6 +50,8 @@ export enum LayerType {
   UAV_TRACE = 'uavTrace',
   UNAVAILABLE = 'unavailable',
   UNTYPED = 'untyped',
+
+  RSSI = 'rssi',
 }
 
 export type Layer = {
@@ -76,6 +79,7 @@ export const LayerTypes = [
   LayerType.OWN_LOCATION,
   LayerType.GEOJSON,
   LayerType.HEATMAP,
+  LayerType.RSSI,
 ] as const;
 
 export const ProLayerTypes = [LayerType.IMAGE] as const;
@@ -251,6 +255,10 @@ const propertiesForLayerTypes: Record<
     label: 'Untyped layer',
     icon: HelpOutline,
   },
+  [LayerType.RSSI]: {
+    label: 'RSSI',
+    icon: Wifi,
+  },
 } as const;
 
 /**

src/model/uav.ts

@@ -64,6 +64,10 @@ export default class UAV {
   //       to the output later on, thus the object spread can be avoided.
   _positionMemoizer: (position: GPSPosition) => GPSPosition;
 
+  // TODO: This should be unnecessary if we can ensure that no mutation happens
+  //       to the output later on, thus the object spread can be avoided.
+  _positionMemoizer: (position: GPSPosition) => GPSPosition;
+
   /**
    * Constructor.
    *

src/utils/messaging.js

@@ -9,6 +9,7 @@ import mapValues from 'lodash-es/mapValues';
 import values from 'lodash-es/values';
 
 import { showConfirmationDialog } from '~/features/prompt/actions';
+import { UAV_SIGNAL_DURATION } from '~/features/settings/constants';
 import { shouldConfirmUAVOperation } from '~/features/settings/selectors';
 import { showNotification } from '~/features/snackbar/actions';
 import { MessageSemantics } from '~/features/snackbar/types';
@@ -148,7 +149,7 @@ export const flashLightOnUAVsAndHideFailures = performMassOperation({
   name: 'Light signal command',
   mapper: (options) => ({
     signals: ['light'],
-    duration: 5000,
+    duration: UAV_SIGNAL_DURATION * 1000,
     ...options,
   }),
   reportSuccess: false,

src/views/map/layers/index.js

@@ -16,6 +16,7 @@ import { TileServerLayerSettings, TileServerLayer } from './tileserver';
 import { UAVsLayerSettings, UAVsLayer } from './uavs';
 import { UAVTraceLayerSettings, UAVTraceLayer } from './uavtrace';
 import { UntypedLayerSettings, UntypedLayer } from './untyped';
+import { RSSILayer } from './rssi';
 
 import { LayerType } from '~/model/layers';
 
@@ -76,6 +77,7 @@ export const Layers = {
   [LayerType.UAVS]: UAVsLayer,
   [LayerType.UAV_TRACE]: UAVTraceLayer,
   [LayerType.UNTYPED]: UntypedLayer,
+  [LayerType.RSSI]: RSSILayer,
 };
 
 export const stateObjectToLayer = (layer, props) => {

src/views/map/layers/rssi.jsx

@@ -0,0 +1,83 @@
+import { RegularShape, Style } from 'ol/style';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { Feature, geom, layer, source } from '@collmot/ol-react';
+
+import { getUAVsInOrder } from '~/features/uavs/selectors';
+import { mapViewCoordinateFromLonLat } from '~/utils/geography';
+import { dockIdToGlobalId } from '~/model/identifiers';
+import { shadowVeryThinOutline, fill } from '~/utils/styles';
+
+// === Helper functions ===
+
+const createRSSIStyle = (rssi) => [
+  new Style({
+    image: new RegularShape({
+      points: 4,
+      fill: fill(`hsl(${rssi}, 100%, 50%)`),
+      stroke: shadowVeryThinOutline,
+      radius: 15,
+      angle: Math.PI / 4,
+    }),
+  }),
+];
+
+// === A single feature representing a docking station ===
+
+const RSSIFeature = React.memo(({ uav, ...rest }) => {
+  const { id, position, rssi } = uav;
+
+  if (!position) {
+    return null;
+  }
+
+  const style = createRSSIStyle(rssi[0]);
+
+  return (
+    <Feature id={dockIdToGlobalId(id)} style={style} {...rest}>
+      <geom.Point
+        coordinates={mapViewCoordinateFromLonLat([position.lon, position.lat])}
+      />
+    </Feature>
+  );
+});
+
+RSSIFeature.propTypes = {
+  selected: PropTypes.bool,
+  uav: PropTypes.shape({
+    id: PropTypes.string,
+    position: PropTypes.shape({
+      lat: PropTypes.number.required,
+      lon: PropTypes.number.required,
+    }),
+    rssi: PropTypes.arrayOf(PropTypes.number),
+  }),
+};
+
+// === The actual layer to be rendered ===
+
+const RSSILayerPresentation = ({ uavs, zIndex }) => (
+  <layer.Vector updateWhileAnimating updateWhileInteracting zIndex={zIndex}>
+    <source.Vector>
+      {uavs.map((uav) => (
+        <RSSIFeature key={uav.id} uav={uav} />
+      ))}
+    </source.Vector>
+  </layer.Vector>
+);
+
+RSSILayerPresentation.propTypes = {
+  uavs: PropTypes.arrayOf(PropTypes.object).isRequired,
+  zIndex: PropTypes.number,
+};
+
+export const RSSILayer = connect(
+  // mapStateToProps
+  (state) => ({
+    uavs: getUAVsInOrder(state),
+  }),
+  // mapDispatchToProps
+  null
+)(RSSILayerPresentation);

src/views/uavs/DroneStatusLine.jsx

@@ -29,7 +29,9 @@ import {
   getSemanticsForRSSI,
 } from '~/model/enums';
 import { getPreferredCoordinateFormatter } from '~/selectors/formatting';
-import { formatCoordinateArray, formatRSSI } from '~/utils/formatting';
+import { formatCoordinateArray, formatRSSI, shortTimeAgoFormatter } from '~/utils/formatting';
+
+import TimeAgo from 'react-timeago';
 
 /**
  * Converts the absolute value of a heading deviation, in degrees, to the
@@ -60,6 +62,7 @@ const useStyles = makeStyles(
       fontVariantNumeric: 'lining-nums tabular-nums',
       marginTop: [-2, '!important'],
       marginBottom: [-4, '!important'],
+      userSelect: 'none',
       whiteSpace: 'pre',
     },
     gone: {
@@ -122,6 +125,7 @@ const DroneStatusLine = ({
   secondaryLabel,
   text,
   textSemantics,
+  lastUpdated,
 }) => {
   const classes = useStyles();
   const { amsl, ahl, agl } = position || {};
@@ -168,13 +172,6 @@ const DroneStatusLine = ({
           >
             {abbreviateGPSFixType(gpsFixType)}
           </StatusPill>
-          {localPosition ? (
-            padEnd(localCoordinateFormatter(localPosition), 25)
-          ) : position ? (
-            padEnd(coordinateFormatter([position.lon, position.lat]), 25)
-          ) : (
-            <span className={classes.muted}>{padEnd('no position', 25)}</span>
-          )}
           {!isNil(amsl) ? (
             padStart(position.amsl.toFixed(1), 6) + 'm'
           ) : (
@@ -193,6 +190,14 @@ const DroneStatusLine = ({
           <StatusText status={headingDeviationToStatus(headingDeviation)}>
             {padStart(!isNil(heading) ? Math.round(heading) + '°' : '', 5)}
           </StatusText>
+          <TimeAgo formatter={(...args) => padStart(padEnd(shortTimeAgoFormatter(...args), 5), 6)} date={lastUpdated} />
+          {localPosition ? (
+            padEnd(localCoordinateFormatter(localPosition), 25)
+          ) : position ? (
+            padEnd(coordinateFormatter([position.lon, position.lat]), 25)
+          ) : (
+            <span className={classes.muted}>{padEnd('no position', 25)}</span>
+          )}
           <span className={classes.debugString}>
             {debugString ? ' ' + debugString : ''}
           </span>
@@ -274,6 +279,7 @@ export default connect(
         mode: uav ? uav.mode : undefined,
         position: uav ? uav.position : undefined,
         rssi: uav ? uav.rssi?.[0] : undefined,
+        lastUpdated: uav ? uav.lastUpdated : undefined,
         ...statusSummarySelector(state, ownProps.id),
       };
     };

src/views/uavs/SortAndFilterHeader.jsx

@@ -200,13 +200,6 @@ const COMMON_HEADER_TEXT_PARTS = Object.freeze([
       width: 40,
     },
   },
-  {
-    label: 'Position',
-    style: {
-      textAlign: 'left',
-      width: 198,
-    },
-  },
   {
     label: 'AMSL',
     sortKey: UAVSortKey.ALTITUDE_MSL,
@@ -239,6 +232,20 @@ const COMMON_HEADER_TEXT_PARTS = Object.freeze([
       width: 40,
     },
   },
+  {
+    label: 'Seen',
+    style:{
+      textAlign: 'left',
+      width: 40,
+    }
+  },
+  {
+    label: 'Position',
+    style: {
+      textAlign: 'left',
+      width: 198,
+    },
+  },
   {
     label: 'Details',
     style: {