trynmaps / opentransit-map Goto Github PK

• only affects the K/T route
• probably because the API lists the K/T as KT but the web-app tries to get K/T instead from the routes map that is returned

• the map should load and be visible even though the initial Relay query hasn't finished (it should load data in the background)

Issue can be experienced here: http://35.202.164.146/

This makes onboarding new members a lot easier as they won't have to set up the entire backend.

This will work by using the Prod API (already publicly accessible) instead of the local endpoint by default. This means that it'll be set to Prod by default.

The routes also don't show any stops or buses.
Problematic routes:

• BUS
• E
• K/T
• K-OWL
• L-OWL
• M-OWL
• N-OWL
• T-OWL
• 7R
• 76X
• 81X
• 82X
• 88
• 90
• 91

While many agencies internally record incidents (which can often cause bunching and gaps down the line for hours), the TTC (Toronto Transit Commission) makes then publicly available here: https://www.toronto.ca/city-government/data-research-maps/open-data/open-data-catalogue/#bb967f18-8d90-defc-2946-db3543648bd6

This ticket only tracks putting them on the map (use fake hardcoded data when implementing this)

API endpoint creation tracked here: trynmaps/tryn-api#30

Removed the good first issue tag from this because it seemed relatively complicated (unsure of whether deck.gl components support this) and unnecessary (I don't think that all map elements have to be interactive - a well-designed control panel should be enough).

See #58 for more issues related to the same bit of code.

Whatever relay is, it's filling the console with websocket errors, such as:

index.js:970 WebSocket connection to 'ws://localhost:8734/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

As part of visualizing speed, route segments (where a segment is from one stop to the next) should be coloured - in red/yellow/green similar to how you'd see it on Google Maps.

Notes:

• stops and routes are currently displayed using the Muni GeoJson file. For geographical stuff, the Turf.Js is pretty solid (it's being used the the API)
• the API doesn't return any speed-related data, so just make a random number for the speed
• also adding a toggle for whether to visualize speed would also be useful

I added a border override for the datetimepicker component in the css file, but both buttons highlight when you hover over one.

There needs to be an override for css hovering and make the buttons hover over seperately

• add a toggle for "live"
• when toggled, it'll automatically update the date/time every 15 seconds, which will trigger a map update
• we could use Relay subscriptions for this, which would also involve making changes to the API as to send events. Just adding a timer and refetching everything will be a lot easier and can be improved in the future.

references:
https://uber.github.io/react-map-gl/#/Documentation/advanced/custom-map-controls
https://uber.github.io/react-map-gl/#/Examples/markers-popups

show more of the city in default view (reduce zoom level from 15 to 13) and ensure map shows when db isn't available (assign default values of [] and {} to routes and trynState instead of null)

Looking at
https://github.com/trynmaps/opentransit-map/blob/master/src/Map.jsx#L252
it looks like we're adding the routes geojson as many times as there are routes selected, so if 5 routes are selected, the geojson of those 5 routes is rendered 5 times.
It might not make a difference because deckgl would know it's the same object (but it could always get mutated, so IDK about what optimizations it'd make), but we should look into not repeating calls unnecessarily.

On the app, hit refresh.

Note that the top-right corner "zoom" buttons are missing.

Click, hold, and then drag anywhere, see them appear.

They should load by default.

eg. J would be orange
N would be blue

So I think we'd want to make a config file that has something like

{
   'N-Judah': #hex-for-blue,
   ...
}

Add headlights and make a multi-color icon so it's easier to see which direction the bus is moving.

it's possible to choose a time for which we don't have any data - the client has no way of knowing if that's the case in advance though.

What the API does now: returns an empty list of buses
What the client does now: nothing (ie. renders the empty list of buses)
What the client should do: same as now - but show an error message (either a pop-up or in a red-textfield in the Time section)

Currently OpenTransit only works for San Francisco. We want to add support for other cities, starting with Toronto. This ticket is making a dropdown for choosing a city. It should be placed above the routes list and below the toggles.

needed for https://github.com/trynmaps/orion/wiki/Point-Reliability
idea: be able to drop a pin anywhere in the city and drag it around.

Selecting a stop will be needed in order to show reliability data for that stop - while selecting two would be needed for showing travel-times/speeds/reliability within that segment.
The flow could work like this:

1. selecting a stop selects it
2. selecting another stop on the same route (edit 5/16/18: and direction) creates a segment of the route
3. selecting any other stop will make that stop alone selected -> go to step 1

Part 1: Print out to console.log the selected stop IDs (either 0, 1, or 2 can be printed out)
Part 2: Make selected stops a different colour (or icon)
Part 3: Get the subsection of the route (if two stops are selected)
Part 4: Draw that subsection (if two stops are selected)

Let's have a PR for each part and merge before moving onto the next one. Also gave this the "mini-project" tag (think of it as a "Story" in JIRA :)

No bootstrap implementation on left-side checkboxes, lots of bootstrap options there, including checkboxes that are just prettier, or highlighty list items

https://getbootstrap.com/docs/4.0/components/list-group/

I'm adding react-materialize for now, open to feedback.

https://react-materialize.github.io/#/

All of materialize: http://materializecss.com

Makes it easy to quickly throw up pre-styled components.
Also gives us a grid CSS framework to work with.

Is there a reason why we use bootstrap instead of something like Material-UI?

Bootstrap is dependent on jQuery for certain functionality which doesn't play nice with React. Using Material-UI seems like a more modern UI approach, and it uses the same grid system. We're also not heavily reliant on Bootstrap yet, so it seems switching would seem relatively painless.

Just a discussion, curious how everyone feels on it.

• they should always show up, even if no vehicles are running on it

Since first making this repo, React got a huge upgrade to 16, while deck.gl had multiple major releases. Same for Relay and GraphQL. Based on projects I started more recently, our map should lag a lot less. That said, I tried upgrading a few months ago and the zoom button broke. Still, we should update our packages. This PR tracks updating all packages such that the web-app will stay stable.

Right now they look and act like the same button, even though clicking on one fontawesome thing vs the other does open a different modal.

• right now there's no sorting - it's shown in the same order as defined in the GeoJSON
• they should be sorted like this:

C
E
F
J
K
L
M
N
PH
PM
T

1
...
14
14R
14X
...

• looks like it was caused by this: #83

• thanks to trynmaps/tryn-api#11, we must always supply an endTime to the API.

• like this is literally our initial feature; needed for demo tomorrow

Given the dropdown implemented in #87, the map should centre on the selected city.

[ideas/details added 3/1/18]
I'm unsure of how we'd represent northbound/southbound - in other transit maps all either buses look the same (Transit) or use really ugly images (Nextbus). I was thinking of using this image I made for a project last year (https://www.facebook.com/transibot/photos/a.632218450301186.1073741826.631950076994690/639876799535351/?type=1&theater) and rotating the "antenna" around the bus as to suggest its direction. Using its SVG we could also colour it according to the route.

add a setting/toggle for specifying whether the stops should be shown

• like clicking on the marker opens a small pop-up beside it. look through the deck-gl or mapbox-gl sites for how to do this.

• have a layer for each route, that contains all of its states
• have a layer for all the stops for each route

Right now just some sort of generic popup is used.

Bootstrap is included in the app might as well use it. https://getbootstrap.com/docs/4.0/components/modal/

Image of what they look like now:

Try using OpenTransit on your phone in portrait mode (landscape currently works semi-decently). In order to make our site mobile-friendly (or at least not anti-mobile), the control panel shouldn't cover the entire map.

The easiest way to do this that'll work for all types of mobile screens is likely to hide the control panel. This ticket tracks adding a border/vertical button to the control panel that when tapped shows/hides the screen.

There are one, or possibly three, bugs regarding how the App is initialized and sets up the Map component.

The code:

App.jsx

  loadRelay() {
    return (
      <QueryRenderer
        environment={this.state.environment}
        query={graphql`
            query AppAllVehiclesQuery($agency: String!, $startTime: String!, $endTime: String!) {
              ...Map_trynState
            }
          `}
        variables={{
          agency: 'muni',
          startTime: Date.now() - 15000,
          endTime: Date.now(),
        }}
        render={({ error, props }) => {
          if (error) {
            return <div>{error.message}</div>;
          } else if (props) {
            return (
              <Map trynState={props} />
            );
          }
          return <div>Loading</div>;
        }}
      />
    );
  }

This issue is about how the {props} variable passed to <Map> is bad somehow. Error is in browser:

index.js:2177 Warning: Failed prop type: Invalid prop `relay` of type `object` supplied to `Map`, expected a single ReactElement.
    in Map (created by Relay(Map))
    in Relay(Map) (at App.jsx:49)
    in ReactRelayQueryRenderer (at App.jsx:32)
    in div (at App.jsx:60)
    in App (at index.jsx:10)

See #58 for more information on the bit of code that's causing this issue.

Error is:

Warning: Failed prop type: The prop `trynState.isRequired` is marked as required in `Map`, but its value is `undefined`.
    in Map (created by Relay(Map))
    in Relay(Map) (at App.jsx:49)
    in ReactRelayQueryRenderer (at App.jsx:32)
    in div (at App.jsx:60)
    in App (at index.jsx:10)