Redesign the website homepage

[isaacbrodsky]

Here are some work in progress screenshots:

Goals are for the h3geo.org home page to be more informative and useful.

• [ ] Paste in one or more hexagon IDs and see where they are.
• [ ] Paste in coordinates and see the hexagon ID
• [ ] "Where am I" in H3 (using the user location, if permission granted)
• [ ] More informative text - what is it, what can it be used for, what are facts someone needs to know about it

I adapted the code from deck.gl. There is still a lot of extra abstraction that can be cleaned up and removed here. We will also need to substitute appropriate basemap keys for this website.

[coveralls]

coverage: 98.826%. remained the same when pulling f1fe93e575f86a5baa9d5df30462a3cb75062456 on isaacbrodsky:website-deck into ecc0d254d2fcc93a8df807b21e116f942092d161 on uber:master.

[ajfriend]

How easy would it be to let users click on the map to select and deselect hexes? And maybe in a way that would sync with the text box of given hexes?

[isaacbrodsky]

How easy would it be to let users click on the map to select and deselect hexes? And maybe in a way that would sync with the text box of given hexes?

The text box and the map can certainly be synchronized to each other. Right now we need to remove a lot of deck.gl's example boilerplate to make that state code easier to follow.

Selecting and deselecting hexes is possible but depends heavily on the exact logic for the selection interaction. Maybe we could use the approach @nrabinowitz mentioned to figure out what resolution of cell to select for a click?

[isaacbrodsky]

@ajfriend can you look into the license/snyk check and let me know what's going on? I do not have access to that report.

[ajfriend]

I got added to Synk, here's what it is complaining about:

I'm asking if we can have external accounts also added to Synk.

[ajfriend]

Oh, its "snyk". Not "synk". :/

[dfellis]

Now that it's building, here's some updated screenshots. :)

[ajfriend]

Amazing! This is super exciting, and the screenshots look great!

I'll try building locally to test things out in the next few days.

Quick thoughts just based off of the screenshots: Of the information you're displaying in each cell, I'd actually consider the following to be fairly "advanced" H3 content that the average user probably wouldn't know what to make of:

• pentagon
• base cell
• icosa faces
• indexing digits

For a maximally-welcoming front-page display, I wonder if we'd want to limit it down to just the basics of what might be the most relevant to a new user:

• cell id
• resolution
• center (and should we specify lat/lng order?)

Maybe a separate view could provide more of the advanced cell stats, or just reordering or deprioritizing the advanced stuff? Also, all this info might be fine, this is just my first impression :)

[isaacbrodsky]

Maybe a separate view could provide more of the advanced cell stats, or just reordering or deprioritizing the advanced stuff? Also, all this info might be fine, this is just my first impression :)

I agree these things can move off to a new page that acts as the official "index inspector". The home page should focus on:

• Showing the overall grid structure
• Allowing the user to copy paste some indexes and see what they are
• Allow the user to enter their own location, or some location they got elsewhere, and see how it looks in H3 (what is the index for this coordinate pair)

Things that will move to another page include:

• Navigating the grid structure (children, parents, neighbors)
• Advanced details of an index that aren't things we expect users to need to easily copy/paste for development use - so the indexing digits, etc.

[isaacbrodsky]

Some notes from reviewing this live:

• It would be nice to just select a resolution for the user automatically
• It would be nice on mobile to show where the user is. We probably need to shrink the map & disable touch interactions so it doesn't mess up scrolling the rest of the page.
• It would be great to have more eyes on the text that's shown under the map.
• TBD if the details stay on the home page or which details are shown -- maybe we can rank what we want and choose a couple of them.

[dfellis]

I have to note that I can't really test this as it currently is with the switch to mapbox, as it needs a mapbox token to load the tiles, and the dev console reports that it's not present.

Secondarily, I'm not sure if it's related to the tiles failing to load or not, but it can never resolve my location.

Somewhat unrelated, it seems the snyk integration has broken entirely (or they've blocked me from viewing it, as the details button even for the "Public Github" fails after I log in).

[isaacbrodsky]

That shouldn't be related to the Mapbox failure. I believe it should run with a free Mapbox account but yes it is a limitation of using Mapbox.