Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Monitor: Add BiG-CZ Search #2663

Merged
merged 12 commits into from
Feb 21, 2018
Merged

Monitor: Add BiG-CZ Search #2663

merged 12 commits into from
Feb 21, 2018

Conversation

rajadain
Copy link
Member

Overview

Adds the BiG-CZ search functionality to the Monitor tab, and styles it according to the mockups. Harmonizes behavior with rest of MMW, so that switching between Analyze and Monitor, going from Analyze / Monitor to Draw, and to Model, behaves as expected.

The Model stage currently does not have the Monitor tab. That will be added in #2621.

These upgrades break BiG-CZ. That will be fixed in #2639.

Connects #2622

Demo

  • Overview

    2018-02-15 09 41 58

  • Analyze Tab

    screen shot 2018-02-15 at 9 45 04 am

  • Monitor Tab (with search results)

    screen shot 2018-02-15 at 9 45 09 am

  • Monitor Tab (with filter sidebar)

    screen shot 2018-02-15 at 9 45 14 am

  • Monitor Tab (with detail view)

    screen shot 2018-02-15 at 9 45 24 am
    screen shot 2018-02-15 at 9 46 02 am

Tagging @ajrobbins and @jfrankl for visual review.

Notes

The screen capture software I use slows down the browser. In reality the interactions are faster than the ones seen above.

There were no mockups for the filter sidebar, so I made it fit as best as I could, but we may need to create a follow up card for design tweaks there.

Should there be a spinner under the Analyze and Monitor tab headers when they are loading?

Testing Instructions

  • Check out this branch and bundle
  • Go to :8000/ and select / draw a shape
  • See the Monitor tab in the Analyze stage. Click it and search for something. Ensure the search works as expected.
  • Test the filters. Ensure they work as expected.
  • Ensure items on the map are in sync with those in the sidebar.
  • Click an item in the sidebar. Ensure the details view is shown, and the map only shows that items shape, and you can scroll the details view if it is too long.
  • Ensure pagination works as expected.
  • Ensure switching to Analyze hides the Monitor results from the map.
  • Ensure switching back to Monitor restores the results on the map.
  • Ensure tab state (which analyses is selected, which catalog is selected, which result is selected, scroll state) remains consistent when switching between Analyze and Monitor.
  • Ensure that any Monitor specific elements (map popup when multiple results, filter sidebar) are removed when switching to Analyze.
  • Ensure that clicking "Change Area" behaves as expected, and when revisiting Monitor you get a blank slate for a new search.
  • Ensure that selecting a model and moving on to Model removes the Monitor elements from the map.
  • Ensure that when selecting "New Project" from the Model and going back to Monitor, you get a blank slate for a new search.
  • Ensure that selecting "New Project" from the Projects list and going back to Monitor, you get a blank slate for a new search.
  • Ensure the visual look and feel matches and feels harmonious, and follows the mockups here

@rajadain
Use Data Catalog views in Monitor tab
0fe76b5 
To minimize duplication of effort, we are going to reuse the
Data Catalog views in the Monitor tab, and edit styling until
they match the mock-up. Once they do, we will adjust BiG-CZ
workflow accordingly.
@rajadain
Adjust styling of Search Form
eabc30f
@rajadain
Style search results to new mockup
d7dd0a9
@rajadain
Style pagination region
6878ecd
@rajadain
Style search detail view
62c6729
@arottersman
Copy link

Taking a look now!

@arottersman
Copy link

Overall, looks great! Noticed two bugs:

  1. If you open a popup on CUAHSI WDC, then switch to "Analyze" the CUAHSI result will remain on the map.

screen shot 2018-02-19 at 12 25 57 pm

  1. IE11 is missing the catalog tabs
    screen shot 2018-02-19 at 12 28 04 pm

@jfrankl
Copy link
Contributor

jfrankl commented Feb 19, 2018

Looking good! Here are two modifications:

  1. Please add a vertical border between the sidebar and the filter:

image

  1. Make sure the heading "Filter" and the filters are aligned (see red dotted line for reference, but don't reproduce red line in application)

image

@rajadain
Copy link
Member Author

Filter sidebar styling adjusted accordingly (b006da0 and b229a94)

image

Popup now disappearing properly (26de679):

2018-02-19 17 41 01

@rajadain
Copy link
Member Author

Still working on the IE issue.

@rajadain
Copy link
Member Author

Added a fix for the missing tab panel headers in IE11:

2018-02-20 12 51 01

This also fixes the search form width which was narrower than other browsers. Tested all other browsers to ensure that they remained unaffected.

This is ready for another review.

arottersman
arottersman approved these changes Feb 21, 2018
View reviewed changes
Copy link

@arottersman arottersman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfection on all browsers.

@arottersman arottersman assigned rajadain and unassigned arottersman Feb 21, 2018
@rajadain
Style filters sidebar
c4cf4ce
@rajadain
Toggle Monitor map items between Analyze tabs
a900058 
Turn off Monitor map contents and filer sidebar when
switching to Analyze. Turn map contents back on when
switching to Monitor. Also turn filter sidebar off
when opening detail results.
@rajadain
Enable map highlight adjustments
08427eb 
Previously they were only enabled for BiG-CZ. Now, since the
data catalog results are also visible on MMW, we enable them
in all cases. This adds a map-highlight border around the map
when the search result is not contained within the map.

Also fixes #2336 by not removing the detail highlight when
removing the active highlight.
@rajadain
Clear results when navigating away
05aa835 
When going from Analyze to Draw, clear data catalog results.
When going from Analyze to Model, clear map items.
@rajadain
Style results dropdown
943f32e
@rajadain
Remove Monitor view, template
afa9a23 
Since now we're using the Data Catalog views and templates
directly, these files are no longer used or needed.
@rajadain
Flexbox fixes for IE11
0667bd9 
Not quite sure why these work, but these removals make the
tab headers show up correctly, and the search form spread
out to the fullness of the container, in IE11. Furthermore,
they do not change the appearance or behavior in any other
browser, so we seem to be safe.
@rajadain
Copy link
Member Author

Thanks for the thorough review! Squashed fixups, will merge once green.

@rajadain rajadain merged commit 986f51f into develop Feb 21, 2018
@rajadain rajadain deleted the tt/monitor-add-bigcz-search branch February 21, 2018 16:26
@rajadain rajadain mentioned this pull request Mar 13, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@arottersman arottersman arottersman approved these changes

Assignees

@rajadain rajadain

Labels
Monitor
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@rajadain @arottersman @jfrankl @hectcastro