Popups/Info View: create initial design

[abettermap]

Summary

This can be just a wireframe, whiteboard, CodePen demo if it's super easy, or even a text outline, but let's get something in place before any heavy coding.

Intent

The plan at the time of writing is to:

1. Use standard popups with basic info (language name + another field or two) as a landing/gateway (via a View details button or similar) to a much more detailed view.
2. ...which will contain all the other goodies. The bulk of this issue will involve organizing said goodies into a meaningful, clean, intuitive, aesthetic UI.

UI structure and ideas

Even with a well-organized UI there is a lot going on, so we need to choose how to display it carefully.

• Where it makes sense, organize into sections for intuitive grouping purposes.
• Use collapsible/expandable sections, toggled by clicking their heading prefixed by some combination of + or - or > icons. The most important ones could be expanded by default, the others collapsed. Or, if it's not too busy, all expanded.
• Alternative to collapsible sections: tabs (example). These are much harder to work with, however, and starts to get limiting horizontally. Therefore should treat as a last resort and assume we can keep it clean without inviting Tabs to the UI party.
• If sections are used, their items could share a single line in some cases (as long as it's not crowded). Would save considerable space.
• Many records do not have values for certain fields. Whenever possible, let's try to still retain the element for the sake of UI consistency. For example, if there isn't a Glottocode then use "N/A" instead (this would be done in JS on the client-side, not the data). This might be a terrible approach for some fields, however, so let's play it by ear, but consider another argument for leaving the UI element intact regardless of populated value: to promote curiosity. For example, if a user clicks a point and sees a popup for the first time and there is an "N/A" for an item or two, at least they will know that info exists and they may be more inclined to poke around more, whereas an omitted UI item would remain unknown to them.
• If there is time for Add "See Related" functionality #20 then let's assume that anything that has a route (aka linkable) will be a link in the popup.

Content

Just a rough suggested organizational outline at this point, mainly based off the details found in the Schema/Requirements. The UI is in very early stages largely confined to that sheet so far, so let's instead add to this issue as we go along.

Intro

Centered text, with Heading the largest in the view.

• Heading: Endonym in a lot of instances is certainly the prettiest of all the data and could be a respectful nod to the native speakers to show their version of the language name before the English one. Less interesting if it's already in English, but obviously don't show it twice in that scenario. And we need to resolve Correctly show endonyms on all platforms #18 of course...
• Sub-heading: language name in English (maybe in parentheses or italics). Omit if same as endonym.

Classification info

Hopefully a better section title, but these ones:

• ISO 639-3
• Glottocode
• Top-Level Family

Stats

This section, focused on class-based and/or quantitative-ish info, is just part of Jason's mental UI grouping, but developers might not exactly represent the general user base 😄 . So, let's modify/juggle as needed.

• Local Size: if we have only 5 classes, I was thinking in addition to the text we could include a "cellular signal strength" icon to represent the size (e.g. 2 bars for a value of 2). I was also thinking of including a symbol that matches that of whatever we use in the map to depict local size, but that could get out of hand in a popup if a size-based graduated symbol style is used.
• Local Status: for starters, this can likely just be text. But if there is a clever way to symbolize each of the types as an icon in the map, then that could be included as a supplement to the text in the popup.
• Global Speaker Total: not sure how much detail this one should have, but perhaps a rank could be included? e.g. Global speakers: 1,424,928 (10th) or something.
• AES: again, icon might be a neat supplement here if it makes sense to use one in the map. Or, if it can be treated numerically as a scale, perhaps the cell-signal bars again (although there are six classes here, so maybe that's a deal-breaker). Either way, could certainly consider a coloring system as well (e.g. best = green, worst = dark red).

Where spoken

Hopefully a better heading than that, but basically the global-ish info:

• Region
• Primary Country (emoji flag if available)
• Secondary Country (emoji flag if available). Possibly combine with Primary Country into a list, and assume or denote that the first one is primary.
• Global Speaker Total

Local geography

Less exciting than the other sections, although neighborhood may be more important than the others. If these fields are used then maybe display in a smaller, more subtle manner and/or put it further down the view.

• Neighborhood
• Addl Neighborhoods: if used, could maybe be grouped into a list with "Neighborhood" and either assume or denote that the first one is the main one.
• County
• Town

Media

• ELA Video: YouTube embed
• ELA Audio: SoundCloud embed
• ELA Story Map: outbound link or possibly embed

Description

Description can be quite large, so put it at the bottom of the view and make it collapsible at ~100ish characters with a standard Read more... to toggle the remainder. Determine if <a> or other HTML will be included and, if so, set dangerouslySetInnerHTML on the React component.

Sharing

We haven't discussed social sharing too much but if routing does get implemented at least at a per-feature level then we could take advantage of the shareable nature with a "Share this" section for various platforms. This is not in the SOW though, so (assuming there is interest) treat as a wishlist item.

Examples

Example from COVID project:

Example from SBHT popup (click More Info button at top left):

[rperlin-ela]

Looks great, and if I understand right now describes what will appear in the Details panel. We might not want to squeeze everything in there, but let's put it all in at first if possible and whittle down from there.

Re: sharing, wishlist makes sense, but this would be stellar. I could see a lot of people wanting to share their community/dot, which could drive lots of traffic to the map.

[abettermap]

Awesome. I’m confident I can fit all the important stuff without crowding. Some sections may need to be expanded via click if it’s too busy, but I’ll see how it’s looking before I resort to that.

I don’t think the UI part of the sharing would take terribly long, but there are some things I’ll need from you regarding what appears in the sharing previews (the little auto-generated content when you post a link). Basically the name/title of the post and the description/summary, and an image to use (can be a screenshot of the map perhaps).

Unfortunately a server and setup are needed to make it truly dynamic (e.g. a post preview description based on selected feature details), but we can at least have a catch-all blanket blurb and title.

Can explain more if not clear. Belongs in a new issue though I’d say.

[rperlin-ela]

Ok, ready to work on this whenever, seems like a much later step.

[abettermap]

Yeah no hurry. Made an issue: #55

[abettermap]

closed by #69