Closed benloh closed 4 years ago
@jdanish @kalanicraig Here's a first pass at filtering. Please try it out, especially on large databases! This has only gone through very basic QA at this point, so there are probably issues. Please report any problems in this thread.
Feature: Filtering
This is a first pass prototype of filtering.
To Test
Install
Update your template
Either add
type
definitions to your existing template, or if you are using the_default.template
in your project, replace your current template with a copy ofbuild/app/assets/templates/_default.template
. See the_default.template
file for an example.Start NetCreate
Select the "Filters" tab
Enter a search value. The graph will immediately update.
Click on the "Graph" tab to close the Tab Panel. A summary of the currently selected filter should be displayed at the bottom of the Tab Panel.
Click "Clear Filters" to clear the form and restore all nodes and edges.
Details
Filters
Filtering provides the ability to show and hide nodes and edges based on filter criteria.
Filters are set via the "Filters" tab panel.
The graph will immediately update with any changes made by the user to a filter.
Specifying Filters via the Template Spec
The groups of available filters are drawn directly from the current database's template file, e.g.
tacitus.template
. It will reflect any customizations made to the labels and hidden/shown status.Filter Types
In order for a filter to be defined for any given object key, it must have a "type" specified, e.g.
_default.template
The available types are:
Each type has specific operations associated with it, e.g. "string" supports "contains" and "not contains", whereas "number" supports ">" and "!=" etc.
"hidden": true
prompts will not show as a filter."type": "hidden"
to have the filter not show and retain the value in the database.How Filtering Works
How are filters applied?
Filters are applied via an implicit
AND
: An item matches the filter if EVERY filter that is active matches. For example, if we have:Node:
Label contains ab
Node:Type contains Person
...then person
Abraham Lincoln
will be displayed, but eventAbolition
will not.A few notes:
Search is case insensitive.
This works across both node and edge filters. So ALL node and ALL edge filters must pass.
Any inactive filter is ignored (e.g. the operator is
--
or the value is...
).Any edge that is connected to a hidden node is automatically hidden, overriding any filter match.
How are Nodes/Edges hidden?
Programmatically, any node or edge that is filtered is marked with a
isFilteredOut
flag. IfisFilteredOut
is true, the object is hidden. IfisFilteredOut
is absent or is false, the object is displayed.Hiding is simply done by setting the opacity of the node or edge. Nodes and edges are not actually removed from the graph.
Storyboard
With the Filtering system, we introduce a new development toolkit storybook.js. This is primarily used for the basic component development and data architecture design.
To run storybook, use
npm run storybook
.Known Issues / Future Work
nc-multiplex
-- We haven't had a chance to test this with nc-multiplex yet.The issues below will probably not be addressed with this release and may have to be saved for future funding.
Dates -- Currently the "Numeric" filter is just doing dumb string operations on the values. It does not support real dates.
Degrees -- Degrees (aka edge counts) are currently only calculated on the fly in the table views. The data is not being stored in the data objects. In order to filter by degrees, we'll have to revamp the edge counting.
Hidden nodes and edges can still be grabbed -- Because we are only setting the opacity of objects, objects remain active and can respond to mouse events. So you can grab and move an invisible node, for instance.
InfoPanel Resizing -- When resizing the InfoPanel, scrollbars do not properly appear on the FIltersPanel until well after the filters fields have been hidden. This should generally not be a problem so long as you're not a tiny screen. Just resize InfoPanel.