uci-cubesat / uci-cubesat-dashboard Goto Github PK

combine with HTML/CSS/JS.
Email format is highly flexible.

Week5:

email template using HTML and send using python SMTP library

Week6:

embed prediction data from skyfieldSercive.py into email's content

Current Implementation:

A Embedded Google Map component that listen to clicks. User clicking on the map translate to LatLng
A Basic Select component that listen to clicks. User clicking on the dropdown translate to Selected
A Basic Table to display content, content is fetch from the backend flask server and store in an array.

Current Behavior:

Content of the table update on either change of marker location on GoogleMap or change of selection in Dropdown menu

Pseudo code of existing behavior:

onMapMarkChange or onDropDownChange:
   upcomingPass = fetch(`${BACKEND_SERVER}/prediction?satellite=${dropdownSelection}&latitude=${marker.lat}&longitude=${marker.lng}`)

Change:

Create a new Collapsible Table component in React.js. The Collapsible Table should include Upcoming Passing Predictions for all satellite base on marked LngLat on the Embedded GoogleMap

When not expanded, table should look like

       Satellite Name              Occurrence 
______________________________________________
V.    ISS (Zarya)                    5
V.    AmicalSat                      2
V.    UCI-CubeSat                    1

...

V.    BeeSat                         3

When expanded, table should look like

       Satellite Name              Occurrence 
______________________________________________
V.    ISS (Zarya)                    5

  Detail
  ____________________________________
    Peak        Rise          Set           Duration
    10:30       10:25         10:35          10
    .....



V.    AmicalSat                      2
V.    UCI-CubeSat                    1
V.    BeeSat                         3

Our current dashboard page is built as a functional prototype and minimal style consideration. With Material UI, we can customized our UI component using a combination of .CSS and JavaScript.

Week5:

Go over some example of other amazing project built using MaterialUI
https://mui.com/material-ui/discover-more/showcase/

Clone material-kit-react project locally and examine the code, an example provided by MUI
https://github.com/devias-io/material-kit-react

Write a technical discovery document that examine what our project is lacking in terms of UI/Style, and the steps/resources needed to improve/refactor our React.js/CSS components. Be prepare to present your findings at the end of the discovery!

A Guide to Technical Discovery

Week 6:

Rework existing frontend component

Relevant Information/Resource

Animation examples using Mapbox APIs:

Basic example with a moving point
React Mapbox plane tracker

Other examples from the internet:

Starlink tracker
Satnogs tracker

Current Proof of Concept:

I already have some working code, using example from [Basic example with a moving point] to add a point (representing AmicalSat's real time position. These snippet of code is currently disabled and can be re-enabled by if (context.tabName !== "tracker")`.

  const [pointData, setPointData] = useState(null);
  ...
  ...
  useEffect(() => {
  if (context.tabName !== "disabled") {
    return;
  }
  const animation = window.requestAnimationFrame(async () => {
    const pathResponse = await getPath();
    setPointData({
      type: "Point",
      coordinates: [
        pathResponse["latLng"]["lng"],
        pathResponse["latLng"]["lat"],
      ],
    });
  });
  // Unmount
  return () => {
    window.cancelAnimationFrame(animation);
  };
}, [context.tabName, pointData]);
  ...
  ...
  <ReactMap>
  ...
    {pointData && (
    <Source type="geojson" data={pointData}>
      <Layer
        {...{
          type: "circle",
          paint: {
            "circle-radius": 10,
            "circle-color": "#007cbf",
          },
        }}
      />
    </Source>
  ...
  </ReactMap>

Adding a SVG icon

Add this SVG icon to replace the point icon

Adding a SatelliteLayer.js component

SatelliteLayer.js is a new GeoJson layer that include all satellite available in the current viewState/mapBoundary - E.g If the map is currently displaying areas of Orange County/LA, then SatelliteLayer.js should only display those satellite that are currently flying above Orange County/LA. If then the user move the map to a New York - those Satellites that were previously displayed needed to be unmounted from the map, and new Satellites above New York needs to be mounted

SatelliteLayer.js should contain these two state

1. const [featureCollection, setFeatureCollection] = useState(array of FeatureCollection or undefined);
2. const [pathPrediction, setPathPrediction] = useState(array of response from backend or undefined);

Feature Collection

FeatureCollection is an array of GeoJson layer, each GeoJson layer in the array represent a Satellite

Path Prediction

PathPrediction is an array response from Backend Flask Server, each response contain the LatLng information for a Satellite. Ideally, this response should contain more than just the current LatLng so we are not sending an API every other second to the backend asking for the current location of a Satellite

Display set number of rows and hide rest

Table Pagination

Heroku plans to cancel their free tier.

"Starting November 28, 2022, we plan to stop offering free product plans and plan to start shutting down free dynos and data services. We will be sending out a series of email communications to affected users."

Issue: Timestamp shown in prediction is in a non-standard format, resulting in Invalid Date on certain browser/device.

Warning message in console

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2022 Apr 21 12:11:41+00:00, _f: undefined, _strict: undefined, _locale: [object Object]
Error
    at Function.createFromInputFallback (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:137779)
    at Dn (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:162220)
    at $n (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:165566)
    at Vn (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:165432)
    at Hn (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:165150)
    at Gn (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:165924)
    at qn (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:165958)
    at r (https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:134652)
    at https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:496297
    at https://uci-cubesat-dashboard.herokuapp.com/static/js/main.b5bfb9a4.js:2:85151

This fix require changes in backend /api/v1/prediction endpoint and frontend Collapsible Table component

add some charts to fill out the page, can be scatter, box, violin, time series, histogram, etc.
content does not matter now, we will use chart as placeholders.
AnimalSat