Time Series Viewer CENTERED as default axis mode

lib/components/TimeSeriesViewer/TimeSeriesViewerAxes.js

@@ -700,13 +700,13 @@ function TimeSeriesViewerAxes() {
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginBottom: _Theme.default.spacing(3),
-      marginRight: _Theme.default.spacing(3)
+      marginRight: _Theme.default.spacing(4)
     }
   }, renderOption('Y_AXIS_SCALE')), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.yAxesRangesContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: !hasY2Axis ? null : {
-      marginRight: _Theme.default.spacing(3)
+      marginRight: _Theme.default.spacing(4)
     }
   }, renderOption('Y1_AXIS_RANGE')), !hasY2Axis ? null : renderOption('Y2_AXIS_RANGE')))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "h6",
@@ -717,7 +717,7 @@ function TimeSeriesViewerAxes() {
     className: classes.optionsContainer
   }, state.availableTimeSteps.size < 3 ? null : /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginRight: _Theme.default.spacing(3)
+      marginRight: _Theme.default.spacing(4)
     }
   }, renderOption('TIME_STEP')), renderOption('ROLL_PERIOD'))));
 }

lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts

@@ -24,23 +24,23 @@ export namespace TIME_SERIES_VIEWER_STATUS_TITLES {
     export { READY_1 as READY };
 }
 export namespace Y_AXIS_RANGE_MODES {
-    export const FROM_ZERO: string;
     export const CENTERED: string;
+    export const FROM_ZERO: string;
     export const CUSTOM: string;
 }
 export namespace Y_AXIS_RANGE_MODE_DETAILS {
-    export namespace FROM_ZERO_1 {
+    export namespace CENTERED_1 {
         export const name: string;
         export const description: string;
     }
-    export { FROM_ZERO_1 as FROM_ZERO };
-    export namespace CENTERED_1 {
+    export { CENTERED_1 as CENTERED };
+    export namespace FROM_ZERO_1 {
         const name_1: string;
         export { name_1 as name };
         const description_1: string;
         export { description_1 as description };
     }
-    export { CENTERED_1 as CENTERED };
+    export { FROM_ZERO_1 as FROM_ZERO };
     export namespace CUSTOM_1 {
         const name_2: string;
         export { name_2 as name };

lib/components/TimeSeriesViewer/TimeSeriesViewerContext.js

@@ -103,20 +103,20 @@ var TIME_SERIES_VIEWER_STATUS_TITLES = {
 
 exports.TIME_SERIES_VIEWER_STATUS_TITLES = TIME_SERIES_VIEWER_STATUS_TITLES;
 var Y_AXIS_RANGE_MODES = {
-  FROM_ZERO: 'FROM_ZERO',
   CENTERED: 'CENTERED',
+  FROM_ZERO: 'FROM_ZERO',
   CUSTOM: 'CUSTOM'
 };
 exports.Y_AXIS_RANGE_MODES = Y_AXIS_RANGE_MODES;
 var Y_AXIS_RANGE_MODE_DETAILS = {
-  FROM_ZERO: {
-    name: 'From Zero',
-    description: 'Range from zero to one standard deviation above data'
-  },
   CENTERED: {
     name: 'Centered',
     description: 'Center data by one standard deviation above and below'
   },
+  FROM_ZERO: {
+    name: 'From Zero',
+    description: 'Range from zero to one standard deviation above data'
+  },
   CUSTOM: {
     name: 'Custom',
     description: 'Manually define a minimum and maximum axis range'
@@ -190,7 +190,7 @@ var DEFAULT_AXIS_STATE = {
   dataRange: [null, null],
   precision: 0,
   standardDeviation: 0,
-  rangeMode: Y_AXIS_RANGE_MODES.FROM_ZERO,
+  rangeMode: Y_AXIS_RANGE_MODES.CENTERED,
   axisRange: [0, 0]
 };
 var DEFAULT_STATE = {

lib/components/TimeSeriesViewer/TimeSeriesViewerSites.js

@@ -77,6 +77,8 @@ var _Terrain = _interopRequireDefault(require("@material-ui/icons/Terrain"));
 
 var _History = _interopRequireDefault(require("@material-ui/icons/History"));
 
+var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
+
 var _MyLocation = _interopRequireDefault(require("@material-ui/icons/MyLocation"));
 
 var _NotInterested = _interopRequireDefault(require("@material-ui/icons/NotInterested"));
@@ -131,8 +133,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var ucWord = function ucWord(word) {
   return "".concat(word.slice(0, 1)).concat(word.slice(1).toLowerCase());
 };
@@ -152,8 +152,6 @@ var ICON_SVGS = {
 */
 
 var useStyles = (0, _styles.makeStyles)(function (theme) {
-  var _siteCard;
-
   return {
     root: {
       flexGrow: 1,
@@ -199,15 +197,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       alignContent: 'flex-start',
       flexFlow: 'row wrap'
     },
-    siteCard: (_siteCard = {
+    siteCard: {
+      width: '100%',
       padding: theme.spacing(1.5, 2, 1.5, 2),
       backgroundColor: theme.palette.grey[50],
       marginTop: theme.spacing(3)
-    }, _defineProperty(_siteCard, theme.breakpoints.up('lg'), {
-      marginRight: theme.spacing(3)
-    }), _defineProperty(_siteCard, theme.breakpoints.down('md'), {
-      width: '100%'
-    }), _siteCard),
+    },
     siteTitleContainer: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -240,17 +235,24 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     positionsTitleContainer: {
       display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      marginTop: theme.spacing(2)
+    },
+    positionsCardContainer: {
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      flexWrap: 'wrap'
     },
     positionCard: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'flex-start',
       padding: theme.spacing(0.5, 2, 0.5, 0.5),
-      width: '100%',
       backgroundColor: theme.palette.grey[100],
-      marginTop: theme.spacing(1.5)
+      marginTop: theme.spacing(1.5),
+      marginRight: theme.spacing(3)
     },
     startFlex: {
       display: 'flex',
@@ -378,6 +380,8 @@ var OptionDefaultProps = {
   innerRef: null,
   isDisabled: false
 };
+var positionsDescription = "\n  Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates\n  describe where the sensor is located relative to the ground-level reference point for the site.\n  Positions may change over time.\n";
+var positionsSeriesDescription = "\n  Each position selected will become a distinct series in the chart for each variable (example: 2\n  positions \xD7 3 variables = 6 distinct series).\n";
 /**
    PositionHistoryButton - button that opens a dialog to show all history for a given position
 */
@@ -432,7 +436,7 @@ function PositionHistoryButton(props) {
     id: "position-history-dialog-description",
     tabIndex: -1,
     variant: "body2"
-  }, "Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates describe where the sensor is located relative to the ground-level reference point for the site. Positions may change over time. The table below shows changes to the physical location of this position since its creation."), /*#__PURE__*/_react.default.createElement(_TableContainer.default, null, /*#__PURE__*/_react.default.createElement(_Table.default, {
+  }, "".concat(positionsDescription, " The table below shows changes to the physical location of this position since its creation.")), /*#__PURE__*/_react.default.createElement(_TableContainer.default, null, /*#__PURE__*/_react.default.createElement(_Table.default, {
     className: classes.table,
     "aria-label": "simple table"
   }, /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, {
@@ -615,7 +619,11 @@ function PositionDetail(props) {
   }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "body2",
     style: _extends({}, fadeStyle)
-  }, "".concat(elevation, "m")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }, "".concat(elevation, "m")))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginRight: _Theme.default.spacing(3)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "body2"
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: _extends({}, axisStyle)
@@ -625,7 +633,6 @@ function PositionDetail(props) {
     style: _extends({}, axisStyle)
   }, "z:"), "".concat(zOffset, "m"))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      flexGrow: 1,
       textAlign: 'right'
     }
   }, /*#__PURE__*/_react.default.createElement(PositionHistoryButton, {
@@ -666,6 +673,7 @@ function SelectedPosition(props) {
     "aria-label": "remove position ".concat(position, " from ").concat(siteCode),
     disabled: disabled,
     style: {
+      marginLeft: _Theme.default.spacing(1),
       marginRight: _Theme.default.spacing(1)
     },
     onClick: function onClick() {
@@ -759,6 +767,9 @@ function SelectPositionsButton(props) {
     size: "small",
     variant: "outlined",
     startIcon: /*#__PURE__*/_react.default.createElement(_TouchApp.default, null),
+    style: {
+      marginLeft: _Theme.default.spacing(4)
+    },
     onClick: function onClick() {
       setLocalSelectedPositions(selectedPositions);
       setSelectDialogOpen(true);
@@ -801,7 +812,7 @@ function SelectPositionsButton(props) {
     id: "add-positions-dialog-description",
     tabIndex: -1,
     variant: "body2"
-  }, "Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates describe where the sensor is located relative to the ground-level reference point for the site. Each position selected will become a distinct series in the chart for each variable (example: 2 positions \xD7 3 variables = 6 distinct series)."), /*#__PURE__*/_react.default.createElement(_List.default, null, availablePositions.map(function (position) {
+  }, positionsDescription, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), positionsSeriesDescription), /*#__PURE__*/_react.default.createElement(_List.default, null, availablePositions.map(function (position) {
     var labelId = "position-list-label-".concat(position);
     return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
       key: position,
@@ -1121,17 +1132,28 @@ function SelectedSite(props) {
   }, selectedSiteContent, positions.length ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.positionsTitleContainer
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "h6"
-  }, "Position(s):"), /*#__PURE__*/_react.default.createElement(SelectPositionsButton, {
+    variant: "subtitle2"
+  }, "Position(s)"), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, positionsDescription, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), positionsSeriesDescription)
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "small",
+    style: {
+      marginLeft: _Theme.default.spacing(1)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InfoOutlined.default, {
+    fontSize: "small"
+  }))), /*#__PURE__*/_react.default.createElement(SelectPositionsButton, {
     selectedSite: site
-  })), positions.map(function (position) {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.positionsCardContainer
+  }, positions.map(function (position) {
     return /*#__PURE__*/_react.default.createElement(SelectedPosition, {
       key: position,
       siteCode: siteCode,
       position: position,
       disabled: positions.length < 2
     });
-  })) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+  }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.startFlex,
     style: {
       alignItems: 'center'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portal-core-components",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "main": "./lib/index.js",
   "private": true,
   "homepage": "http://localhost:3010/core-components",

src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerAxes.jsx

@@ -557,11 +557,11 @@ export default function TimeSeriesViewerAxes() {
       <div style={{ marginRight: Theme.spacing(5) }}>
         <Typography variant="h6" style={{ marginBottom: Theme.spacing(2) }}>y Axes</Typography>
         <div className={classes.optionsContainer}>
-          <div style={{ marginBottom: Theme.spacing(3), marginRight: Theme.spacing(3) }}>
+          <div style={{ marginBottom: Theme.spacing(3), marginRight: Theme.spacing(4) }}>
             {renderOption('Y_AXIS_SCALE')}
           </div>
           <div className={classes.yAxesRangesContainer}>
-            <div style={!hasY2Axis ? null : { marginRight: Theme.spacing(3) }}>
+            <div style={!hasY2Axis ? null : { marginRight: Theme.spacing(4) }}>
               {renderOption('Y1_AXIS_RANGE')}
             </div>
             {!hasY2Axis ? null : renderOption('Y2_AXIS_RANGE')}
@@ -572,7 +572,7 @@ export default function TimeSeriesViewerAxes() {
         <Typography variant="h6" style={{ marginBottom: Theme.spacing(2) }}>x Axis (Time)</Typography>
         <div className={classes.optionsContainer}>
           {state.availableTimeSteps.size < 3 ? null : (
-            <div style={{ marginRight: Theme.spacing(3) }}>{renderOption('TIME_STEP')}</div>
+            <div style={{ marginRight: Theme.spacing(4) }}>{renderOption('TIME_STEP')}</div>
           )}
           {renderOption('ROLL_PERIOD')}
         </div>

src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerContext.jsx

@@ -62,19 +62,19 @@ export const TIME_SERIES_VIEWER_STATUS_TITLES = {
 
 // Keys, details, and supporting functions for all possible Y-axis range modes
 export const Y_AXIS_RANGE_MODES = {
-  FROM_ZERO: 'FROM_ZERO',
   CENTERED: 'CENTERED',
+  FROM_ZERO: 'FROM_ZERO',
   CUSTOM: 'CUSTOM',
 };
 export const Y_AXIS_RANGE_MODE_DETAILS = {
-  FROM_ZERO: {
-    name: 'From Zero',
-    description: 'Range from zero to one standard deviation above data',
-  },
   CENTERED: {
     name: 'Centered',
     description: 'Center data by one standard deviation above and below',
   },
+  FROM_ZERO: {
+    name: 'From Zero',
+    description: 'Range from zero to one standard deviation above data',
+  },
   CUSTOM: {
     name: 'Custom',
     description: 'Manually define a minimum and maximum axis range',
@@ -132,7 +132,7 @@ const DEFAULT_AXIS_STATE = {
   dataRange: [null, null],
   precision: 0,
   standardDeviation: 0,
-  rangeMode: Y_AXIS_RANGE_MODES.FROM_ZERO,
+  rangeMode: Y_AXIS_RANGE_MODES.CENTERED,
   axisRange: [0, 0],
 };
 const DEFAULT_STATE = {