Merge branch 'development' into compareLinePage

package.json

@@ -7,6 +7,7 @@
 	"scripts": {
 		"start": "node ./src/bin/www",
 		"start:dev": "nodemon --legacy-watch --inspect=0.0.0.0 ./src/bin/www",
+		"checkWebsiteStatus": "node src/server/services/checkWebsiteStatus.js",
 		"webpack:dev": "webpack watch --color --progress --mode development",
 		"webpack:build": "webpack build --node-env production",
 		"webpack": "webpack build --color --progress --mode development",
@@ -43,7 +44,8 @@
 		"generateCosineSquaredTestingData": "node -e 'require(\"./src/server/data/automatedTestingData\").generateCosineSquaredTestingData(2.5)'",
 		"generateTestingData": "node -e 'require(\"./src/server/data/automatedTestingData\").generateTestingData()'",
 		"testData": "node -e 'require(\"./src/server/data/automatedTestingData.js\").insertSpecialUnitsConversionsMetersGroups()'",
-		"webData": "node -e 'require(\"./src/server/data/websiteData.js\").insertWebsiteData()'"
+		"webData": "node -e 'require(\"./src/server/data/websiteData.js\").insertWebsiteData()'",
+		"addLogMsg": "node -e 'require(\"./src/server/services/addLogMsg.js\").addLogMsgToDB()'"
 	},
 	"nodemonConfig": {
 		"watch": [
@@ -135,4 +137,4 @@
 		"webpack": "~5.76.0",
 		"webpack-cli": "~5.1.4"
 	}
-}
+}

src/client/app/components/BarChartComponent.tsx

@@ -7,6 +7,7 @@ import { utc } from 'moment';
 import { PlotRelayoutEvent } from 'plotly.js';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
+import { Icons } from 'plotly.js';
 import { TimeInterval } from '../../../common/TimeInterval';
 import { updateSliderRange } from '../redux/actions/extraActions';
 import { readingsApi, stableEmptyBarReadings } from '../redux/api/readingsApi';
@@ -17,8 +18,8 @@ import { selectBarUnitLabel, selectIsRaw } from '../redux/selectors/plotlyDataSe
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import { selectBarStacking } from '../redux/slices/graphSlice';
 import Locales from '../types/locales';
-import { useTranslate } from '../redux/componentHooks';
 import SpinnerComponent from './SpinnerComponent';
+import { useTranslate } from '../redux/componentHooks';
 
 /**
  * Passes the current redux state of the barchart, and turns it into props for the React
@@ -53,6 +54,13 @@ export default function BarChartComponent() {
 	const raw = useAppSelector(selectIsRaw);
 	const unitLabel = useAppSelector(selectBarUnitLabel);
 
+	// Display Plotly Buttons Feature
+	// The number of items in defaultButtons and advancedButtons must differ as discussed below
+	const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d',
+		'resetScale2d'];
+	const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d'];
+	// Manage button states with useState
+	const	[listOfButtons, setListOfButtons] = React.useState(defaultButtons);
 
 	// useQueryHooks for data fetching
 	const datasets: Partial<Plotly.PlotData>[] = meterReadings.concat(groupData);
@@ -102,7 +110,17 @@ export default function BarChartComponent() {
 				}}
 				config={{
 					responsive: true,
-					displayModeBar: false,
+					displayModeBar: true,
+					modeBarButtonsToRemove: listOfButtons,
+					modeBarButtonsToAdd: [{
+						name: 'toggle-options',
+						title: translate('toggle.options'),
+						icon: Icons.pencil,
+						click: function () {
+							// # of items must differ so the length can tell which list of buttons is being set
+							setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+						}
+					}],
 					// Current Locale
 					locale,
 					// Available Locales

src/client/app/components/HeaderButtonsComponent.tsx

@@ -64,6 +64,7 @@ export default function HeaderButtonsComponent() {
 		shouldCSVReadingsButtonDisabled: true,
 		shouldUnitsButtonDisabled: true,
 		shouldConversionsButtonDisabled: true,
+		shouldLogMsgButtonDisabled: true,
 		shouldVisualUnitMapButtonDisabled: true,
 		// Translated menu title that depend on whether logged in.
 		menuTitle: '',
@@ -101,6 +102,7 @@ export default function HeaderButtonsComponent() {
 			shouldCSVReadingsButtonDisabled: pathname === '/csvReadings',
 			shouldUnitsButtonDisabled: pathname === '/units',
 			shouldConversionsButtonDisabled: pathname === '/conversions',
+			shouldLogMsgButtonDisabled: pathname === '/logmsg',
 			shouldVisualUnitMapButtonDisabled: pathname === '/visual-unit'
 		}));
 	}, [pathname]);
@@ -244,6 +246,13 @@ export default function HeaderButtonsComponent() {
 								to="/admin">
 								<FormattedMessage id='admin.settings' />
 							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldLogMsgButtonDisabled}
+								tag={Link}
+								to="/logmsg">
+								<FormattedMessage id='log.messages' />
+							</DropdownItem>
 							<DropdownItem
 								style={state.adminViewableLinkStyle}
 								disabled={state.shouldUsersButtonDisabled}
@@ -306,7 +315,7 @@ export default function HeaderButtonsComponent() {
 						{translate('log.in')}
 					</ModalHeader>
 					<ModalBody>
-						<LoginComponent handleClose={handleClose}/>
+						<LoginComponent handleClose={handleClose} />
 					</ModalBody>
 				</Modal>
 			</>

src/client/app/components/LineChartComponent.tsx

@@ -7,6 +7,7 @@ import { utc } from 'moment';
 import { PlotRelayoutEvent } from 'plotly.js';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
+import { Icons } from 'plotly.js';
 import { TimeInterval } from '../../../common/TimeInterval';
 import { updateSliderRange } from '../redux/actions/extraActions';
 import { readingsApi, stableEmptyLineReadings } from '../redux/api/readingsApi';
@@ -57,6 +58,14 @@ export default function LineChartComponent() {
 	// Use Query Data to derive plotly datasets memoized selector
 	const unitLabel = useAppSelector(selectLineUnitLabel);
 
+	// Display Plotly Buttons Feature
+	// The number of items in defaultButtons and advancedButtons must differ as discussed below
+	const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d',
+		'zoomOut2d', 'autoScale2d','resetScale2d'];
+	const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d','autoScale2d','resetScale2d'];
+	// Manage button states with useState
+	const	[listOfButtons, setListOfButtons] = React.useState(defaultButtons);
+
 	const data: Partial<Plotly.PlotData>[] = React.useMemo(() => meterPlotlyData.concat(groupPlotlyData), [meterPlotlyData, groupPlotlyData]);
 
 
@@ -88,8 +97,17 @@ export default function LineChartComponent() {
 				}}
 				config={{
 					responsive: true,
-					displayModeBar: false,
-					// Current Locale
+					displayModeBar: true,
+					modeBarButtonsToRemove: listOfButtons,
+					modeBarButtonsToAdd: [{
+						name: 'toggle-options',
+						title: translate('toggle.options'),
+						icon: Icons.pencil,
+						click: function () {
+							// # of items must differ so the length can tell which list of buttons is being set
+							setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+						}
+					}],
 					locale,
 					// Available Locales
 					locales: Locales

src/client/app/components/RadarChartComponent.tsx

@@ -7,6 +7,7 @@ import * as moment from 'moment';
 import { Layout } from 'plotly.js';
 import * as React from 'react';
 import Plot from 'react-plotly.js';
+import { Icons } from 'plotly.js';
 import { selectGroupDataById } from '../redux/api/groupsApi';
 import { selectMeterDataById } from '../redux/api/metersApi';
 import { readingsApi } from '../redux/api/readingsApi';
@@ -69,6 +70,14 @@ export default function RadarChartComponent() {
 	// The rate will be 1 if it is per hour (since state readings are per hour) or no rate scaling so no change.
 	const rateScaling = needsRateScaling ? currentSelectedRate.rate : 1;
 
+	// Display Plotly Buttons Feature
+	// The number of items in defaultButtons and advancedButtons must differ as discussed below
+	const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d',
+		'resetScale2d'];
+	const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['select2d', 'lasso2d', 'autoScale2d', 'resetScale2d'];
+	// Manage button states with useState
+	const [listOfButtons, setListOfButtons] = React.useState(defaultButtons);
+
 	// Add all valid data from existing meters to the radar plot
 	for (const meterID of selectedMeters) {
 		if (meterReadings) {
@@ -80,11 +89,6 @@ export default function RadarChartComponent() {
 				if (readingsData) {
 					const label = entity.identifier;
 					const colorID = meterID;
-					// TODO If we are sure the data is always defined then remove this commented out code.
-					// Be consistent for all graphing and groups below.
-					// if (readingsData.readings === undefined) {
-					// 	throw new Error('Unacceptable condition: readingsData.readings is undefined.');
-					// }
 					// Create two arrays for the distance (rData) and angle (thetaData) values. Fill the array with the data from the line readings.
 					// HoverText is the popup value show for each reading.
 					const thetaData: string[] = [];
@@ -137,9 +141,6 @@ export default function RadarChartComponent() {
 				if (readingsData) {
 					const label = entity.name;
 					const colorID = groupID;
-					// if (readingsData.readings === undefined) {
-					// 	throw new Error('Unacceptable condition: readingsData.readings is undefined.');
-					// }
 					// Create two arrays for the distance (rData) and angle (thetaData) values. Fill the array with the data from the line readings.
 					// HoverText is the popup value show for each reading.
 					const thetaData: string[] = [];
@@ -322,6 +323,16 @@ export default function RadarChartComponent() {
 				useResizeHandler={true}
 				config={{
 					displayModeBar: true,
+					modeBarButtonsToRemove: listOfButtons,
+					modeBarButtonsToAdd: [{
+						name: 'toggle-options',
+						title: translate('toggle.options'),
+						icon: Icons.pencil,
+						click: function () {
+							// # of items must differ so the length can tell which list of buttons is being set
+							setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+						}
+					}],
 					responsive: true,
 					locales: Locales // makes locales available for use
 				}}

src/client/app/components/RouteComponent.tsx

@@ -25,6 +25,7 @@ import RoleOutlet from './router/RoleOutlet';
 import UnitsDetailComponent from './unit/UnitsDetailComponent';
 import ErrorComponent from './router/ErrorComponent';
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
+import LogMsgComponent from './admin/LogMsgComponent';
 import VisualUnitDetailComponent from './visual-unit/VisualUnitDetailComponent';
 
 /**
@@ -60,6 +61,8 @@ const router = createBrowserRouter([
 					{ path: 'maps', element: <MapsDetailContainer /> },
 					{ path: 'units', element: <UnitsDetailComponent /> },
 					{ path: 'users', element: <UsersDetailComponent /> },
+					{ path: 'logmsg', element: <LogMsgComponent /> },
+					{ path: 'users', element: <UsersDetailComponent /> },
 					{ path: 'visual-unit', element: <VisualUnitDetailComponent/> }
 				]
 			},

src/client/app/components/ThreeDComponent.tsx

@@ -28,6 +28,7 @@ import translate from '../utils/translate';
 import SpinnerComponent from './SpinnerComponent';
 import ThreeDPillComponent from './ThreeDPillComponent';
 import Plot from 'react-plotly.js';
+import { Icons } from 'plotly.js';
 import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import Locales from '../types/locales';
 
@@ -45,13 +46,18 @@ export default function ThreeDComponent() {
 	const graphState = useAppSelector(selectGraphState);
 	const locale = useAppSelector(selectSelectedLanguage);
 	const { meterOrGroupID, meterOrGroupName, isAreaCompatible } = useAppSelector(selectThreeDComponentInfo);
-
-
 	// Initialize Default values
 	const threeDData = data;
 	let layout = {};
 	let dataToRender = null;
 
+	// Display Plotly Buttons Feature
+	// The number of items in defaultButtons and advancedButtons must differ as discussed below
+	const defaultButtons: Plotly.ModeBarDefaultButtons[] = ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d', 'autoScale2d',
+		'resetScale2d'];
+	const advancedButtons: Plotly.ModeBarDefaultButtons[] = ['resetCameraDefault3d'];
+	// Manage button states with useState
+	const	[listOfButtons, setListOfButtons] = React.useState(defaultButtons);
 
 	if (!meterOrGroupID) {
 		// No selected Meters
@@ -85,7 +91,17 @@ export default function ThreeDComponent() {
 					layout={layout as Plotly.Layout}
 					config={{
 						responsive: true,
-						displayModeBar: false,
+						displayModeBar: true,
+						modeBarButtonsToRemove: listOfButtons,
+						modeBarButtonsToAdd: [{
+							name: 'more-options',
+							title: translate('toggle.options'),
+							icon: Icons.pencil,
+							click: function () {
+								// # of items must differ so the length can tell which list of buttons is being set
+								setListOfButtons(listOfButtons.length === defaultButtons.length ? advancedButtons : defaultButtons); // Update the state
+							}
+						}],
 						// Current Locale
 						locale,
 						// Available Locales
@@ -115,6 +131,7 @@ function formatThreeDData(
 	graphState: GraphState,
 	unitDataById: UnitDataById
 ) {
+
 	// Initialize Plotly Data
 	const xDataToRender: string[] = [];
 	const yDataToRender: string[] = [];