Attribute Sorting/Filtering/Graphing

[BryonLewis]

Attributes Filter/Sorting:

New Features:

• Fixed import of JSON files so that Attributes are calculated when a user imports a trackJSON file. Before they were only calculated when a VIAME-CSV was imported.
• Attributes Subpanel CSS updated to fix minor issues from displaying frame numbers to not displaying Track Attributes if too many Detection Attributes Existed.
• Added a Sort option for Attributes which will sort Alphabetically by key or Numerically (placing non-numeric values at the bottom).
• Attributes now have a color associated with them automatically at run time. I am not saving this value in the Cofiguration.json file. This could be a further update if we allow the user to choose attribute color in the future.
• Filtering Icon for attributes is active when Attribute filtering is turned on.
• Attribute Details Panel
  • Attribute Filtering
    • Allows filtering the display of Attributes based on Numeric/Text/Boolean values or if a specific key is visible.
    • Can filter Track and Detection attributes independently
    • Filters are applied in the order they are displayed to allow cascading filters.
  • Timeline Visualization
    • Shows a graph representing the numeric values of attributes for the selected track
    • Limited currently to numeric values only but will updated in the future to include text/boolean values.
    • The graph icon is displayed next to the "Detections" and "Events" button.
    • Graphing is based on using a "Key" filter where it will only graph the accepted keys.
• Extras:
  • Hid the Groups Button for the timeline if no groups exist.

Dev Information:

• useAttributes - This file has expanded largely to include the AttributeFilter type definitions and storage of the data to apply filters. If this goes further there may be a need to add more data to it.
  • Storage for the filters, timelines, and functions for modifying the filters/timelines
• provides.ts - I included a separate useAttributeFilters to the provies.ts to use the specific values associated with AttributesFiltering and visualization.
• Vue Components
  • There are a few Vue components that were needed to properly display information in the Attribute Details Panel. These are mostly the filtering types and an ability to edit the filtering settings.
• Attributes Timeline
  • Some small modifications to the LineChart.vue to create a linear graph instead of step and also allow for highlighting of hovered lines.

[marySalvi]

I would expect to be able to toggle ascending/descending for both of these sorts not switch between sort types. I think this is fine for now because space is an issue but we might want to log an issue for the future.

[BryonLewis]

I copied the behavior in the type list. It has the same sort of sorting. Alphabetically or Numerically by count. I wanted to stick with the same paradigm for this.

[BryonLewis]

Change "Key Filter" for the timeline to "Timeline Filter".

[BryonLewis]

Change "Filter Type" to some terminology which isn't already used.
Maybe Switch to using radio buttons for the track/detection to swap between the filters.
Can then use "Display Filters for..." or similar.

[marySalvi]

This looks great!

Couple of thoughts that I don't know if they should be for this PR or another:
I think that when you click on the filter button for either track or detection, the radio button selected should reflect whichever you clicked to open it.

Also I think 'Draw Timeline' should trigger the timeline to switch to the attributes linechart

[marySalvi]

This looks awesome!