UndebatesList

[ddfridley]

<UndebatesList
  className={}
  style={}
  electionObjs:={[]}
  onDone={{valid: true, value: id})=>{}}
>

electionObjs is an array like elections as defined in #46 onDone is a function to call when the user selects an election to administer, with one parameter {valid, value) where valid is always true in this case, and the value is the _id of the electionObj selected.

After someone creates Undebates, then the page shows a list of them like this: https://www.figma.com/file/yXrcMvg5EIwdLkHHxIdILh/Undebate?node-id=326%3A2268

The top bar of this will be UndebatesHeaderBar a parent component will render that, and this. So this component should ignore that part.

NavigationPanel has a lot of functions for getting the status of an election - and someone is working on #105 to pull those methods out into a separate module. You might copy what you need out of the file to get started with the idea of swicthing over to the module when it is ready. Also, if there are other status functions that are needed, plan to put those into the new module when it's ready.

NavigationPanel also shows how to use ElectionCategory to graphically show the status. The idea would be to either continue to use ElectionCategoy or to refactor it, so there is code common between ElectionCategory and what's used to render the status in UndebateList.

The story for this is going to need to generate several (3 to 5) electionObj's. Check out how the story for NavigationPanel is creating a base electionObj and then making changes to it.

• [x] List of elections in table from electionObj
  • [x] Election Name Column
  • [x] Date Column
  • [x] Moderator Column
  • [x] Candidates Column
  • [x] Status Column
• [x] Hover effect darkens the row
• [x] Archived Elections are darker
• [x] Sorting:
  • [x] sort icons
  • [x] default sort is newest to oldest (e.g. sort is applied to Date column)
  • [x] able to sort by reverse chron on Date column
  • [x] ability to sort by election name
• [x] All but Election Name are filterable, using specific filter types (see figma)
• [x] Global filter at the top to search all
  • [ ] STRETCH GOAL - Global search highlights things found
• [x] Color label for various states of election
• [x] Colored dots for filtering by state of election

[ddfridley]

@jetamartin I'm copying this discussion into git so that it can be associated to the issues, and it makes it easier to respond to detailed discussions

Jet: David, finally have some free time and I'm trying to get back in the game again. To that end I assigned issue #21 UndebatesList to myself. It looks pretty meaty but I'll try and give it a go (unless you think I shouldn't). As I was looking at the associated Figma documentation (which was super helpful) I had a number of questions about how this list would behave and some potential suggestions for how it might be improved. Are you the right person to address those questions/concerns?

I put my current list of questions in a word doc but it doesn't look like there is a way to attach a document in slack so I'll just copy and paste my notes below (note the Word doc bullets got all screwed up when copied...I tried to clean them up a bit..hopefully you will get the gist of my questions below: UndebatesList Issue #21: Questions for clarification: Topic: Filters, dropdowns and Sort By; Item: Colored dots: It would appear that clicking once on the two dots is a way to retrieve results based on filters that have been set and clicking these dots twice removes all filters and refreshes the results to the unfiltered data? Is that correct? If so then filtering data is a two step process….a) set filter; b) click two dots to retrieve results? It states that “re-clicking on the dots will remove the filter”. Does that mean it will reset all filters? In other words if a user has changed every column’s default filter to a “non-default” filter (via the drop downs) all of the filters will be reset back to the default filter values when the user clicks the button again? How will the user know that the colored dots have already been clicked once and that clicking them again will clear all of the filters that they set up? If a user changes the default filter on a column and clicks to filter the results and then resets the filter again (e.g., it didn’t yield the results they wanted) then I would assume that the circle “click count” should be reset if a filter has been reset between circle clicks to avoid inadvertently resetting all the filters to their default state? Is this a common UI/UX pattern? Are there other commercial websites that have used this pattern. Assuming that double clicks will clear all filters I wonder if this is the best solution to clearing filters? It doesn’t seem intuitive and it could result in a user inadvertently resetting their filters. It would seem like there are other approaches that better address this need (e.g., maybe an enable/disable filter slider and/or a clear filters checkbox, etc. ). Thoughts? Item: Drop downs (filters): The documentation states that when you change the filter criteria the column Category Name changes to the filter selection name. (At least that is how I interpreted it). So as an example, if you set the “Invite Declined” filter of the Candidate column then the Column Name would be changed to be “Invite Declined” Or if the Status filter was set to Archive the column name would be changed to be Archive. First, Is that correct? Second, that seems like it might be a bit confusing because you’ve kind of lost the context of the meaning of the column IMO. The column name no longer tells you what type of data you are looking at it just repeats what is listed in every row of that column. If I were doing this I would keep the column name the same to retain context for the user and I would add a row beneath the Column name listing the applied “filter” name. This way you don’t lose the context of that column. Also having that extra column clearly indicates to the user that a filter has been applied to that column and it tells you the specific type of filter that was applied Are any of the filters supposed to be retained across user logins? Or should they just be reset to defaults each time a user logins? (edited)

David: Hi jet. I read this but I won't be able to look at the figma until tomorrow. I'll let you know. I kind of agree with keeping the column name the same - but let me look. Also the designer has moved on so we are on our own until we find a new one. But mostly our goal right now is to get something implemented and infront of users. It's never right the first time. More tomorrow.

Jet: Okay...didn't realize we had lost our UX person. I think the UI for this component looks great but there are some ambiguities that will need to be clarified before it can be implemented. I could certainly make assumptions about what was intended but I figured it would be better to ask for clarity first. BTW, I suggested in my comments above to add another "column" to display the filter applied...I meant to say that we should consider adding another "row" to display the "active" filter name. Cheers, (edited)

David The two red/purple dots refer to filtering based on the red/purple status of the election. (urgent/live) - a unique use case. For the other columns, clicking on the chevron to the right of the column name pulls up the filter. I agree we shouldn't change the name of the column. To clear the filters, click on the chevron again and hit the - at the top. (edited)

David: I'm looking at google sheets as an example for filtering. I don't see them adding another row. As you point out, it will be apparent by what's in the column. But we may need to change the chevron to indicate that a filter is active. Also, only one filter is active at a time. And, no need to save filter state. Or that can be a feature we add later based on user feedback.

Jet: David, thanks for the clarification on the red/purple dots...that wasn't clear from the description...So does the red dot work independently from the purple dot? (e.g., yield only red OR purple results) or do they work as a single unit only returning red & purple results.

David: There is a package - react-table that is being used in https://github.com/EnCiv/undebate-ssp/blob/main/app/components/candidate-table-input.js for rendering tables. It also has the ability to add filters and stuff. You don't need to to the input part, but it might make doing the table and filters easier. There are lots of examples.

Jet: Okay thanks I'll take a look at that. Any thoughts about my prior questions concerning the circles working as a single entity or independently to return different results?

David: I'm not sure what you mean by circles - unless it's the red/purple dots on the left. If the red/purple dot's then the table is either filtered ore not filtered based on that. Only two states - not a count. Or maybe I'm not understanding what circles you are referring to - try sending a link to a specific spot in the figma.

[ddfridley]

Before I said only one active filter, but that doesn't seem necessary. You can add filters to multiple columns.

[ddfridley]

Jet: Regarding clearing the filter by clicking on the "-"....to me that seems to be very subtle...so much in fact that I didn't even notice the dash. ...rather than using a "-" by itself why not explicitly change it to something that is much more explicit like "Clear filter". And there doesn't appear to be any mechanism for clearing all filters so they would have to be cleared one by one. While it's not critical given the number of filters, I think it would be nice to have a single slider that would allow the user to disable all filters without having to open each one and reset them one by one. Just a thought.

David: I agree "Clear filter" would be better. Clear all filters can be a future feature. I don't see it in the google spreadsheet example.

[jetamartin]

David, concerning my question about "circles", I was referring to the red/purple dots.
Here was the initial question that I subsequently re-phrased using the word circles.

David, thanks for the clarification on the red/purple dots...that wasn't clear from the description...So does the red dot work independently from the purple dot? (e.g., yield only red OR purple results) or do they work as a single unit only returning red & purple results.

My question is....Do those two dot's act as a single entity (together the dots form one clickable item and return both purple and red results)

• OR-

They are independent entities...e.g., user can click on just the red dot and get all the "red" items -OR- the user can click on the purple dot to just see the purple items.

I'm imaging it's the later but I want to make sure.
If it is the latter then I would be concerned that these dots are very small (I do realize the figma description call for the dots to get larger on hover) and they are very close together....my concerns is that it might make it ver challenging to click on just one of the dots. I'm assuming that this app is being developed to run on mobile devices and/or devices with touch screens?

UI guidelines for mobile devices (Apple and Google Material Design) generally state that "clickable" items (e.g., buttons, icons, etc.) should be a minimum of 44 - 48px in height/width and should be separated by a minimum of 32 pixels. The two dots don't seem to follow either of these guidelines. Should we be concerned with that? If so maybe a different config of the dots or a different icon could be used? Of course the first attempt would be to see if we can satisfy these guidelines by increasing the size/distance to meet the goals...maybe it's possible to get their but I'm just not sure at this point.

Regards, Jet

[ddfridley]

I see the 2 dots as independently clickable. I agree about the size issue, but this particular application (the designers instructions) is desktop first, and it's better to get something up there and get feedback, than to iterate on the design at this point before getting feedback. Another alternative is to take out that feature and make a separate issue for it and work on it later.

[jetamartin]

David, point of clarity...you've referenced Google sheets on several occasions in your responses...." I don't see it in the google spreadsheet example." Are you just referencing Google spreadsheet as a model for how this table should operate relative filters or is there a google spreadsheet somewhere that provides a more detailed description for this feature. I assume it is the former? But just want to be sure that I'm not missing some project resource that I should be using/referencing.

And if it is the former than I would ask why should we model/limit ourselves to the way a spreadsheet behaves if there are arguably better ways to do it?

Displaying the applied filter in the row immediately below the column heading kills two birds with one stone. 1) It explicitly shows that a filter is actively applied to the column and secondly it specifically show which filter has been applied without requiring the user to open the dropdown to figure that out. And yes in some columns it may be obvious which filter has been applied but in other columns like the Date column it won't be obvious (is the data for the last month, 6 months, last year) while somebody could eventually figure that out by scanning down all the date data or opening the filter selection why should we force them to do that...why not just show it to them immediately below the column heading. Such as the following:

 Date

( last 6 mos)

To me doing it this way is a better approach but if you feel like not displaying the filter is the way to go I will go that route...I just wanted to fully present my thoughts on this matter.

Another question. The date field only has filters for "last year", "last 6 months", "last month" and there doesn't seem to be a way to clear the filters (e.g., a '-' option). 1) Is there not a need to see data going back more than 1 year; and 2) if you set one of the aforementioned filters how do you clear it once it's been set given that there isn't currently a clear filter feature for this specific drop down.

Cheers, Jet

[jetamartin]

Same question as the "Date" column, the "Status" column doesn't appear to have a way to reset the filter once a filter has been selected and applied. Maybe that is intentional or there was some agreed upon approach that wasn't noted in the UI Figma file or maybe I'm just missing it. Thoughts?

[ddfridley]

1) Its good enough for the now and the next year. I don't really see much need to filter on year. The robust solution would be to create a date range input - but it doesn't seem useful until years from now.

2) Okay, I am going to recant my previous statement about the dash above video submitted and candidates. I'm not clear what it meant and maybe it was to select blank - though I'm not sure how that would be different than a status like "script pending" but it could be.

Clearing the filter could be done by pulling down the filter again, and then clicking on (unchecking) the selected filter.

I see that the designer has the idea that you could only filter by one thing in a drop down at a time. It seems okay for now.

The one change I think were agreeing to is to leave the column name alone, rather than have it be the selected filter value, but to change the chevron to indicate that a filter has been selected.

[jetamartin]

TL/DR we'll go with your recommendations. The text below is just me restating my understanding.

re: #1 - Ok we can go with only using the filters specified in the Figma documentation for now (Last year, Last 6 months, Last Month). Obviously this means you'll be restricted to displaying a maximum of 12 months of data (e.g. 03/17/2021 - 03/17/2020). Anything outside of that window will not be displayable. Note: My suggestion would have been to add a Filter option that says "All Data" to allow the possibility of displaying data outside of that 12 month window... but per your request we'll stick with the current drop down options as noted above and deal with the need to display data outside of a 12 month window as a future feature;

re: #2 - So per your recommendation we'll get rid of the empty ('- ') dropdown selection from the Video and Candidates column. As you stated I suspect this was intended to be a way for the user to "reset/remove" the filter from that column but if so I don't understand why some columns offered that empty option and others didn't...but that's neither here nor there at this point. We will give users the ability to uncheck any checked filters thus allowing them to effective remove all filters by doing so. Note: My assumption is that a user should only be allowed to check one filter options per column at this point

re: Column names: Per our agreement and as you noted above the Column names will rename static (don't change to reflect filter selection).

Obviously we have made some changes to the UI design documentation for this feature in this thread that may need to be codified in updates to the Figma documentation somewhere down the line.

[jetamartin]

More questions/clarifications: From your prior messages you clarified that the purple & red dots should operate as separate entities (ie., user can select/click on either the red or purple dot independently of each other.) Given that I have a couple of questions that need clarification:

1) If a user clicks on the purple dot or red dot what should they see on the screen. Should they ONLY see items in the list that match their selection (e.g., red dot selected only displays "red" elections with all others filtered out)? 2) And just to put a fine point on this, if the user selects the red dot and then selects the purple dot. What should be displayed? a) Just the purple items (last thing clicked) or both the red items AND the purple items. The way the requirements is written it implies that the red/purple filters remains in effect until the user taps it again...so the red and purple filters act as a toggle switch...they remain active until you toggle them off....thus implying that in this scenario you display only the purple and red elections and all others would be filtered out.

Maybe there was/is "business" need to be able to see both purple and red at the same time?

And while I'm on this topic I was assuming that a user could not select multiple filters on the same column...maybe that is a wrong assumption. I think we agreed that a user would be allowed to set a filter in more than one column but maybe your early comments were intended to mean that a user could set multiple filters in the same column. (e.g., in the Candidates column a user could filter to see results where both "Invite Pending" and "Invite Sent". Thoughts? Cheers, Jet

[ddfridley]

re: #1 - Ok we can go with only using the filters specified in the Figma documentation for now (Last year, Last 6 months, Last Month). Obviously this means you'll be restricted to displaying a maximum of 12 months of data (e.g. 03/17/2021 - 03/17/2020). Anything outside of that window will not be displayable. Note: My suggestion would have been to add a Filter option that says "All Data" to allow the possibility of displaying data outside of that 12 month window... but per your request we'll stick with the current drop down options as noted above and deal with the need to display data outside of a 12 month window as a future feature;

Initially, all data will be displayed. When filters are reset, all data will be displayed. "Full data" should be the default.

re: #2 So per your recommendation we'll get rid of the empty ('- ') dropdown selection from the Video and Candidates column. As you stated I suspect this was intended to be a way for the user to "reset/remove" the filter from that column but if so I don't understand why some columns offered that empty option and others didn't...but that's neither here nor there at this point. We will give users the ability to uncheck any checked filters thus allowing them to effective remove all filters by doing so. Note: My assumption is that a user should only be allowed to check one filter options per column at this point

Agree to check and uncheck.

I found this description of the moderator section that says "Blank - then the moderator hasn't filled out the timeline" So - in the drop down means to select blank. So, we keep the '-' in the drop downs in those columns. (For now - I think we can be more informative than blank in our status)

re: 1. If a user clicks on the purple dot or red dot what should they see on the screen. Should they ONLY see items in the list that match their selection (e.g., red dot selected only displays "red" elections with all others filtered out)?

Yes

re: 2. And just to put a fine point on this, if the user selects the red dot and then selects the purple dot. What should be displayed? a) Just the purple items (last thing clicked) or both the red items AND the purple items. The way the requirements is written it implies that the red/purple filters remains in effect until the user taps it again...so the red and purple filters act as a toggle switch...they remain active until you toggle them off....thus implying that in this scenario you display only the purple and red elections and all others would be filtered out.

Only purple or only red or all if none selected. Also if red is selected and you click purple, red is unselected.

RE: And while I'm on this topic I was assuming that a user could not select multiple filters on the same column...maybe that is a wrong assumption. I think we agreed that a user would be allowed to set a filter in more than one column but maybe your early comments were intended to mean that a user could set multiple filters in the same column. (e.g., in the Candidates column a user could filter to see results where both "Invite Pending" and "Invite Sent". Thoughts?

Only one filter per column is agreed. (Seems to be the design intent). A filter on each of multiple columns is allowed.

[ddfridley]

I think we need to make an update to the parameters passed. To this component. Instead of electionObjs we will pass electionOMs. It will be an array of [electionObj, electionMethods] electionMethods.getxxxxxxxxx() will return the status you need for the columns.

[jetamartin]

David, thanks for the clarifications...I'll go with your recommendations you noted above.

Cheers, Jet

[jetamartin]

David, regarding the blanks (i.e., '-')....good catch...that explains why the blanks ('-') were only in the Moderator and Candidates filters,

How would you feel if I changed this to something like: 'No Timeline specified' OR 'Timeline not specified'

Would that work? If not feel free to suggest some different wording. Cheers, Jet

[ddfridley]

Answering you question from slack here. For now, there are a bunch of status functions in navigation-panel.js like getTimelineStatus()

In the near future (Kamui is working on it) these functions will be moved out, and will become available as electionMethods. so you can call electionMethods.getTimelineStatus() to get the status of the timeline.

Figure out which of these functions you need from the Navigation Panel for now. If there is a status that you need that's not there, we'll have to add it to electionMethods.

We should coordinate with Kamui on this on Tuesday.

[ddfridley]

re: David, regarding the blanks (i.e., '-')....good catch...that explains why the blanks ('-') were only in the Moderator and Candidates filters,

How would you feel if I changed this to something like: 'No Timeline specified' OR 'Timeline not specified'

Would that work? If not feel free to suggest some different wording. Cheers, Jet

To make this change I think it needs to be coordinated with the navigation panel and the electionMethods so we have to figure out how/where to coordinate. Also - I think something like "waiting" would be nicer sounding. But I think more things will become apparent when we start interacting with it. The initial design had a do step 1 before step 2, etc concept, but the way our data works, the admin can fill out whatever data they know when available. (and that's kind of the way life is). So lets just keep it in mind as something we want to change.

[jetamartin]

David, thanks. I do see those methods in the navigation-panel.js and will look at leveraging those but is there a definition or was there agreement as to what constitutes that the election is in a "state of urgency" (e.g., x # of days out from an election an "y" is not complete or "z" number of things haven't been completed). I just don't want to create my own definition if there was already an agreement on this definition. And if there wasn't any agreement do you have any thoughts on what might constitute a "state of urgency"? I could make up the conditions that satisfy that criteria but I'd be guessing.

My assumption is that this "state of urgency" would be a value that I would need to derive (using methods already defined in the navigation-panel potentially in combination with new methods that Kamui and I would define) vs a field that we would add/save in the database? Thoughts?

Cheers, Jet

For anyone following this thread....David's response immediately above was in response to my question via slack: "How do you determine that an election is "in a state of urgency" and therefore would appear if the user clicked the red dot on the UndebatesList screen.

[jetamartin]

re: David, regarding the blanks (i.e., '-')....good catch...that explains why the blanks ('-') were only in the Moderator and Candidates filters,

How would you feel if I changed this to something like: 'No Timeline specified' OR 'Timeline not specified'

Would that work? If not feel free to suggest some different wording. Cheers, Jet

To make this change I think it needs to be coordinated with the navigation panel and the electionMethods so we have to figure out how/where to coordinate. Also - I think something like "waiting" would be nicer sounding. But I think more things will become apparent when we start interacting with it. The initial design had a do step 1 before step 2, etc concept, but the way our data works, the admin can fill out whatever data they know when available. (and that's kind of the way life is). So lets just keep it in mind as something we want to change.

Do you mean "Waiting for Timeline" or just "Waiting"? "Waiting" is pretty generic. It seems like we have precisely named filters for many of the steps. I guess we can wait until Tuesday to discuss as I don't have the full picture.

[ddfridley]

My assumption is that this "state of urgency" would be a value that I would need to derive (using methods already defined in the navigation-panel potentially in combination with new methods that Kamui and I would define) vs a field that we would add/save in the database? Thoughts?

I've learned that we need to separate the logic from the rendering. A frequent react lesson. So we will need a new method - something like getElectionUrgent() which returns true/false - subject to discussion. (maybe it should be getElectionStatus and return '' | 'urgent' | 'live'

There is no spec and I couldn't find other notes in figma - that that's not conclusive because I don't see a way to search for words in the figma ui. And for this type of logic, it seems very detailed and English is so fuzzy. It would be more precise and less man-hours to write the spec in JS and jest and just let it evolve over time. Seems to align well with the react lesson of separating logic too.

For this Issue, lets focus on the rendering, get enough of the logic working to be able to test the rendering. For example, if moderator has declined, it's urgent. Then you can use that to test the UI.

For the logic part - lets discuss on Tuesday.

[jetamartin]

David, per our discussion at our weekly meeting this evening (3/29/2022), what follows are my personal notes that I made to try and summarize some of the discussions/conclusions from this thread. I can't be sure that is 100% inclusive of all our discussions but it represents what I think are the key conclusions. Most of the content that follows concerns the "red" and "purple" dots filter "feature" but there are also a few notes concerning other aspects of the UndebatesList feature set. If you see anything in my notes that you think doesn't reflect our final conclusions feel free to let me know.

My notes were originally captured in MS Word so if the formatting looks a little wacky that is why.

Colored Dots:

• Purpose: The colored dots (purple and red) are designed to allow a user to either view a list of elections in the “UndebatesList” that are in a “state of urgency” or that are “live elections” (see definitions below): o Red dot: Filters for elections in the “state of urgency”; o Purple dot: Filters for elections that are “live”;

• User interaction: o Hover behavior:  Hovering over the red dot or the purple dot will cause that dot to become larger to denote that each individual dot is an “interactive” component (i.e., clicking on one of the dots will return the corresponding results (see below )); o Click behavior:  If the user clicks on the purple dot it will result in ONLY “live elections” results being displayed in the “UndebatesList” (these “live elections” will be prefaced with a purple colored strip)  If the user clicks on the red dot it will result in ONLY elections that are in the “state of urgency” being displayed in the list (these “state of urgency” elections will be prefaced with a red colored strip)  A dot’s filter can be removed by either clicking on the other colored dot or clicking on the same colored dot a second time. Note: At this time there are no visual clues offered in the appearance of the dot to indicate that it has been clicked (filter is active) other than through observing the elections in displayed in the list. Therefore the user can’t be 100% sure whether one of the two filter has been applied (e.g., all elections could be in the purple state or the red state thus giving the user the impression that a filter must be active when it is not). Recommended Fix: 1) Once the filter has been selected (red or purple circle clicked) then a smaller darker color inner circle would be displayed to denote that the filter is currently active (been pressed). This inner darker circle would be proportionally sized when in “hover” or “normal” mode. If the button is clicked again the darker circle would be removed reflecting that the filter is no longer active.
  Note: As the behavior is defined currently there is no way for a user to be able to view both red elections and purple elections in the “Undebates” list at the same time. I’m not sure if there is a “business need” to be able to view both types of elections at the same time but below is one way of accomplishing that is a requirement. Alternative Suggestion: 1) Allow each circle to be activated “independently” from each other rather than having the behavior of these filters (red & purple) “linked“ to the other’s state. Currently (as proposed by Dave) when the “red” circle filter is active, clicking the purple filter will remove the red filter and apply the purple circle filter and vice versa…so their behavior is “linked” to each other’s state. My proposed alternative “independent” behavior would mean that once the filter is activated (i.e., toggled to be active) it would remain active until the user clicks it a second time to un-toggle it. So toggling the “red” filter on or off would not have any effect on whether purple filter is active or inactive. This proposed “independent” behavior would give the user the added capability of having both filters active at the same time (allowing the user to see elections that are both in a “live” state and in a state of “urgency” at the same time rather than just one or the other).

• Definitions: o “State of urgency” - Per the moderator’s comments in the Figma document. An election considered to be in a “State of Urgency” when any of the following are true:  Invite Declined – When the moderator has declined the invite;  Reminder Sent: When the reminder date has passed (as listed by the user in the timeline) but there has not been any submission by the moderator;  Deadline Missed: When the moderator has missed the deadline and now the election leader has to find a new moderator and reset the timeline; o “Live election” – An election is considered be live from the day the election goes live to the last day of the election. o “Archived” – An election is considered be (or will be archived) after the last day of the election;

• Notes on other aspects of the “Home” page (issue#21): o David confirms that the designer’s intent is that you should only be able to select one filter at a time per drop down (presumably). A filter is selected by clicking anywhere within that filter’s row in the dropdown. A check mark will be displayed on the right side of the filter “label” to reflect that the filter is now active. Clicking that same filter row again will disable that filter causing the checkmark to disappear. Currently only one filter can be active at a time. Selection of a different filter will disable the then current/active filter (removing the checkmark) and the newly selected filter will become the active filter and a checkmark will be displayed.
  REQUIREMENT: The component must prevent the user from having more than one active filter (in a column) at any given time. Selecting an active filter again will result in this filter being disabled (checkmark removed). Selecting a different filter to activate while there is already a current active should result in the current active filter being deactivated and the newly selected filter being activated (checkmark added).

o Input parameters should be electionOMs rather than electionObjs as currently stated in the documentation. The electionOMs will be an array of [electionObj, electionMethods). The electionMethods.getXYZ() will return the status needed for each column. David suggested that if I need to create a new election method I should add it to the election methods. I suggested that before I do that I will check with “Kamui” to confirm that there isn’t already an election method available to do what I need. If there isn’t then I should create the required method needed and add it into the “election methods” and write a test case for the new method.

[ice1080]

@ddfridley One option for this is the community edition of ag-grid. We use that at work and it's pretty nice for built in column sorting, filtering, even reordering if you choose to turn that on. You can generally style it however you want, so should be able to style it to be close to what is in figma. Anyway, just an option.

[ddfridley]

If you mean this: https://www.npmjs.com/package/@ag-grid-community/react I'm not apposed. (Says MIT license)

[ice1080]

When I first glanced at this code I thought it was using a basic html table but I now see that it's using react-table which seems to have all the functionality we need, so shouldn't need to pull in another library!

[ice1080]

@ddfridley, a couple questions on this.

1. For the date filter (last year, 6mo, or 1mo), is that on the creation date or the end date?
2. I see that there is no filter for the Election Name, but there is a search bar up top. Is searching part of this issue or a different one?
3. Also confirming that all filters but the date column are multi-select, is that correct?
4. In the figma, I see the below text. If question three is a multi-select, then I just need to know how to handle this.

   Dropdowns : any selection in a dropdown is represented by a tick and the category name changes to the selection name.

One idea for number 4 - my company handles filters on one of our pages with a separate component that states Filters Are Applied and has a Reset Filters button to clear all filters.

[ddfridley]

1) end date 2) There isn't another issue for it, so either implement it or add it to the issues depending on the difficulty. 3) Yes, unless the effort is unreasonable. 4) I remember having this discussion with Jet. Here is an example of filters in google sheets: https://docs.google.com/spreadsheets/d/19M5Oabh80GlX0qEuJr237V5CrCtkBkxrwmdbQAblL2Q/edit?usp=sharing I propose that we leave the name of the column as is and put in a filter icon. We don't need to be as fancy as google, but we can reference it.

[ice1080]

That all sounds good, thanks! For the moderator status (and possibly one or two other columns), I was planning on implementing a method like this in getElectionStatusMethods. Does that make sense there or would it make more sense in my component? I will still be adding an svg depending on the return of this method, so could see that being enough reason to move it to the list, but could argue either way.

    const getModeratorStatus = () => {
        if (!checkTimelineCompleted()) {
            return ''
        }
        const scriptStatus = getScriptStatus()
        const inviteStatus = getInvitationStatus()
        if (scriptStatus !== 'completed') {
            return 'Script Pending'
        } else if (scriptStatus === 'completed' && inviteStatus === 'sent') {
            return 'Script Sent'
        }
        if (inviteStatus === 'accepted') {
            return 'Invite Accepted'
        } else if (inviteStatus === 'declined') {
            return 'Invite Declined'
        }
        const submissionStatus = getSubmissionStatus()
        if (submissionStatus === 'sent') {
            return 'Reminder Sent'
        } else if (submissionStatus === 'submitted') {
            return 'Video Submitted'
        } else if (submissionStatus === 'missed') {
            return 'Deadline Missed'
        }
        return 'unknown'
    }

[ddfridley]

Great! Yes this is a thing for getElectionStatus

[ice1080]

More questions:

1. For the status column, "Configurating" or "Configuring"?
2. For number of days left in the moderator column, at what point does it become red? 3 days left? 5 days left?

[ddfridley]

1: Configuring 2: const DAYSLEFTDANGER=3

[ice1080]

And for the days left under each of Moderator, Candidates, and Status columns, do we already have anywhere where we are retrieving those? I see electionMethods.countDayLeft but that only gets the days before the electionDate itself.

[ice1080]

And another question (all of these are pretty low priority, just trying to get ahead in the answers) - For an archived undebate, in the status column section, do we want to display days ago or what figma shows of the same as the date column?

[ice1080]

Continuing the list of questions, when looking at the first row that has a moderator status of "Video Submitted" in this image: https://user-images.githubusercontent.com/3317487/131607948-6143b9b1-5693-408c-957a-255d1e39ff4d.png For the candidates column, it has 0/30, and then 29 accepted, 2 declined, 2 reminders sent, and 1 deadline missed. When I look at the Navigation Panel, it seems like the moderator is include in the invitation/deadline numbers. My question is what is the formula for the 0 and the 30 values. I recognize that the numbers in the picture might not be accurate, but wanted to see how we would get those. Here's my guess, based on what I saw in the navigation panel: The bottom/right number is the total number of candidates that have accepted the invitation, plus 1 for the moderator. The top/left number is the number of candidates that have submitted their videos, plus the moderator after they have also submitted theirs. If these guesses are correct, then the top/left number can never be zero because this only shows up after the moderator has submitted their video, thus causing the number to always be at least 1. Let me know if any of my logic or guesses is off.

[ice1080]

Last question for tonight. For the filter on the candidates list, I'm not sure I understand what it means to filter on any of the 4 individual candidate statuses. There's also a few here that don't seem to make sense. Here's the full list in figma:

• blank
• Election Table Pending...
• Invite Pending...
• Invite Sent
• Invite Accepted
• Invite Declined
• Reminder Sent
• Video Submitted
• Deadline Missed

While the first three make sense since those are unique statuses that the column values can be in, the rest don't seem to make sense for a filter on this column (at least to me right now). It seems like it might make more sense to have options like this:

• blank
• Election Table Pending...
• Invite Pending...
• In Progress (with video camera icon)
• Completed/Ready? (icon?)

Thoughts?

[ddfridley]

on moderator candidate status - We should not mix the two. Despite the examples, candidates status should only count candidates and candidate recordings and not the moderator. It's two separate 'acts'.

selecting status - I agree. It seems like some statuses like Invite Pending, Send, Accepted, Decliend, refer to indivitual candiddates, and others, like ElectionTable Pending, In Progress would apply to entire elections. It seems okay to start out with a few status to filter on that apply to whole elections and add more later as we find the need.

My Product Management Hat: I think we will learn a lot about the details after we get something running and start doing it ourselves and getting feedback from first time users. For example with what we've got working so far, I see that I really want to be able to review the moderator recorder before it's sent to the moderator so I can see how it "flows". But we don't have a mechanism for that. But we should keep pushing toward the minimal implementation get feedback and iterate. So if it makes sense to reduce features now, to get something out sooner, we should.

[ddfridley]

And for the days left under each of Moderator, Candidates, and Status columns, do we already have anywhere where we are retrieving those? I see electionMethods.countDayLeft but that only gets the days before the electionDate itself.

I just saw this. I don't know anywhere. The only possible place is get-election-status-methods.

For an archived undebate, in the status column section, do we want to display days ago or what figma shows of the same as the date column?
It does seem redundant. How about https://www.npmjs.com/package/s-ago (I saw several packages, the were huge. This one is smaller). But based on the PM strategy - whatever is quick.

[ice1080]

Sounds good. There are many features of this undebates-list that I might consider non-essential for mvp but it would take quite a while just to list them all and discuss them so I'll continue trying to implement them all. For the most part the list is functional as-is, so we could basically release what I've just about got. Next steps from where I'm at now:

• styling of cells to match figma
• days left/from now - will use the s-ago package, seems like it will be good
  • this one will take some time as each column has multiple different dates to use depending on what status it's in, and we don't have anywhere that details that currently.
• filtering per column with drop downs
• global filter/filter on name
• adding in urgency logic and filter by urgency
• hooking up header bar with undebates list
• minor styling details like rounded corners on first and last row

The two biggest of those will be filter by multi select drop down, and figuring out all the logic for the days left/from now

[ice1080]

Whoops, looks like I still have one more question left from above. I still need to know the values for the X out of Y submissions display (0/30, X/Y). Is Y the total number of candidates, or just those that accepted the invite? Does deadline missed affect that at all?

[ddfridley]

Y is total number candidates. Deadline missed doesn't effect. Note: We haven't implemented invitations accepted / declined yet. It hasn't been an issue but I bet that matters in what your doing.

Would it make sense to delay multiselect drop doing? Either single select, or just not have it for the first run.

The header bar hooks up with undebatesList in undebates-homepage. It just needs to pass the id of the election in onDone back to the parent.

[ice1080]

Sounds good, writing a method now for checking candidate submission status. I will probably start with a basic select for the filter first and then do the multi select later.

And ya the onDone for the list was already done when I started, what I was referring to for "hooking up header bar with undebates list" was the search bar on the header affecting one of the filters on the list.

[ddfridley]

Got it. Great. I'm working on send-candidate-invites.

[ice1080]

Hey @ddfridley, for a case when a list may only have a subset of all available columns, do we still want the filter dropdown to display all available options, or should it only display those in the current list?

[ddfridley]

seems like showing all would be less work. Go with less work. [I think another option would be to show them by gray out the ones that aren't available but do the less work answer].

[ice1080]

Regarding sorting, the figma mentions that the sorting is only done by Date initially. The example also appears to show archived elections at the bottom. Is this something that we would like specifically, or is date sorting sufficient? (speaking specifically about the default sort)

[ice1080]

Do we also want archived elections to continue to be in a state of "live", with the purple icon on the left?

[ddfridley]

Sort by date only. Archived basically means the election is over so it shouldn't be live anymore. Sorting by Date will mostly group the arrived ones together.

[ice1080]

More small questions on this. For the date filter values, do these include future dates as well, or only election dates between the Last N months and the current date?

[ddfridley]

I could see a filter of "the next 12 months" as useful for filtering out all the past elections.

[ice1080]

Hey @ddfridley, optimization question for you. The React Table documentation strongly recommends that we use React.useMemo for the data (electionObjs) and the columns in order to decrease excessive function calls. Unfortunately, when I try to view the UndebatesHomepage with the list in place, it throws this react error:

Error: Rendered more hooks than during the previous render.

In looking into this error (which I discovered only occurs when the columns list is memoized), I began to think about it a bit more. I believe that for our purposes, we would actually want to avoid memoizing the data, since the data can change under the hood. Additionally, I would imagine that even a large election organization would only have a few hundred or so elections, so we shouldn't be hitting performance issues anyway. Would you agree with this?

[ice1080]

An unrelated note from above, it appears that react-table does not offer highlighting for global searching, which is something the figma calls out in the SEARCH section to the right of the HOME section. I've seen one possible implementation of it that I may try near the end, but I'm changing that one to a stretch goal. https://github.com/TanStack/table/issues/1575

[ice1080]

Another potential defect I may have discovered, and perhaps this is more of a question about the timeline object. I see that countSubmissionDeadlineMissed in get-election-status-methods (along with countSubmissionReminderSet) uses moderatorSubmissionDeadline instead of candidateSubmissionDeadline. Is this correct as-is or should it be changed?

Perhaps a follow up question would be if you could confirm that the count methods are all correct. It seems to me that all 4 of them are looking at the moderator instead of the candidates, which feels wrong as I'm adding stories for various cases around the candidates status table.