feat: improve handling of lwm2m objects

pages/device.page.tsx

@@ -3,10 +3,9 @@ import { Navbar } from '#components/Navbar.js'
 import { Provider as ModelsProvider } from '#context/Models.js'
 import { Provider as DeviceProvider } from '#context/Device.js'
 import { Provider as DeviceLocationProvider } from '#context/DeviceLocation.js'
-import { Provider as DeviceStateProvider } from '#context/DeviceState.js'
 import { Provider as FingerprintProvider } from '#context/Fingerprint.js'
 import { Provider as ParametersProvider } from '#context/Parameters.js'
-import { Provider as LwM2MHistoryProvider } from '#context/LwM2MHistory.js'
+import { Provider as HistoryProvider } from '#context/History.js'
 import { Device } from '#page/Device.js'
 import type { IndexPageProps } from './index.page.server.js'
 import { WebsocketDisconnectNotifier } from '#components/WebsocketDisconnectNotifier.js'
@@ -17,18 +16,16 @@ export const Page = ({ models }: IndexPageProps) => (
 		<FingerprintProvider>
 			<ModelsProvider models={models}>
 				<DeviceProvider>
-					<DeviceStateProvider>
-						<DeviceLocationProvider>
-							<MapShareProvider>
-								<LwM2MHistoryProvider>
-									<Navbar />
-									<WebsocketDisconnectNotifier />
-									<Device />
-									<Footer />
-								</LwM2MHistoryProvider>
-							</MapShareProvider>
-						</DeviceLocationProvider>
-					</DeviceStateProvider>
+					<DeviceLocationProvider>
+						<MapShareProvider>
+							<HistoryProvider>
+								<Navbar />
+								<WebsocketDisconnectNotifier />
+								<Device />
+								<Footer />
+							</HistoryProvider>
+						</MapShareProvider>
+					</DeviceLocationProvider>
 				</DeviceProvider>
 			</ModelsProvider>
 		</FingerprintProvider>

src/chart/toChartData.ts

@@ -5,7 +5,7 @@ import {
 	type BatteryReading,
 	type BatteryReadings,
 	type GainReadings,
-} from '#context/LwM2MHistory.js'
+} from '#context/History.js'
 import { xAxisForType } from '#chart/xAxisForType.js'
 
 export const toChartData = ({

src/components/BME680.tsx

@@ -1,5 +1,5 @@
 import { LoadingIndicator } from '#components/ValueLoading.js'
-import { useLwM2MHistory } from '#context/LwM2MHistory.js'
+import { useHistory } from '#context/History.js'
 import {
 	AngryIcon,
 	AnnoyedIcon,
@@ -43,7 +43,7 @@ export const BME680 = () => (
 )
 
 export const EnvironmentReadings = () => {
-	const { environment } = useLwM2MHistory()
+	const { environment } = useHistory()
 
 	const { p, mbar, IAQ: iaq, c, ts: updateTime } = environment[0] ?? {}
 

src/components/DeviceHeader.tsx

@@ -1,7 +1,6 @@
 import { DeviceModeSelector } from '#components/DeviceModeSelector.js'
 import { useDevice, type Device } from '#context/Device.js'
-import { useDeviceState } from '#context/DeviceState.js'
-import { useLwM2MHistory } from '#context/LwM2MHistory.js'
+import { useHistory } from '#context/History.js'
 import { identifyIssuer } from 'e118-iin-list'
 import {
 	ActivitySquareIcon,
@@ -101,7 +100,7 @@ export const DeviceHeader = ({ device }: { device: Device }) => {
 }
 
 const SignalQualityInfo = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const { eest, ts } =
 		state.filter(isConnectionInformation).map(toConnectionInformation)[0] ?? {}
 
@@ -136,7 +135,7 @@ const SignalQualityInfo = () => {
 }
 
 const EnvironmentInfo = () => {
-	const { environment } = useLwM2MHistory()
+	const { environment } = useHistory()
 	const { IAQ: iaq, c, ts: updateTime } = environment[0] ?? {}
 
 	return (
@@ -169,7 +168,7 @@ const EnvironmentInfo = () => {
 }
 
 const NetworkModeInfo = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const { networkMode, currentBand, ts } =
 		state.filter(isConnectionInformation).map(toConnectionInformation)[0] ?? {}
 
@@ -214,7 +213,7 @@ const NetworkModeInfo = () => {
 }
 
 const BatteryInfo = () => {
-	const { battery } = useLwM2MHistory()
+	const { battery } = useHistory()
 	const batteryReading = battery[0]
 	return (
 		<span class="d-flex flex-column">
@@ -244,7 +243,7 @@ const BatteryInfo = () => {
 }
 
 const Interact = () => {
-	const { button } = useLwM2MHistory()
+	const { button } = useHistory()
 	const buttonPress = button[0]
 	return (
 		<span class="d-flex flex-column">
@@ -309,7 +308,7 @@ const PublicationInterval = ({ onConfigure }: { onConfigure?: () => void }) => {
 }
 
 const SIMInfo = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const { iccid, ts } =
 		state.filter(isDeviceInformation).map(toDeviceInformation)[0] ?? {}
 

src/components/SignalQuality.tsx

@@ -1,4 +1,3 @@
-import { useDeviceState } from '#context/DeviceState.js'
 import {
 	Signal,
 	SignalHigh,
@@ -14,6 +13,7 @@ import {
 	isConnectionInformation,
 	toConnectionInformation,
 } from '#proto/lwm2m.js'
+import { useDevice } from '#context/Device.js'
 
 /**
  * The %CONEVAL AT command returns amongst other data the energy estimate: Relative estimated energy consumption of data transmission compared to nominal consumption. A higher value means smaller energy consumption. 5: Difficulties in setting up connections. Maximum number of repetitions might be needed for data.
@@ -86,7 +86,7 @@ export const EnergyEstimateLabel = new Map<EnergyEstimate, string>([
 ])
 
 export const SignalQuality = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 
 	const eest = state
 		.filter(isConnectionInformation)
@@ -108,7 +108,7 @@ export const SignalQuality = () => {
 }
 
 export const SignalQualityIcon = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const eest = state
 		.filter(isConnectionInformation)
 		.map(toConnectionInformation)[0]?.eest

src/components/deviceInfo/NetworkInfo.tsx

@@ -1,5 +1,4 @@
 import { LoadingIndicator } from '#components/ValueLoading.js'
-import { useDeviceState } from '#context/DeviceState.js'
 import { identifyIssuer } from 'e118-iin-list'
 import { CpuIcon } from 'lucide-preact'
 import { SignalQuality } from '#components/SignalQuality.js'
@@ -11,9 +10,12 @@ import {
 	toConnectionInformation,
 	toDeviceInformation,
 } from '#proto/lwm2m.js'
+import { useDevice } from '#context/Device.js'
 
 export const NetworkInfo = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
+
+	console.log(state)
 
 	const networkMode = state
 		.filter(isConnectionInformation)

src/components/deviceInfo/NetworkModeInfo.tsx

@@ -1,14 +1,14 @@
 import { LoadingIndicator } from '#components/ValueLoading.js'
-import { useDeviceState } from '#context/DeviceState.js'
 import {
 	isConnectionInformation,
 	toConnectionInformation,
 } from '#proto/lwm2m.js'
 import { LTEm } from '#components/icons/LTE-m.js'
 import { NBIot } from '#components/icons/NBIot.js'
+import { useDevice } from '#context/Device.js'
 
 export const NetworkModeInfo = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const networkMode = state
 		.filter(isConnectionInformation)
 		.map(toConnectionInformation)[0]?.networkMode
@@ -38,7 +38,7 @@ export const NetworkModeInfo = () => {
 }
 
 export const NetworkModeIcon = () => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const networkInfo = state
 		.filter(isConnectionInformation)
 		.map(toConnectionInformation)[0]

src/components/deviceInfo/SoftwareInfo.tsx

@@ -1,13 +1,12 @@
-import { type Device } from '#context/Device.js'
-import { useDeviceState } from '#context/DeviceState.js'
+import { useDevice, type Device } from '#context/Device.js'
 import { parseModemFirmwareVersion } from '#utils/parseModemFirmwareVersion.js'
 import { AlertTriangle, CheckCircle2 } from 'lucide-preact'
 import { ValueLoading } from '#components/ValueLoading.js'
 import { isOutdated } from '#components/deviceInfo/isOutdated.js'
 import { isDeviceInformation, toDeviceInformation } from '#proto/lwm2m.js'
 
 export const SoftwareInfo = ({ device }: { device: Device }) => {
-	const { state } = useDeviceState()
+	const { reported: state } = useDevice()
 	const type = device.model
 
 	const deviceInfo = state

src/components/model/PCA20035-solar/SolarThingyBattery.tsx

@@ -1,6 +1,6 @@
 import { Ago } from '#components/Ago.js'
 import { LoadingIndicator } from '#components/ValueLoading.js'
-import { useLwM2MHistory } from '#context/LwM2MHistory.js'
+import { useHistory } from '#context/History.js'
 import {
 	Battery,
 	BatteryFull,
@@ -25,7 +25,7 @@ export const SolarThingyBattery = () => (
 )
 
 const BatteryInfo = () => {
-	const { battery } = useLwM2MHistory()
+	const { battery } = useHistory()
 	const batteryReading = battery[0]
 	if (batteryReading?.['%'] === undefined)
 		return <LoadingIndicator width={150} />

src/components/model/PCA20035-solar/SolarThingyChart.tsx

@@ -3,18 +3,42 @@ import { Ago } from '#components/Ago.js'
 import { LoadingIndicator } from '#components/ValueLoading.js'
 import { formatFloat } from '#utils/formatFloat.js'
 import { BatteryCharging, Sun } from 'lucide-preact'
-import { isNotHistory, useLwM2MHistory } from '#context/LwM2MHistory.js'
 import { toChartData } from '#chart/toChartData.js'
 import { DateRangeButton } from '#chart/DateRangeButton.js'
 import { WithResize } from '#components/ResizeObserver.js'
 import { WaitingForData } from '#components/WaitingForData.js'
 import { timeSpans } from '#chart/timeSpans.js'
+import { useHistory } from '#context/History.js'
+import { useDevice } from '#context/Device.js'
+import {
+	isBatteryAndPower,
+	isSolarCharge,
+	toBattery,
+	toSolarCharge,
+} from '#proto/lwm2m.js'
+import {
+	timestampResources,
+	type LwM2MObjectInstance,
+} from '@hello.nrfcloud.com/proto-map/lwm2m'
+
+const byTimestamp = (i1: LwM2MObjectInstance, i2: LwM2MObjectInstance) => {
+	const ts1 = i1.Resources[timestampResources[i1.ObjectID] as number] as number
+	const ts2 = i2.Resources[timestampResources[i2.ObjectID] as number] as number
+	return ts2 - ts1
+}
 
 export const SolarThingyChart = () => {
-	const { battery, gain, timeSpan, setTimeSpan } = useLwM2MHistory()
+	const { battery, gain, timeSpan, setTimeSpan } = useHistory()
+	const { reported } = useDevice()
 
-	const currentBattery = battery.filter(isNotHistory)[0]
-	const currentGain = gain.filter(isNotHistory)[0]
+	const currentBattery = reported
+		.filter(isBatteryAndPower)
+		.sort(byTimestamp)
+		.map(toBattery)[0]
+	const currentGain = reported
+		.filter(isSolarCharge)
+		.sort(byTimestamp)
+		.map(toSolarCharge)[0]
 
 	const hasChartData = gain.length + battery.length > 0