Is08 channel mapping cr - filter matrix + rename label feature

[orfar1994]

This PR include 2 features:

1. Rename feature - the user can give new name to the output/input/channel.
   

it will be saved locally. the user can do it by clicking the output/input/channel name (the name text became button when hover it).

when the user clicking the name button. the text become editable and the user can edit it.
The user can save it locally be pressing the DoneIcon, cancel editing by pressing ClearIcon (the name will be the last name that saved) and return to the original name by pressing DeleteIcon.

2. Filter feature - the user can filter the matrix by the following

• Output label (the real name of the output).
• Personal Output Label (the new name that the user give to the output).
• Output channel label (the real name of the output's channel).
• Personal Output channel Label (the new name that the user give to the output's channel).
• Input label (the real name of the input).
• Personal Input Label (the new name that the user give to the Input).
• Input channel label (the real name of the Input's channel).
• Personal Input channel Label (the new name that the user give to the Input's channel).
• Block size (the capability of the input).
• Reordering (the capability of the input).
• Routable inputs (the capability of the output).
• Limit Label Length- the user can cut all the labels in the matrix by this length.
• Filter Group - the user can add filter group condition (AND or Or), by default it's AND.
  

[garethsb]

Thanks for opening the PR, @orfar1994. I have had a play with this. The logic of both "personal" names and filtering is basically fine, but I have some concerns about the user interface.

Rename UI

• I don't like the way the UI resizes as you simply move the mouse over elements (hover, without clicking). At one time I got it into a state where hovering over a name caused it to show the edit button which resized and meant the mouse was no longer over it, so the UI flickered back and forth.
• I am concerned that the edit fields can be too small when the column is narrow, only two or three characters visible.
• I am not sure about being able to edit multiple names at the same time
• I think the presence of ✖️ (cancel) and the bin (delete) icon is a little confusing (delete should be presented at same time as edit)

My suggestion is that the rename functionality should move into the (now interactive) tooltip for the cell. The "personal" name in the tool tip can have edit and delete icons next to it and the edit field can be a sensible consistent width.

(I am also not sure about the word "personal", but this can be easily changed later obviously. Maybe "local", "user", "custom",... Brainstorm required!)

[orfar1994]

so the "personal" title (with the edit & delete icon) in the tooltip will be visible always even if we don't have personal name ?

[garethsb]

Following on...

Filtering

• I think it would be simpler for the user if one filter searched both the "personal" and "original" labels?
• I'd like to add ID filters as well for consistency with other pages (I've just added ID to the tool tips on master)
• Can we group Output and Input filters in the drop down, with a divider between? Or have separate Add Input Filters and Add Output Filters?
• Limiting label length is not a filter, it should be in a separate UI somehow, perhaps under a settings (cog) menu? Or at least separated by a divider for now? (Very minor point but it also needs a minimum of at least one character.)
• A settings menu would also be a place to add a Delete All Personal Names function?
• We need to think about the Routable Inputs filter.
  • At the moment if you select a particular Input it shows Outputs that mention that Input but not Outputs that have no routing constraints. If the user is interested in whether they can route a particular Input, those should perhaps be included?
  • Is it searching personal and original names?
  • I wonder if we should make Routable Inputs a Boolean or Const Filter that filters the Outputs based on the current filtered list of Inputs? Although the name seems a bit backwards then, and suggests we ought also have the opposite function of filtering the Inputs based on which can be routed to the current selection of Outputs...

More to come...

[garethsb]

so the "personal" title (with the edit & delete icon) in the tooltip will be visible always even if we don't have personal name ?

I wasn't completely sure, what do you think? Probably needs prototyping to see.

[garethsb]

One issue with using tooltips a lot in this page is how the app performs on touchscreen (tablet). The whole app is already not perfect on small screen of course, but it is something to consider...

[garethsb]

Rename UI

• I also remember I was quite confused initially by the fact that the rows automatically re-sort as soon as you ✅ the edit field. It makes me wonder whether alphabetical sorting on label is a bad idea, and instead we want users to be able to move rows and columns manually? Either by drag handles or (on Inputs) up/down buttons that swap the row with the previous/next row... I think the initial sort should be by ID then (or simply unsorted, in the same order as the Device lists the IDs in the response).
• Of course, editing the label can mean the current filter will now exclude the new value, so we can't avoid that...

[orfar1994]

[garethsb]

What do you think? I think that could work well. We can discuss on today's call.

[orfar1994]

Rename UI

• I also remember I was quite confused initially by the fact that the rows automatically re-sort as soon as you ✅ the edit field. It makes me wonder whether alphabetical sorting on label is a bad idea, and instead we want users to be able to move rows and columns manually? Either by drag handles or (on Inputs) up/down buttons that swap the row with the previous/next row... I think the initial sort should be by ID then.
• Of course, editing the label can mean the current filter will now exclude the new value, so we can't avoid that...

[orfar1994]

I agree. it looks better now.
I think the icon should be in the same line of the "Name".
if personal name exists, than the original name title will appear and the personal name will appear under the "name" title.

[garethsb]

OK, that could work...

I assume the delete (bin) icon would be hidden if there isn't currently a user-provided name?
And that we should add tooltips for channels too of course?

We certainly need to be consistent in how we refer to the two kinds of names/labels.

Suggestions instead of "personal":

• user name/label (nope, "user name" is bad!)
• custom name/label
• local name/label
• display name/label
• override name/label (too techy)

Alternatively, if we use "Name" to mean user-provided-if-present-otherwise-underlying-name, (and this ties in with only having a single Filter that searches both) and have a field for the underlying name that appears/disappears depending on whether there is a user-provided name, suggestions for that underlying name field:

• original name/label
• device name/label
• API name/label

None of these are great...

[garethsb]

Also, pressing Return in the edit field should choose the ✔️ so you don't have to click it explicitly to set the new value.

[garethsb]

Hi Or, thanks for all the work on this.

At the moment the key is only based on the inputId/outputId? Did it ought to include the Device ID or something, since inputId and outputId are only unique locally within the Channel Mapping API instance?

Are you OK to resolve this issue?

[garethsb]

When I have a bit more time, I want to look at refactoring EditableIONameField and EditableChannelLabelField into a single React element. It seems like maybe separate deviceID, ioKey, source, etc. are perhaps not necessary and a single argument that is e.g. set to ${deviceID}.${ioKey}.${source} in the case of Input/Output Name could be passed in.

I've had a go at this over the course of several commits.

[garethsb]

Thank you, @orfar1994, @rhastie. This is a great addition!