Revamping the Project View: new layout, new graphs

[ptgott]

We're doing new things with the Project View. The accordion is out, and horizontal borders are in. It'll be a big, scrollable document with a navigation menu that scrolls to specific sections for you. The link to the mockup is below. Each checkbox corresponds to a single segment. These are small, so pick a few!

General

• (Paul) Work up the JS/CSS/HTML for the general layout of the Project Page, irrespective of any particular segment. This includes the navigation menu for segments of the page.

Segments

• Name and address. (proj_name, proj_addre... but soon will have one-to-many addresses)
• Location map (latitude, longitude)
• Ownership type (proj_owner_type)
• Units in project histogram (individual: proj_units_tot, proj_units_assist_max. Histogram data not yet available)
• Bedroom mix (data not linked yet)
• Tax assessment (data not linked yet)
• REAC score (reac_score field is array of associated reac table records)
• Status icons: TOPA notices, subsidy status, median neighborhood rent (topa field, subsidy field -> poa_end)
• Subsidies (the current timeline with some added info)
• Public transit accessibility (already have, mostly, but make sure it fits the other segments)
• Surrounding area development (already have, mostly, but make sure it fits the other segments)
• Affordable housing nearby (already have, mostly, but make sure it fits the other segments)
• Neighborhood trends (hold off on this)

[ableo57]

https://app.moqups.com/[email protected]/zeZOXaXpNx/view/page/a92dfb33e

[NealHumphrey]

@ptgott, @ostermanj , @wassona I've updated the specific project endpoint to now provided nested json with the one-to-many tables.

So far this is only for the one-to-many tables that currently have an nlihc_id. This means that the topa, subsidy, real_property and reac_score tables are now available on the project endpoint whenever you request the data for a specific nlihc_id. For performance reasons the data from these tables are not added to the json when a list of all projects is requested. You can test it here:
http://housinginsights.us-east-1.elasticbeanstalk.com/api/project/NL000196

• If there are matching records, they available as an array of objects attached to the key of the table name (i.e. 'topa').
• If the result is an empty array, it means there were no matching records
• If something went wrong in the query, the value for that field will be 'Error' instead of an array. This should be rare, but your code should check if it's a string or an array - a string means there was a problem in the data

This doesn't have dc_tax or the one-to-many project to addresses that @jkwening is adding, as some database manipulation needs to happen for that. Will add those, probably next week.

[NealHumphrey]

Note I have also edited the original description to add some notes about which fields to use and which ones are not yet available.

[ptgott]

@NealHumphrey This looks good and intuitive, thanks!

[ptgott]

#484 is a WIP pull request that addresses the layout changes of the building view.
Updated 25 Aug, following Neal's comment:

• Make the sidebar fixed rather than collapsible
• Replace the in-progress auto-scroll functionality with a simple, animation-free call to scrollIntoView (or similar, e.g. anchor links).
• Ensure a consistent HTML structure across the partials that make up the Project View.

[NealHumphrey]

@ptgott Thanks for working on this. I took a look at the WIP branch. There's a few things to consider as you continue working on this:

1. Top priority is getting this ready to open up for other people to also work on. The layout object is a great setup that provides us some good structure for doing this. I think that the remaining task necessary is doing the 'adjust css' bullet as well as the accompanying HTML structure in the partials (which currently use a variety of approaches in their structure)

What's your availability/timeline to work on that part? I'm working on this project all weekend so I can also take on that part if you prefer. Want to get it in ASAP so that we can open up creating project view components to the rest of the team, definitely before our upcoming Tuesday meeting.

2. Having the navigation created from the layout object structure is a great approach. A few comments on the way it's been set up so far (recoginzing it's still a work in progress):

   a) I think we'd be better off building the navigation into the Bootstrap column layout, instead of having it overlay the page body. Nearly all test users did not seem to understand they could click the sub-nav-button (i.e. "segments index" in this view, though testing was of course done on the map view) to open/close the sidebar - something about our styling of that isn't working.
   b) Using the mouse scroll wheel or the browser scroll bar click-drag methods are overriden by your autoscroll, yielding some unintuitive behavior. That definitely needs to be fixed so that they behave normally.

[ptgott]

@NealHumphrey, thanks for looking this over! I can finish the top-priority items tomorrow. I'll adjust the to-do list to account for your suggestions.

[NealHumphrey]

Sounds good! Feel free to reach out if you want to discuss any implementation choices on it - I'll be online working on database stuff most of the day.

[ptgott]

@NealHumphrey I've pushed some commits to PR #484. They adjust the spacing of some of the elements within the Project View, make the sidebar fixed (rather than collapsible) and remove the (broken) animated auto-scroll behavior. I was having some difficulty with the Bootstrap grid layout, so I've opted for library-less CSS. I've also shied away from editing the CSS of individual partials, with the assumption that these are still under development, with individual elements subject to change.

[NealHumphrey]

@ptgott Great; it's moving in the right direction.

Are you planning to do anything else on this today? Whenever you're done I'll start putting in some placeholders for the additional sections and do some work on the individual elements so that there's a good model to mimic for the ones added - we should be ready at that point to open this back up to dev from others.

[ptgott]

Good stuff. I'll turn it over to you!

[NealHumphrey]

@ptgott would this polyfill work for the smooth scroll you wanted to use? http://iamdustan.com/smoothscroll/

[ptgott]

@NealHumphrey This looks nice. I haven't looked at the size or dependencies, but it's definitely along the lines of what I was shooting for.

[ostermanj]

I've been using jQuery animate in filter-view.js and router.js for smooth scrolling since we're already loading that. Not sure it fits your purpose but you can find the examples there.

…

On Sat, Aug 26, 2017 at 4:57 PM Paul Gottschling ***@***.***> wrote: @NealHumphrey <https://github.com/nealhumphrey> This looks nice. I haven't looked at the size or dependencies, but it's definitely along the lines of what I was shooting for. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#471 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ANAvkJdPhH4Woz5nWJxV_tKKAxflaqUPks5scJTMgaJpZM4O4RIr> .

[NealHumphrey]

@ptgott I've pushed a bunch of additional revisions. I pushed them to your fork so they've shown up on the same pull request #484 (I didn't actually mean to do it that way, but should be ok).

Overview of changes:

• I used the semantic-ui attached header and attached segment to supply some basic clean section breaks. Those require sibling elements for header/segment (rather than nested) so I refactored your wrapAndAppendSegment code a little bit.
• I reverted back to a Bootstrap container - that provides the option for 4 fixed sizes main body widths instead of a percent-based continuous width. With a large variety of sub-section layouts I think it's easier to debug layout issues with a few discrete screen widths. I haven't adjusted the sidebar css yet - my solution for getting it to work is a bit hacky, but it's ok for the short term. I think we should change the sidebar to use a framework so that we can easily get nice additions like collapsing to dropdown on mobile screen widths.
• I set up a couple demos of sections such as location, topa, etc - I use a lot of placeholder images. I based it loosely on this moqup - same one you link to above. The main thing to imitate in new sections is the use of a table to display the data.
• I changed which data source the render functions used to instead be the 'full' data object that is now available from the API as noted in my comment above. It has nested JSON for the one-to-many relationships.
• TOPA section is a working demo of rendering the raw data into a clean table format. A project that has several TOPA notices is Wah Luck House: http://localhost:8000/tool/#/HI/building=NL000319

Here's a screenshot:

It should be ready to merge - do let me know if you find any issues, I'll merge tomorrow so that it'll be ready for people to take on different parts of it during tomorrow's session.

[ptgott]

@NealHumphrey
Overall the changes look good!