docs: Add OSCAR initialization lifecycle documentation

next.config.js

@@ -2,7 +2,9 @@
  * Copyright (c) 2024.  Botts Innovative Research, Inc.
  * All Rights Reserved
  */
-module.exports = {
+const { withSentryConfig } = require("@sentry/nextjs");
+
+const nextConfig = {
     distDir: 'web',
     output: 'export',
     trailingSlash: true,
@@ -35,14 +37,11 @@ module.exports = {
         unoptimized: true,
     },
     reactStrictMode: false,
-}
-
-// Injected content via Sentry wizard below
-
-const { withSentryConfig } = require("@sentry/nextjs");
+};
 
+// Wrap with Sentry
 module.exports = withSentryConfig(
-  module.exports,
+  nextConfig,
   {
     // For all available options, see:
     // https://www.npmjs.com/package/@sentry/webpack-plugin#options
@@ -74,4 +73,4 @@ module.exports = withSentryConfig(
     // https://vercel.com/docs/cron-jobs
     automaticVercelMonitors: true,
   }
-);
+);

package.json

@@ -55,6 +55,7 @@
     "@mui/icons-material": "^5.10.14",
     "@mui/material": "^5.16.4",
     "@mui/styles": "^6.1.4",
+    "@mui/system": "^7.3.9",
     "@mui/x-data-grid": "^7.11.1",
     "@mui/x-date-pickers": "^7.20.0",
     "@reduxjs/toolkit": "^2.2.7",
@@ -66,6 +67,7 @@
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "cesium": "^1.114.0",
+    "chart.js": "^4.5.1",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-annotation": "^3.0.1",
     "dayjs": "^1.11.13",
@@ -76,15 +78,18 @@
     "html-webpack-tags-plugin": "^3.0.2",
     "https-browserify": "^1.0.0",
     "idb": "^7.1.1",
+    "jsqr": "^1.4.0",
     "leaflet": "^1.9.4",
-    "next": "^14.2.5",
+    "moment": "^2.30.1",
+    "next": "^14.2.35",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "nouislider": "^15.6.1",
     "ol": "^10.1.0",
     "ol-layerswitcher": "^4.1.2",
     "osh-js": "^3.1.5",
     "patch-package": "^6.5.0",
     "path-browserify": "^1.0.1",
+    "qr-scanner": "^1.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.5",

patches/osh-js+3.1.5.patch

@@ -0,0 +1,55 @@
+diff --git a/node_modules/osh-js/core/parsers/JsonDataParser.js b/node_modules/osh-js/core/parsers/JsonDataParser.js
+index 8bb9f66..0c26f5c 100644
+--- a/node_modules/osh-js/core/parsers/JsonDataParser.js
++++ b/node_modules/osh-js/core/parsers/JsonDataParser.js
+@@ -58,10 +58,13 @@ var JsonDataParser = /** @class */ (function (_super) {
+                 jsonData = input;
+             }
+         }
++        if (!jsonData) return [];
+         if (Array.isArray(jsonData)) {
+             for (var _i = 0, jsonData_1 = jsonData; _i < jsonData_1.length; _i++) {
+                 var d = jsonData_1[_i];
+-                d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                if (d) {
++                    d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                }
+             }
+             return jsonData;
+         }
+diff --git a/node_modules/osh-js/source/core/mqtt/MqttProvider.js b/node_modules/osh-js/source/core/mqtt/MqttProvider.js
+index fb0b3a8..75a9ba2 100644
+--- a/node_modules/osh-js/source/core/mqtt/MqttProvider.js
++++ b/node_modules/osh-js/source/core/mqtt/MqttProvider.js
+@@ -166,10 +166,10 @@ class MqttProvider {
+             this.client.on('message', this.onMessage.bind(this));
+
+             this.client.on('offline', e => {
+-                throw new Error(`The server ${that.endpoint} seems offline`);
++                console.warn(`The server ${that.endpoint} seems offline`);
+             });
+             this.client.on('error', e => {
+-                throw new Error(error);
++                console.error(e);
+             });
+         }
+     }
+diff --git a/node_modules/osh-js/source/core/parsers/JsonDataParser.js b/node_modules/osh-js/source/core/parsers/JsonDataParser.js
+index 67eb795..57490eb 100644
+--- a/node_modules/osh-js/source/core/parsers/JsonDataParser.js
++++ b/node_modules/osh-js/source/core/parsers/JsonDataParser.js
+@@ -38,9 +38,13 @@ class JsonDataParser extends GenericParser {
+             }
+         }
+
++        if (!jsonData) return [];
++
+         if(Array.isArray(jsonData)) {
+             for(let d of jsonData) {
+-                d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                if (d) {
++                    d['timestamp'] = new Date(d[this.getTimeField()]).getTime() + this.props.timeShift;
++                }
+             }
+             return jsonData;
+         } else {

public/config/spectroscopy-info.json

@@ -0,0 +1,9 @@
+{
+  "api_version": "1.0",
+  "endpoint": "/buckets/adjudication",
+  "allowed_detectors": ["GR-100", "NS-500", "GN-Scan"],
+  "calibration_factors": {
+    "gamma": 1.0,
+    "neutron": 1.0
+  }
+}

public/manifest.json

@@ -0,0 +1,35 @@
+{
+  "name": "OSCAR Viewer",
+  "short_name": "OSCAR",
+  "icons": [
+    {
+      "src": "/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "theme_color": "#FFFFFF",
+  "background_color": "#FFFFFF",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}

public/sw.js

@@ -0,0 +1,56 @@
+self.addEventListener('install', () => {
+    self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener('push', (event) => {
+    if (event.data) {
+        const data = event.data.json();
+        const title = data.title || 'New OSCAR Notification';
+        const options = {
+            body: data.body || 'You have a new notification',
+            icon: data.icon || '/icons/icon-192x192.png',
+            badge: data.badge || '/icons/icon-128x128.png',
+            vibrate: [200, 100, 200],
+            data: {
+                url: data.url,
+                timestamp: new Date().toISOString(),
+                source: '',
+                ...data
+            },
+            requireInteraction: true,
+            tag: `pwa-notification-${Date.now()}`,
+            actions: [
+                {
+                    action: 'view-alarm',
+                    title: 'View Alarm'
+                },
+                {
+                    action: 'dismiss',
+                    title: 'Dismiss'
+                }
+            ]
+        };
+        event.waitUntil(self.registration.showNotification(title, options));
+    }
+});
+
+self.addEventListener('notificationclick', (event) => {
+    event.notification.close();
+
+    event.waitUntil(
+        clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+            for (const client of clientList) {
+                if (client.url.includes(self.location.origin) && 'focus' in client) {
+                    return client.focus();
+                }
+            }
+            if (clients.openWindow) {
+                return clients.openWindow('/');
+            }
+        })
+    );
+});

src/app/(dashboard)/page.tsx

@@ -40,7 +40,7 @@ export default function DashboardPage() {
 
             laneDSMap.set(laneid, new LaneDSColl());
 
-            lane.datastreams.forEach((ds, idx) => {
+            lane.datastreams?.forEach((ds, idx) => {
 
                 let rtDS = lane.datasourcesRealtime?.[idx];
 
@@ -55,19 +55,19 @@ export default function DashboardPage() {
                 let laneDSColl = laneDSMap.get(laneid);
 
                 if(isGammaDataStream(ds))
-                    laneDSColl.addDS('gammaRT', rtDS);
+                    laneDSColl?.addDS('gammaRT', rtDS);
 
                 if(isNeutronDataStream(ds))
-                    laneDSColl.addDS('neutronRT', rtDS);
+                    laneDSColl?.addDS('neutronRT', rtDS);
 
                 if(isTamperDataStream(ds))
-                    laneDSColl.addDS('tamperRT', rtDS);
+                    laneDSColl?.addDS('tamperRT', rtDS);
 
                 if(isConnectionDataStream(ds))
-                    laneDSColl.addDS('connectionRT', rtDS);
+                    laneDSColl?.addDS('connectionRT', rtDS);
 
                 if(isThresholdDataStream(ds))
-                    laneDSColl.addDS('gammaTrshldRT', rtDS);
+                    laneDSColl?.addDS('gammaTrshldRT', rtDS);
             });
 
             newStatusList.push({

src/app/_components/AlarmAudio.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Box from "@mui/material/Box";
 import {Alert} from "@mui/material";
 import { selectAlarmAudioVolume } from "@/lib/state/OSCARClientSlice";
+import { useLanguage } from '@/contexts/LanguageContext';
 
 let alarmAudio: HTMLAudioElement | null = null;
 
@@ -17,6 +18,7 @@ export function getAlarmAudio() {
 }
 
 export default function AlarmAudio() {
+    const { t } = useLanguage();
     const dispatch = useDispatch();
     const savedVolume = useSelector(selectAlarmAudioVolume);
     const triggerAlarm = useSelector((state: RootState) => selectTriggeredAlarm(state));
@@ -61,7 +63,7 @@ export default function AlarmAudio() {
 
             {soundLocked && (
                 <Alert severity="info" sx={{ mb: 2, fontSize: "0.8rem" }}>
-                    Click anywhere to enable alarm sound
+                    {t('clickAnywhereToEnableAlarmSound')}
                 </Alert>
             )}
 

src/app/_components/LanguageSelector.tsx

@@ -1,15 +1,41 @@
 "use client";
 
-import React, { useState } from 'react';
-import { Select, MenuItem, FormControl, InputLabel, SelectChangeEvent } from '@mui/material';
+import React from 'react';
+import { Select, MenuItem, FormControl, SelectChangeEvent } from '@mui/material';
 import { useLanguage } from '@/contexts/LanguageContext';
 import LanguageIcon from '@mui/icons-material/Language';
 
+const languages = [
+    { code: 'en', name: 'English' },
+    { code: 'es', name: 'Español' },
+    { code: 'fr', name: 'Français' },
+    { code: 'ar', name: 'العربية' },
+    { code: 'ru', name: 'Русский' },
+    { code: 'zh-CN', name: '简体中文' },
+    { code: 'ja', name: '日本語' },
+    { code: 'ko', name: '한국어' },
+    { code: 'ar-JO', name: 'العربية (الأردن)' },
+    { code: 'lv', name: 'Latviešu' },
+    { code: 'et', name: 'Eesti' },
+    { code: 'pt', name: 'Português' },
+    { code: 'de', name: 'Deutsch' },
+    { code: 'th', name: 'ไทย' },
+    { code: 'hi', name: 'हिन्दी' },
+    { code: 'bn', name: 'বাংলা' },
+    { code: 'pa-PK', name: 'پنجابی' },
+    { code: 'vi', name: 'Tiếng Việt' },
+    { code: 'yue', name: '粵語' },
+    { code: 'tr', name: 'Türkçe' },
+    { code: 'id', name: 'Bahasa Indonesia' },
+    { code: 'ur', name: 'اردو' },
+    { code: 'it', name: 'Italiano' }
+];
+
 export default function LanguageSelector() {
   const { language, setLanguage } = useLanguage();
 
   const handleChange = (event: SelectChangeEvent) => {
-    setLanguage(event.target.value as 'en' | 'es' | 'fr');
+    setLanguage(event.target.value as any);
   };
 
   return (
@@ -19,18 +45,28 @@ export default function LanguageSelector() {
         value={language}
         onChange={handleChange}
         displayEmpty
-        inputProps={{ 'aria-label': 'Without label' }}
-        startAdornment={<LanguageIcon sx={{ mr: 1 }} />}
+        inputProps={{ 'aria-label': 'Language' }}
+        startAdornment={<LanguageIcon sx={{ mr: 1, color: 'inherit' }} />}
         renderValue={(selected) => {
-            if (selected === 'en') return 'English';
-            if (selected === 'es') return 'Español';
-            if (selected === 'fr') return 'Français';
-            return selected;
+            const lang = languages.find(l => l.code === selected);
+            return lang ? lang.name : selected;
+        }}
+        sx={{
+            color: 'inherit',
+            '& .MuiSelect-select': {
+                paddingTop: '4px',
+                paddingBottom: '4px',
+            },
+            '&:before': { borderBottomColor: 'rgba(255, 255, 255, 0.7)' },
+            '&:after': { borderBottomColor: 'white' },
+            '& .MuiSvgIcon-root': { color: 'inherit' }
         }}
       >
-        <MenuItem value="en">English</MenuItem>
-        <MenuItem value="es">Español</MenuItem>
-        <MenuItem value="fr">Français</MenuItem>
+        {languages.map((lang) => (
+            <MenuItem key={lang.code} value={lang.code}>
+                {lang.name}
+            </MenuItem>
+        ))}
       </Select>
     </FormControl>
   );