Web workers

site/gatsby-config.js

@@ -35,7 +35,7 @@ module.exports = {
         respectDNT: true
       }
     },
-
+    'gatsby-plugin-workerize-loader',
     // Parse all markdown files (each plugin add/parse some data into graphQL layer)
     {
       resolve: `gatsby-transformer-remark`,

site/package.json

@@ -30,7 +30,7 @@
     "babel-eslint": "^10.0.1",
     "change-case": "^3.1.0",
     "codeclimate-test-reporter": "^0.5.1",
-    "deck.gl": "^8.0.13",
+    "deck.gl": "^8.0.16",
     "disqus-react": "^1.0.5",
     "gatsby": "^2.18.4",
     "gatsby-link": "^2.1.1",
@@ -93,6 +93,7 @@
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
     "flat": "^4.1.0",
+    "gatsby-plugin-workerize-loader": "^1.1.0",
     "gh-pages": "^2.2.0",
     "husky": "2.3.0",
     "jest": "^24.8.0",

site/src/components/Map/deckAttributes.worker.js

@@ -0,0 +1,81 @@
+export const onmessage = function(e) {
+  console.log("Message received from main script");
+  var workerResult = "Result: " + e.data[0] * e.data[1];
+  console.log("Posting message back to main script");
+  postMessage(workerResult);
+};
+
+export function helloworld(test) {
+  console.log('hello world')
+  console.log(test)
+
+}
+
+export function getTileData({ x, y, z }) {
+  const baseurl =
+    "https://data.kylebarron.dev/all-transit/tmpjson/schedule/4_16-20";
+  return fetch(`${baseurl}/${z}/${x}/${y}.json`)
+    .then(response => {
+      let data;
+      if (response.status === 200) {
+        data = response.json();
+      }
+      return data;
+    })
+    .then(data => createBinaryAttributes(data));
+
+  // console.log(data)
+  // return createBinaryAttributes(data);
+}
+
+const createBinaryAttributes = (data) => {
+  console.log('here')
+  if (!data) {
+    return {
+      length: 0,
+      startIndices: new Uint16Array(0),
+      positions: new Float64Array(0),
+      timestamps: new Float64Array(0)
+    };
+  }
+
+  console.log("here2");
+
+  // data is an array of Linestring coordinates, which are themselves arrays of
+  // points
+  const positions = [];
+  const timestamps = [];
+  const startIndices = [0];
+  let coordIndex = 0
+
+  for (const line of data) {
+    for (const coord of line) {
+      positions.push(...coord.slice(0, 2))
+      timestamps.push(...coord.slice(2));
+      coordIndex += 1;
+    }
+    startIndices.push(coordIndex);
+  }
+
+  console.log(positions);
+  console.log(timestamps);
+  console.log(startIndices);
+
+  const dataObj = {
+    length: startIndices.slice(-1)[0],
+    startIndices: new Uint16Array(startIndices),
+    attributes: {
+      getPath: {
+        value: new Float64Array(positions),
+        size: 2,
+      },
+      getTimestamps: {
+        value: new Float64Array(timestamps),
+        size: 1,
+      }
+    }
+  }
+  console.log('dataObj')
+  console.log(dataObj);
+  return dataObj;
+}

site/src/components/Map/index.js

@@ -27,6 +27,7 @@ import {
   minOperatorInfoZoom,
   maxScheduleAnimationZoom
 } from "./constants";
+import DeckWorker from "./deckAttributes.worker.js";
 
 // You'll get obscure errors without including the Mapbox GL CSS
 import "../../css/mapbox-gl.css";
@@ -55,6 +56,16 @@ class Map extends React.Component {
     time: 65391
   };
 
+  componentDidMount = () => {
+    this.worker = typeof window === "object" && new DeckWorker();
+
+    // if (window.Worker) {
+    //   // this.worker.postMessage(['hello world'])
+    //   this.worker.helloworld('test')
+    //   console.log('message posted to worker')
+    // }
+  };
+
   componentWillUnmount = () => {
     if (this._animationFrame) {
       window.cancelAnimationFrame(this._animationFrame);
@@ -226,43 +237,58 @@ class Map extends React.Component {
     const baseurl =
       "https://data.kylebarron.dev/all-transit/tmpjson/schedule/4_16-20";
 
+    // 1206 - 1538 - 12;
     return [
-      new TileLayer({
-        minZoom: minScheduleAnimationZoom,
-        maxZoom: maxScheduleAnimationZoom,
-        visible: this.state.enableScheduleAnimation,
-        getTileData: ({ x, y, z }) =>
-          fetch(`${baseurl}/${z}/${x}/${y}.json`).then(response => {
-            if (response.status === 200) {
-              return response.json();
-            }
-            return [];
+      new TripsLayer({
+        data: () =>
+          fetch(
+            "https://data.kylebarron.dev/all-transit/tmpjson/schedule/4_16-20/12/1206/1538.json"
+          ).then(response => response.json()).then(data => {
+            console.log(data)
+            return data;
           }),
-
-        // this prop is passed on to the TripsLayer that's rendered as a
-        // SubLayer. Otherwise, the TripsLayer can't access the state being
-        // updated.
+        getPath: d => d.map(p => p.slice(0, 2)),
+        getTimestamps: d => d.map(p => p.slice(2)),
+        getColor: [253, 128, 93],
+        getWidth: 3,
+        widthUnits: "pixels",
+        opacity: 0.7,
+        rounded: true,
+        trailLength: 50,
         currentTime: this.state.time,
-
-        renderSubLayers: props => {
-          return new TripsLayer(props, {
-            data: props.data,
-            getPath: d => d.map(p => p.slice(0, 2)),
-            getTimestamps: d => d.map(p => p.slice(2)),
-            getColor: [253, 128, 93],
-            getWidth: 3,
-            widthUnits: "pixels",
-            opacity: 0.7,
-            rounded: true,
-            trailLength: 50,
-            currentTime: props.currentTime,
-            shadowEnabled: false
-            // If you get binary data working in the format Deck.gl expects,then
-            // uncomment this:
-            // _pathType: "open" // this instructs the layer to skip normalization and use the binary as-is
-          });
-        }
+        shadowEnabled: false
       })
+
+      // new TileLayer({
+      //   minZoom: minScheduleAnimationZoom,
+      //   maxZoom: maxScheduleAnimationZoom,
+      //   visible: this.state.enableScheduleAnimation,
+      //   getTileData: data => this.worker.getTileData(data),
+
+      //   // this prop is passed on to the TripsLayer that's rendered as a
+      //   // SubLayer. Otherwise, the TripsLayer can't access the state being
+      //   // updated.
+      //   currentTime: this.state.time,
+
+      //   renderSubLayers: props => {
+      //     return new TripsLayer(props, {
+      //       data: props.data,
+      //       // getPath: d => d.map(p => p.slice(0, 2)),
+      //       // getTimestamps: d => d.map(p => p.slice(2)),
+      //       getColor: [253, 128, 93],
+      //       getWidth: 3,
+      //       widthUnits: "pixels",
+      //       opacity: 0.7,
+      //       rounded: true,
+      //       trailLength: 50,
+      //       currentTime: props.currentTime,
+      //       shadowEnabled: false,
+      //       // If you get binary data working in the format Deck.gl expects,then
+      //       // uncomment this:
+      //       // _pathType: "open" // this instructs the layer to skip normalization and use the binary as-is
+      //     });
+      //   }
+      // })
     ];
   };