src/app.js: The Heart of the SILAS Web Demo App

src/app.js is the central component of the Kepler.gl demo application.It orchestrates the entire user experience, from data loading and processing to map visualization and interaction.This file acts as the glue that binds together various parts of the application, making it a crucial component for understanding the app's overall architecture.

1. Core Functionality

• Data Loading: The component handles loading data from various sources:
  • Sample Data: Loads pre - defined datasets from src/data using loadSampleConfigurations action.
  • Remote Data: Fetches data from remote URLs using loadRemoteMap action.
  • Cloud Providers: Integrates with cloud providers like Dropbox to load data using loadCloudMap action.
  • MQTT: Subscribes to MQTT topics to receive real - time data updates.
• Data Processing: Utilizes Kepler.gl's data processing capabilities to transform and prepare data for visualization.
  • Map Visualization: Renders the Kepler.gl map using the KeplerGl component, which is a customized version of the core Kepler.gl library.
• User Interaction: Handles user interactions with the map, including panning, zooming, data exploration, and visualization customization.
• MQTT Integration: Manages the connection to an MQTT broker and subscribes to relevant topics to receive real - time data updates.
• Animation: Implements an animation loop to update the map with real - time data and visualize trajectories.

2. Component Structure

src/app.js is a React class component that extends Component.It utilizes state management to track various aspects of the application, including:

• showBanner: Controls the visibility of the banner component.
• width, height: Stores the dimensions of the map container.
• mqttData: Holds the data received from the MQTT broker.
• dronePositions: Tracks the positions of drones based on MQTT data.
• lastUpdateTime: Records the last time drone positions were updated.
• previousDronePositions: Stores the previous drone positions for animation purposes.
• deckLayers: An array of Deck.gl layers used to visualize data on the map.
• currentTrajectoryIndex: The index of the currently displayed trajectory.
• trajectoryData: Contains the trajectory data loaded from a JSON file.
• currentPointIndex: The index of the current point in the trajectory.
• interpolationFactor: A value used for interpolating between points in the trajectory.
• currentTime: The current time in the animation loop.
• animationDuration: The duration of the animation cycle.

3. Lifecycle Methods

• componentDidMount:
  • Loads data based on URL parameters or user input.
  • Initializes the MQTT connection and subscribes to relevant topics.
  • Sets up the initial Deck.gl layers for visualization.
  • Starts the animation loop.
  • Loads Kepler.gl configuration and data fromkepler.gl.json.
• componentDidUpdate:
  • Updates the Mapbox overlay with new Deck.gl layers when the trajectory, point index, or interpolation factor changes.
• componentWillUnmount:
  • Disconnects from the MQTT broker.
    • Clears any remaining timers or intervals.
    • Stops the animation loop.

4. Key Methods

• startAnimation: Starts the animation loop, which updates the map with real - time data and animates trajectories.
• updateTrajectoryLayers: Updates the Deck.gl layers responsible for visualizing trajectories based on the current trajectory index and interpolation factor.
• updateMqttDroneLayer: Updates the Deck.gl layer responsible for visualizing drones based on the latest MQTT data.
• initDeckLayers: Initializes the Deck.gl layers used for visualization, including layers for trajectories, drones, and other data.
• _getMapboxRef: Retrieves a reference to the Mapbox GL JS map instance and adds the Deck.gl overlay to it.
• updateMapboxOverlay: Updates the Deck.gl overlay with the latest layers.

5. Integration with Kepler.gl

src/app.js integrates with the Kepler.gl library through the KeplerGl component.This component is a customized version of the core Kepler.gl library, with modifications to:

• Replace the data loading modal: Provides a custom modal for loading data from various sources.
• Replace the map control: Offers a customized map control panel.
• Replace the panel header: Customizes the header of the panel.