Feature/contextual help

apps/roadrunner-view/public/about/About.md

@@ -1,14 +1,22 @@
-Roadrunner is a portfolio vehicle-simulation application built to demonstrate full-stack, cloud, mapping, and distributed-system development. This project was started in part to gain real life experience with Kafka and Redis.
+About Roadrunner
+================
 
-The application uses Google sign-in and Amazon Cognito for authentication. When you sign in, Roadrunner may receive basic account information such as your name, email address, and user identifier. Roadrunner does not receive or store your Google or Cognito password.
+Roadrunner is a full-stack, cloud-native vehicle simulation application built to demonstrate real-time telemetry streaming, interactive 2D/3D geospatial visualization, and distributed systems architecture.
 
-Roadrunner may use cookies, browser storage, or authentication tokens to maintain login sessions and secure API requests. Third-party providers such as Google, Amazon Cognito, AWS, and Mapbox may process limited technical data needed to provide authentication, hosting, mapping, routing, logging, or API functionality.
+Architecture Overview
+---------------------
+- **Backend Engine** (`apps/roadrunner`): Java 17 / Spring Boot service performing vehicle trajectory generation, route interpolation, REST control plane, and real-time Kafka & Redis telemetry streaming.
+- **Frontend Viewer** (`apps/roadrunner-view`): React / TypeScript application with dual Mapbox GL JS & Google Maps 3D WebGL rendering, 1st-person driver view perspective, and contextual help documentation.
+- **Infrastructure & Cloud** (`orchestration/`): Terraform automation, AWS Aurora Serverless PostGIS, S3 + CloudFront CDN, Amazon Cognito auth, and Kubernetes / Minikube manifests.
 
-Roadrunner may collect limited technical logs, API request information, and simulation data for debugging, monitoring, security, and demonstration purposes. It is not intended to collect sensitive personal information, and you should not enter confidential or sensitive data into the application.
+GitHub Repository
+-----------------
+The project is consolidated in a single monorepo on GitHub:
+- [Roadrunner Monorepo](https://github.com/SteveTarter/roadrunner)
 
-Roadrunner is a portfolio/demo project, not a production transportation, dispatch, navigation, or safety system. It may change over time, contain bugs, or experience downtime. Roadrunner does not sell user data.
-
-Roadrunner's code is hosted on Github in three repos:
-- [Roadrunner](https://github.com/SteveTarter/roadrunner): Spring Boot-based Backend
-- [Roadrunner Viewer](https://github.com/SteveTarter/roadrunner-view): React-based viewer
-- [Roadrunner K8S Orchestration](https://github.com/SteveTarter/roadrunner-k8s-orchestration): Install to minikube or AWS kubernetes cluster
+Privacy Notice & Disclaimer
+---------------------------
+- **Authentication**: Roadrunner uses Google Sign-In and Amazon Cognito for authentication. When you sign in, Roadrunner receives basic account information (name, email address, user ID). Passwords are managed directly by Cognito/Google and are never received or stored by Roadrunner.
+- **Cookies & Storage**: Tokens, cookies, or browser storage are used solely to maintain authenticated sessions and secure API requests.
+- **Data & Logging**: Limited technical logs and simulation telemetry data are collected for monitoring, security, and demo purposes. Do not submit sensitive personal information.
+- **Disclaimer**: Roadrunner is a portfolio demonstration application, not a production transportation, dispatch, navigation, or safety system.

apps/roadrunner-view/public/guide/ActiveVehiclePlot.md

@@ -4,10 +4,10 @@ When invoked from the Home page, the plot opens with the plot zoomed out to show
 
 Below is a typical view after invoking from the Home Page:
 
-![Active Vehicle Plot Unzoomed](./images/VehiclePlot-7Day.png)
+![Active Vehicle Plot Unzoomed](/guide/images/VehiclePlot-7Day.png)
 
 You can zoom in on a particular run using the mouse wheel, or by using pinch gestures.  Zooming in allows easier selection of the specific time desired.  When the chart is clicked or double tapped, the playback time is set to that time.  Below shows the plot zoomed in:
-![Active Vehicle Plot Zoomed](./images/VehiclePlot-Zoomed.png)
+![Active Vehicle Plot Zoomed](/guide/images/VehiclePlot-Zoomed.png)
 
 When accessed from the Driver View, the Active Vehicle Plot zooms in to the time period that the selected vehicle ran.  This enables jumping back or forward in that vehicle's life, allowing "getting to the good part" easier.  Since criss-cross patterns are often centered on "interesting" places, this is useful.  Below is a typical Active Vehicle Plot accessed from the Driver Page.  The red vertical line shows the current playback time.
-![Active Vehicle Plot Driver View](./images/VehiclePlot-DriverView.png)
+![Active Vehicle Plot Driver View](/guide/images/VehiclePlot-DriverView.png)

apps/roadrunner-view/public/guide/BookmarksPanel.md

@@ -1,2 +1,2 @@
 The Bookmarks Panel displays a curated list of past simulation sessions, with a description of what you are about to get into.  The list is curated by the administrator.  Below is typical content:
-![Bookmarks Panel](./images/BookmarksPanel.png)
+![Bookmarks Panel](/guide/images/BookmarksPanel.png)

apps/roadrunner-view/public/guide/CreateCrissCrossPanel.md

@@ -1,7 +1,7 @@
 _Note: The following feature require your user account to be assigned to the 'creator' group in Amazon Cognito.  This access must be requested from the administrator.  Users in this group may create up to 30 sessions a day._
 
 The Create Criss-Cross Panel allows a 'creator' user to start a number of vehicles at once.  The user specifies a center point by specifying an address or clicking on the map, the number of vehicles to start, and the radius of the circle.  Once the center has been selected, a circle appears on the map showing the selected radius.  Along the circle are dots that show where a vehicle will be created.
-![Create Criss-Cross Panel Select](./images/CrissCross-Select.png)
+![Create Criss-Cross Panel Select](/guide/images/CrissCross-Select.png)
 When the "Generate" button is pressed, vehicles will be created in the requested pattern.  Each vehicle is given a route that takes it from its starting point, through the center point, and ending at the point on the opposite side of the circle.
-![Create Criss-Cross Panel Generate](./images/CrissCross-Generate.png)
+![Create Criss-Cross Panel Generate](/guide/images/CrissCross-Generate.png)
 Pro Tip: Press the Generate button multiple times so you can watch a vehicle travel the route just in front of you.

apps/roadrunner-view/public/guide/CreateVehiclePanel.md

@@ -6,4 +6,4 @@ If specifying a point by address, autocomplete is used to aid choosing the point
 
 Below is the Create Vehicle Panel:
 
-![Create Vehicle Panel](./images/CreateVehiclePanel.png)
+![Create Vehicle Panel](/guide/images/CreateVehiclePanel.png)

apps/roadrunner-view/public/guide/SimTable.md

@@ -3,4 +3,4 @@ Sim Table Panel
 The Sim Table Panel provides a listing of all vehicle simulations that have occurred during the retention period.  For each simulation session, the vehicle ID, initiating user, and start time are listed.  A playback button is provided to allow starting playback of that simulation session.  The table has controls that allow paging through the sessions.  There is also a button to set the playback time to "Now".
 
 A typical Sim Table Panel is shown below:
-![Sim Table Panel](./images/SimTable.png)
+![Sim Table Panel](/guide/images/SimTable.png)

apps/roadrunner-view/public/guide/UserGuide.md

@@ -3,20 +3,24 @@ Roadrunner: How to Use the Map Interface
 
 Welcome to the Roadrunner vehicle-simulation viewer! The application provides a real-time, interactive map to monitor and manage simulated vehicle fleets. Below is a guide to the tools and panels available on the Home Page.
 
+Contextual Help
+---------------
+Look for the **`?` Help Icon** in panel header bars (such as the Simulation Table, Active Vehicle Plot, Bookmarks, and Creator panels). Clicking any help icon opens contextual documentation directly over the map without interrupting your active simulation playback.
+
 Map View Controls
 -----------------
 
 Pinned to the right side of the screen, you will find a floating toolbar to customize your map view.
 
-*   ![Fit All Button](./images/FitAll.png) Click this button to automatically adjust the map's zoom and pan to fit all currently active vehicles within your viewing area.
+*   ![Fit All Button](/guide/images/FitAll.png) Click this button to automatically adjust the map's zoom and pan to fit all currently active vehicles within your viewing area.
 
-*   ![Street/Satellite Button](./images/Satellite.png) Use this button to seamlessly switch the map background between a standard street layout and a satellite imagery view.
+*   ![Street/Satellite Button](/guide/images/Satellite.png) Use this button to seamlessly switch the map background between a standard street layout and a satellite imagery view.
 
-*   ![Show All Routes Button](./images/ShowAllRoutes.png) ![Hide All Routes Button](./images/HideAllRoutes.png)These buttons allow you to globally toggle the visibility of the route lines drawn behind the vehicles. _(Note: You can also click directly near an individual vehicle on the map to toggle its specific route and popup.)_
+*   ![Show All Routes Button](/guide/images/ShowAllRoutes.png) ![Hide All Routes Button](/guide/images/HideAllRoutes.png) These buttons allow you to globally toggle the visibility of the route lines drawn behind the vehicles. _(Note: You can also click directly near an individual vehicle on the map to toggle its specific route and popup.)_
 
-*   ![Interpolation Button](./images/Interpolation.png) This tool toggles vehicle movement interpolation on and off. Enable smoothing for fluid vehicle animations, or disable it to see the raw, un-interpolated data points coming from the backend.
+*   ![Interpolation Button](/guide/images/Interpolation.png) This tool toggles vehicle movement interpolation on and off. Enable smoothing for fluid vehicle animations, or disable it to see the raw, un-interpolated data points coming from the backend.
 
-*   ![Active Vehicle Chart Button](./images/VehicleChart.png) Clicking this opens a detailed data chart/plot for active vehicles directly over the map view.
+*   ![Active Vehicle Chart Button](/guide/images/VehicleChart.png) Clicking this opens a detailed data chart/plot for active vehicles directly over the map view.
 
 
 Application Menu (Manage Panels)
@@ -26,17 +30,18 @@ The top navigation bar contains additional management panels for running and mon
 
 ### Standard Features
 
-*   **Bookmarks:** Opens a panel where you can select from a curated list of previously saved simulation sessions. Selecting a bookmark will adjust the application clock and transport you to the Driver View for that specific vehicle's historical run.  [Learn more about the Bookmarks panel.](/guide/bookmarks)
+*   **Bookmarks:** Opens a panel where you can select from a curated list of previously saved simulation sessions. Selecting a bookmark will adjust the application clock and transport you to the Driver View for that specific vehicle's historical run.
 
-*   **Sim Table:** Opens a tabular layout displaying simulation sessions that have occured within the retention period.  [Learn more about the Sim Table.](/guide/sim-table)
+*   **Sim Table:** Opens a tabular layout displaying simulation sessions that have occurred within the retention period.
 
-*   **Active Vehicle Plot:** Opens a chart displaying vehicle activity over the retention period.  Allows an alternate way to select a timeline to view past or current simulations.  [Learn more about the Active Vehicle Plot.](/guide/active-vehicle-plot)
+*   **Active Vehicle Plot:** Opens a chart displaying vehicle activity over the retention period. Allows an alternate way to select a timeline to view past or current simulations.
 
 
 ### Creator Features
 
 _Note: The following features require your user account to be assigned to the 'creator' group in Amazon Cognito._
 
-*   **Create Vehicle:** Opens the creation panel, allowing you to establish a starting point, destination, and parameters for a new vehicle simulation. [Learn more about the Create Vehicle Panel.](/guide/create-vehicle-panel)
+*   **Create Vehicle:** Opens the creation panel, allowing you to establish a starting point, destination, and parameters for a new vehicle simulation.
+
+*   **Create Criss-Cross:** Opens a specialized panel designed to generate a "criss-cross" simulation scenario, ideal for testing intersection routing or specific demonstration paths.
 
-*   **Create criss-cross:** Opens a specialized panel designed to generate a "criss-cross" simulation scenario, ideal for testing intersection routing or specific demonstration paths.  [Learn more about the Create Criss-Cross Panel.](/guide/create-criss-cross-panel)

apps/roadrunner-view/src/App.tsx

@@ -10,16 +10,18 @@ import { ProfilePage } from './components/ProfilePage/ProfilePage';
 import { DriverViewPage } from './components/DriverViewPage/DriverViewPage';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import fontawesome from '@fortawesome/fontawesome'
-import { faHome, faSatellite, faMap, faUpRightAndDownLeftFromCenter, faEye, faEyeSlash, faArrowLeft, faArrowRight, fa0 } from '@fortawesome/free-solid-svg-icons';
+import { faHome, faSatellite, faMap, faUpRightAndDownLeftFromCenter, faEye, faEyeSlash, faArrowLeft, faArrowRight, fa0, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { faPowerOff, faUser } from '@fortawesome/fontawesome-free-solid'
 import { AboutPage } from './components/AboutPage/AboutPage';
 import { GuidePage } from './components/GuidePage/GuidePage';
 import { Vehicle3DMapPage } from './components/Vehicle3DMapPage/Vehicle3DMapPage';
 import { GoogleHomePage } from './components/GoogleHomePage/GoogleHomePage';
 import { GoogleVehicle3DMapPage } from './components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage';
 import { GoogleDriverViewPage } from './components/GoogleDriverViewPage/GoogleDriverViewPage';
+import { HelpProvider } from './context/HelpContext';
+import { HelpDrawer } from './components/Shared/HelpDrawer';
 
-library.add(faHome, faSatellite, faMap, faUpRightAndDownLeftFromCenter, faEye, faEyeSlash, faArrowLeft, faArrowRight, fa0 );
+library.add(faHome, faSatellite, faMap, faUpRightAndDownLeftFromCenter, faEye, faEyeSlash, faArrowLeft, faArrowRight, fa0, faQuestionCircle );
 fontawesome.library.add(faPowerOff, faUser);
 
 const HomeRedirect = () => {
@@ -70,48 +72,51 @@ const WrappedGoogleDriverViewPage = () => (
 export const App = () => {
 
   return (
-    <div className='d-flex flex-column min-vh-100'>
-      <div className='flex-grow-1'>
-      <Routes>
-        <Route path='/' element={<HomeRedirect />} />
-        <Route
-          path='/home'
-          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={HomePage} />} />}
-        />
-        <Route
-          path='/google/home'
-          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleHomePage} />} />}
-        />
-        <Route
-          path='/google/3d-view'
-          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleVehicle3DMapPage} />} />}
-        />
-        <Route
-          path='/google/driver-view/:vehicleId'
-          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleDriverViewPage} />} />}
-        />
-        <Route
-          path='/about'
-          element={<AuthenticationGuard component={AboutPage} />}
-        />
-        <Route
-          path='/guide/:guideId'
-          element={<AuthenticationGuard component={GuidePage} />}
-        />
-        <Route
-          path="/profile"
-          element={<AuthenticationGuard component={ProfilePage} />}
-        />
-        <Route
-          path='/driver-view/:vehicleId'
-          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={DriverViewPage} />} />}
-        />
-        <Route
-          path='/3d-view'
-          element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={Vehicle3DMapPage} />} />}
-        />
-      </Routes>
+    <HelpProvider>
+      <div className='d-flex flex-column min-vh-100'>
+        <div className='flex-grow-1'>
+        <Routes>
+          <Route path='/' element={<HomeRedirect />} />
+          <Route
+            path='/home'
+            element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={HomePage} />} />}
+          />
+          <Route
+            path='/google/home'
+            element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleHomePage} />} />}
+          />
+          <Route
+            path='/google/3d-view'
+            element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleVehicle3DMapPage} />} />}
+          />
+          <Route
+            path='/google/driver-view/:vehicleId'
+            element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="google" component={WrappedGoogleDriverViewPage} />} />}
+          />
+          <Route
+            path='/about'
+            element={<AuthenticationGuard component={AboutPage} />}
+          />
+          <Route
+            path='/guide/:guideId'
+            element={<AuthenticationGuard component={GuidePage} />}
+          />
+          <Route
+            path="/profile"
+            element={<AuthenticationGuard component={ProfilePage} />}
+          />
+          <Route
+            path='/driver-view/:vehicleId'
+            element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={DriverViewPage} />} />}
+          />
+          <Route
+            path='/3d-view'
+            element={<AuthenticationGuard component={() => <ProviderEnforcedRoute requiredProvider="mapbox" component={Vehicle3DMapPage} />} />}
+          />
+        </Routes>
+        </div>
+        <HelpDrawer />
       </div>
-    </div>
+    </HelpProvider>
   );
 }