History Timeline Playback

[cee-ramraj]

In the History Map page, a feature for playback should be provided. It will be activated from the 'Load History' tab. Upon activating the playback, the following should happen:

1. The screen shows a single ship icon for all ships that have a track point at from time.
2. The screen should start showing appearance and growth of tracks with increasing time up to the 'to time' point.
3. Show a navigation slider at the bottom of the screen containing the start time, stop time, and a marker.
4. All track points up to and including the current marker timestamp from the start time should be shown.
5. All track points beyond current marker timestamp should be dimmed.
6. Track line should be shown up to current marker timestamp
7. Track line should be dimmed beyond current marker timestamp.
8. User can move the marker to the desired location.
9. User should be able to select the desired location by keyboard input.
10. Revert to history map page on closing the playback navigation pane, or pressing the 'Esc' button on keyboard.
11. Timeline icon should be available on the main page in the history map view.
12. All features on tab should be available for selected time.

[cee-ramraj]

Initiation of the timeline function The timeline function should be initiated as follows: -

1. An icon at the top bar that becomes visible only after a period is loaded in the History Maps page
2. Keyboard shortcut to initiate the timeline function should be provided.
3. Once initiated, the icon should get disabled and show accordingly. On clicking the icon in a disabled condition, a warning message should be provided that the timeline function is already running.

Closing of timeline function

1. Timeline function should be closed from the timeline box. Make a provision of a close button in the timeline box.
2. On pressing the 'Esc' button in the keyboard, it should close the timeline and history map page should open.
3. On closing timeline function, the initiation of timeline button should be enabled in the top bar.

[cee-ramraj]

Feature ready.

[cee-ramraj]

Additional requirements to be completed by PM 03 Jan 24

[cee-ramraj]

Creating a period selector in a timeline tape form with zooming involves combining the timeline component, period selector, and zoom functionality. In this example, we'll use the react-d3-timeline library for the timeline, the react-slider library for the period selector, and the react-zoom-pan-pinch library for zooming.

First, install the necessary packages:

npm install react-d3-timeline react-slider react-zoom-pan-pinch

Now, you can create your combined component:

// TimelineWithPeriodSelector.js

import React, { useState } from 'react';
import { Timeline } from 'react-d3-timeline';
import Slider from 'react-slider';
import { ReactZoomPanPinch } from 'react-zoom-pan-pinch';
import './TimelineWithPeriodSelector.css'; // Import or create a stylesheet for styling

const eventsData = [
  { "label": "Event 1", "start": new Date("2024-01-01"), "end": new Date("2024-01-03") },
  { "label": "Event 2", "start": new Date("2024-01-05"), "end": new Date("2024-01-08") },
  // Add more events as needed
];

const TimelineWithPeriodSelector = () => {
  const timelineStart = new Date("2024-01-01");
  const timelineEnd = new Date("2024-01-10");
  const [selectedPeriod, setSelectedPeriod] = useState([timelineStart, timelineEnd]);
  const [zoom, setZoom] = useState(1);

  const handlePeriodChange = (value) => {
    setSelectedPeriod(value);
  };

  const handleZoomChange = (newZoom) => {
    setZoom(newZoom);
  };

  return (
    <div>
      <ReactZoomPanPinch
        initialZoom={zoom}
        initialPan={{ x: 0, y: 0 }}
        minZoom={0.1}
        maxZoom={3}
        onZoomChange={handleZoomChange}
      >
        <Timeline
          data={eventsData}
          width={800} // Adjust the width as needed
          height={100}
          margin={{ left: 50, right: 10, top: 0, bottom: 0 }}
        />
      </ReactZoomPanPinch>
      <div className="period-selector">
        <Slider
          value={selectedPeriod}
          min={timelineStart}
          max={timelineEnd}
          onChange={handlePeriodChange}
          withBars
        />
        <div className="selected-period-label">
          Selected Period: {selectedPeriod[0].toLocaleDateString()} - {selectedPeriod[1].toLocaleDateString()}
        </div>
      </div>
    </div>
  );
};

export default TimelineWithPeriodSelector;

Don't forget to create or import the stylesheet for styling (TimelineWithPeriodSelector.css):

/* TimelineWithPeriodSelector.css */

.period-selector {
  margin: 20px;
}

.selected-period-label {
  margin-top: 10px;
  text-align: center;
}

Now, you can use this combined component in your main application file:

// App.js

import React from 'react';
import TimelineWithPeriodSelector from './TimelineWithPeriodSelector';

const App = () => {
  return (
    <div>
      <h1>Timeline with Period Selector and Zoom</h1>
      <TimelineWithPeriodSelector />
    </div>
  );
};

export default App;

Adjust the code according to your specific requirements, and feel free to further customize the styling and functionality based on your needs.

[cee-ramraj]

The features in Live playback/ timeline feature should be replicated in history timeline feature.

Have a single component for both live and history to be called by either live or history. This should have the following: -

1. Timeline change using 'From' and 'To' editable buttons for date and time.
2. Start and End time period selection as discussed
3. period dragging with tracks dimming/ hiding
4. choice to either hide or dim tracks outside period window
5. Stats and table should reflect only those that are shown on the display on hiding the tracks.