Merge pull request #13 from stevekirks/upgrade

Highlight node on click

public/data/brisbane/geojson-stops.json

@@ -28,7 +28,6 @@
  "type": "Feature","geometry":{"type":"Point","coordinates":[152.99126,-27.444027]},"properties":{"stopId":"1960","name":"1960"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[152.9699,-27.62372]},"properties":{"stopId":"10969","name":"10969"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.09642,-27.470943]},"properties":{"stopId":"5931","name":"5931"}},{
- "type": "Feature","geometry":{"type":"Point","coordinates":[153.01909,-27.467804]},"properties":{"stopId":"1","name":"1"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[152.9527,-27.11]},"properties":{"stopId":"310086","name":"310086"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.03603,-27.457472]},"properties":{"stopId":"206","name":"206"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.01772,-27.497889]},"properties":{"stopId":"1880","name":"1880"}},{
@@ -37,18 +36,14 @@
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.19221,-27.52361]},"properties":{"stopId":"320675","name":"320675"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.06335,-27.443916]},"properties":{"stopId":"2822","name":"2822"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[152.97827,-27.409721]},"properties":{"stopId":"2193","name":"2193"}},{
- "type": "Feature","geometry":{"type":"Point","coordinates":[153.01753,-27.47161]},"properties":{"stopId":"10709","name":"10709"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[152.98903,-27.636639]},"properties":{"stopId":"11259","name":"11259"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.10323,-27.503195]},"properties":{"stopId":"6298","name":"6298"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.02045,-27.496777]},"properties":{"stopId":"319665","name":"319665"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.02188,-27.4725]},"properties":{"stopId":"317593","name":"317593"}},{
- "type": "Feature","geometry":{"type":"Point","coordinates":[152.99374,-27.307388]},"properties":{"stopId":"10298","name":"10298"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[152.94066,-27.50736]},"properties":{"stopId":"4585","name":"4585"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.31767,-27.581139]},"properties":{"stopId":"311156","name":"311156"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.17374,-27.660583]},"properties":{"stopId":"320683","name":"320683"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.0602,-27.408081]},"properties":{"stopId":"11139","name":"11139"}},{
- "type": "Feature","geometry":{"type":"Point","coordinates":[153.01888,-27.465237]},"properties":{"stopId":"600030","name":"600030"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.08186,-27.225166]},"properties":{"stopId":"319796","name":"319796"}},{
- "type": "Feature","geometry":{"type":"Point","coordinates":[153.0165,-27.473082]},"properties":{"stopId":"1090","name":"1090"}},{
  "type": "Feature","geometry":{"type":"Point","coordinates":[153.08156,-27.225477]},"properties":{"stopId":"600633","name":"600633"}}]
  }

public/data/brisbane/stops-list.json

@@ -1 +1 @@
-["19062","10802","204","310034","2481","320674","317994","1132","158","19050","5064","4473","319805","11137","3932","11168","3365","310111","3944","19063","16507","10824","4641","1815","1960","10969","5931","1","310086","206","1880","319492","4193","320675","2822","2193","10709","11259","6298","319665","317593","10298","4585","311156","320683","11139","600030","319796","1090","600633"]
+["19062","10802","204","310034","2481","320674","317994","1132","158","19050","5064","4473","319805","11137","3932","11168","3365","310111","3944","19063","16507","10824","4641","1815","1960","10969","5931","310086","206","1880","319492","4193","320675","2822","2193","11259","6298","319665","317593","4585","311156","320683","11139","319796","600633"]

src/app.tsx

@@ -47,6 +47,20 @@ const App = () => {
     setKnownUrlParams((prevKnownUrlParams) => { return { ...prevKnownUrlParams, loopTime: pLoopTimeMinutes }; });
   }
 
+  const handleOnClickGeoPoint = (info: any) => {
+    console.log(info.object.properties.name)
+    const node = info.object.properties.name;
+    const highlightedNodeIdx = highlightedNodes.indexOf(node);
+    const pHighlightedNodes = highlightedNodes.slice(0);
+    if (highlightedNodeIdx == -1) {
+      pHighlightedNodes.push(node);
+    } else {
+      pHighlightedNodes.splice(highlightedNodeIdx, 1);
+    }
+    handleHighlightedNodes(pHighlightedNodes);
+    reloadTrips();
+  }
+
   const handleOnHoverGeoPoint = (info: any) => {
     setPopupInfo(info !== null ? info.object : null);
   }
@@ -218,7 +232,8 @@ const App = () => {
           >
           <DeckGLOverlay
             color={appSettings.color}
-            handleOnHover={handleOnHoverGeoPoint}
+            handleOnClickGeoPoint={handleOnClickGeoPoint}
+            handleOnHoverGeoPoint={handleOnHoverGeoPoint}
             highlightColor={appSettings.highlightColor}
             highlightedNodes={highlightedNodes}
             loopLength={loopLength}

src/data-interfaces.ts

@@ -18,7 +18,8 @@ export interface AppSettings {
 
 export interface DeckglOverlayProps {
     color: number[],
-    handleOnHover: (info: any) => void,
+    handleOnClickGeoPoint: (info: any) => void,
+    handleOnHoverGeoPoint: (info: any) => void,
     highlightColor: number[],
     highlightedNodes: string[],
     loopLength: number,

src/deckgl-overlay.tsx

@@ -87,7 +87,7 @@ const DeckGLOverlay = (props: DeckglOverlayProps) => {
       getTimestamps: (d: Trip) => d.segments.map((p: Waypoint) => p.timestamp),
       opacity: 0.3,
       trailLength: props.trailLength,
-      widthMinPixels: 2,
+      widthMinPixels: 3,
       transitions: {
         getColor: {
           type: 'interpolation',
@@ -111,8 +111,8 @@ const DeckGLOverlay = (props: DeckglOverlayProps) => {
       pickable: true,
       pointRadiusScale: 100,
       stroked: true,
-      onHover: props.handleOnHover,
-      onClick: (info: any) => console.log(info.object.properties.name),
+      onHover: props.handleOnHoverGeoPoint,
+      onClick: props.handleOnClickGeoPoint,
       transitions: {
         getFillColor: {
           type: 'interpolation',

src/info-box.tsx

@@ -111,11 +111,8 @@ const InfoBox = (props: InfoBoxProps) => {
       highlightedNodesCommaSep = [];
     }
     let pHighlightedNodes: string[] = highlightedNodesCommaSep.map((n: any) => n.value);
-    let highlightedNodesRemoved = props.highlightedNodes.length > pHighlightedNodes.length;
     handleHighlightedNodes(pHighlightedNodes);
-    if (highlightedNodesRemoved) {
-      reloadTrips();
-    }
+    reloadTrips();
   }
 
   const handleDataSelectChange = (dataSampleOption: SingleValue<any>) => {    
@@ -169,7 +166,6 @@ const InfoBox = (props: InfoBoxProps) => {
               isMulti
               options={nodeListOptions}
               onChange={handleHighlightNodeChange}
-              onMenuClose={props.reloadTrips}
               placeholder={"Select " + props.appConfig.nodeLabelPlural}
               value={highlightedNodesVl}
             />