Implement new Teaching Activity search & filter UI.

[flukeout]

Even as we're gathering feedback on the new Teaching Activity page search & filter UI we've decided to also start building it as we go. We can make changes as we gather feedback, but are fairly confident the general theme of the prototype will remain.

The Plan

• We will create a new page on the learning site
• We will build the search & filter UI as a series of react components
  • searchField - the search input
  • filterSet - wrapper for filter toggles and the filter bubble
  • filterPill - the pill that hides and displays a related set of filter options
  • filterContainer - the large dropdown that contains each filter toggle
    • filterToggle - button that toggles each filter on and off (like "Kids", "Teens" & "Adults" for the "Age" filter
• When a filterToggle is toggled, it will let the container element of the whole filter & UI know
• We can keep the set of selected options as a property/state of the parent element
• It can let the eventual searchResults component know what the filters are
  • Unsure of all these mechanisms at this point
  • Will update as we start to build and test approaches.

Questions

• How should we pass in the available filters and their options to these components?
  • Hardcode them into the components?
  • Pass in JSON that describes this?
• How do I even react, it's been a while.

Will work on this with @alanmoo

[alanmoo]

Thinking about this a little this morning, I think a JSON structure to define the filters makes sense. It should both describe the different filters and their possible values (if they're not booleans). If we build this right, it should reduce the length of the render methods substantially.

[flukeout]

Hwiggidy hmm hmm hmmm... so, that would be fine except it breaks down a bit for the Duration bubble and also for the Web Lit Skills where the 21C skills are separated off.

The main problem seems to be the endless repetition of bubbles though, so we could just pass in the values of those bubble groups via some JSON (instead of defining ALL of the options in JSON) like...

pillGroups {
   "difficulty" : ["Beginner","Intermediate","Advanced"],
   "age-range" : ["Kids", "Teens", "Adults"],
   "web-lit-skills" : ["Code","Design",...... 
}

You know, with better naming etc. Thoughts?

So for the duration slider, we would hardcode that stuff into the render method since it's a one-off.

[alanmoo]

We'd have to go deeper than a single object. Perhaps we should just have each type as a component, and feed in the filters as a props array...that'll reduce some of the logic, which can get buggy. Just at the expense of being slightly WET

[flukeout]

Progress Report

• I've converted the prototype to use react components
  • Code lives in this repo
  • Try the prototype
  • The black area below the filters displays the JSON data created by the filters that can be used for filtering results
• Each react components are separated into separate files
• Each component has a .less file named after it in the CSS folder
• The search & filter UI is generated from a JSON scheme that @gideonthomas and I worked out in #2292
• All javascript is bundled via webpack into bundle.js - to make changes in development, the files will need to be re-bundled

The original prototype is still available at https://flukeout.github.io/curriculum-db-ui-test/

Up next

• Need to style these components to work on mobile / narrow views
• Need to check in on feedback from one more participant
• Need to check with Chad about difficulty and age categories in our current data set
• Work on component to display results based on search & filter options (will file new issue)

cc @hannahkane

[flukeout]

I've updated the search and filter component to also have a mobile, narrow view - https://flukeout.github.io/curriculum-search-react/

• I'll need a design review at some point, not sure about the mobile solution just yet.

Will tackle the results list now.

[flukeout]

Progress Report Did a first pass of showing result based on a hypothetical JSON object of 'matching activities'. In production, the search UI will pass some parameters to the back end, which will then return the matches. This is why they do not update in the prototype...

• https://flukeout.github.io/curriculum-search-react/

Once the back-end pieces are rigged up, the list will update.

cc @hannahkane

[gideonthomas]

@flukeout question about the search UI - when will it make a request to the backend to return matches? Does it do it on every keystroke or when you press Return or is there going to be a search button? Making a request to the server on every keystroke might be overkill.

[alanmoo]

I did this on the science site and added a throttle so that it wouldn't make a request until the user stopped typing for X amount of time. Seemed to work well.

On Fri, Nov 04, 2016 at 12:16 PM Gideon Thomas

< mailto:Gideon Thomas notifications@github.com

wrote:

a, pre, code, a:link, body { word-wrap: break-word !important; }

https://github.com/flukeout question about the search UI - when will it make a request to the backend to return matches? Does it do it on every keystroke or when you press Return or is there going to be a search button? Making a request to the server on every keystroke might be overkill.

—

You are receiving this because you were mentioned.

Reply to this email directly, https://github.com/mozilla/learning.mozilla.org/issues/2283#issuecomment-258476483 , or https://github.com/notifications/unsubscribe-auth/ABms-bR_Mx3mV-JZFejWytNoJDuQrqZ-ks5q61phgaJpZM4KKhJ7 .

[gideonthomas]

Ah ok that's fine then

[flukeout]

Yeah that sounds like a great solution @alanmoo, what was the timeout you used?

[alanmoo]

Looks like 400ms

[flukeout]

Updated to a 400 ms delay before searching after a keystroke.

Up next

• Styling & presenting activity collections.
• Adding a little toggle for list vs grid view presentation for the activity list.
• When duration slider is moved away and then back to "any duration" the filter bubble should not appear 'active'

[flukeout]

Questions for a certain Mr.Chad

• Do Activities always have to belong to a "Collection" or "Teaching Kit"?
• When someone does a keyword search for say "CSS", should we...
  • List out only single activities that relate to it?
  • Attempt to show collections that include content about CSS too?

cc @chadsansing

[chadsansing]

• No, but we should be able to include them in one or several as necessary.
• Maybe look for tags and strings?

[flukeout]

Update - https://flukeout.github.io/curriculum-search-react/

• I've included a way to display Collections as well as Activities in the results list.
  • The first few results are collections, the ones after are individual activities.
• Added a narrow, mobile view
• Added a way to exclude / include collections from the search results

[hannahkane]

Looking good, @flukeout. Can you describe the logic of the search results? Would a collection show up if any of the activities within it matched the search criteria?

Small note - the pencil icon makes me think I can edit the item.

When we get to the point where we're ready to do user testing, I'll be curious to learn if the "Collections" concept and related UX is intuitive to people.

I'm thinking we need to adjust the copy at the top: "Activities and lesson plans to get you started" could be a little more descriptive. We could use that to introduce "collections" (e.g. "Activities and Collections"), and we could clarify the scope of the content (e.g. "to explore important Web concepts "). Something like that? Or am I over-complicating?

[flukeout]

• Removed the pencil Icon (agree on the edit confusion)
• Changed the heading & subheading

https://flukeout.github.io/curriculum-search-react/

UX For Collection Search

• I think we just show Collections that have a matching term in their title or description, or tag (if they have tags, unsure at the moment)
• The alternative of showing a collection if any activity inside it matches might produce too much noise. We list which collection each individual activity is a part of on the results list, so I think that is enough.

[hannahkane]

Nice changes. +1 on the UX for Collection search. Just wanted to clarify.