Faceted Search

A generalized faceted search for Allen Institute for Brain Science sites. It has these main components:

• data-table
• filter-box
• counts-ratio-box
• pivot-table
• tabs

Setup

1. git clone http://brandonb@stash.corp.alleninstitute.org/scm/aib/faceted-search.git
2. npm i
3. npm run start

Process

Please use pull requests when adding features or making changes.

There are two development branches:

• ABE/dev for Allen Brain Explorer
• BICCN/dev for BICCN

Configuration

The Faceted Search component receives one of two props for configuration (config or configUrl):

FacetedSearch.propTypes = {
    config: PropTypes.object,
    configUrl: PropTypes.string,
    layout: PropTypes.string,
    componentDefinitions: PropTypes.object.isRequired
};

• config: An object used to configure rendered sub-components and provide additional configuration options.
• configUrl: The component will initially check for props.config. If not provided, it will then check for props.configUrl and fetch this config as a JSON file.
• layout: Describes the css layout and positioning of components.
• componentDefinitions: An object that provides individual graphQL queries and data transformation functions for each component.

Component Config

One of two patterns may be used to create configuration of components. The properties and values in each config are provided as props to each rendered sub component of Faceted Search.

For Faceted Search with Tabs:

{
    "tabs": [
        {
            "label": "Tab 1",
            "componentProps": [
                {
                    "componentDefinition": "custom-counts-ratio-box",
                    "renderer": "counts-ratio-box",
                    "className": "counts",
                    "position": 0,
                    "alignment": "left"
                },
                {
                    "componentDefinition": "filter-box",
                    "renderer": "filter-box",
                    "className": "filter-box",
                    "position": 1,
                    "showFilterTextSearch": true
                },
            ]
        },
        {
            "label": "Tab 2",
            "componentProps": [
                {
                    "componentDefinition": "other-custom-counts-ratio-box",
                    "renderer": "counts-ratio-box",
                    "className": "counts",
                    "position": 0,
                    "alignment": "left"
                },
                {
                    "componentDefinition": "pivot-table",
                    "renderer": "pivot-table",
                    "className": "pivot-table",
                    "position": 2
                },
            ]
        },
        {
            "label": "Tab 3",
            "componentProps": [
                ...
            ]
        }
    ],
    ...
}

For Faceted Search without tabs:

{
    "componentProps": [
        {
            "componentDefinition": "custom-counts-ratio-box",
            "renderer": "counts-ratio-box",
            "className": "counts",
            "position": 0,
            "alignment": "left"
        },
        {
            "componentDefinition": "custom-filter-box",
            "renderer": "filter-box",
            "className": "filter-box",
            "position": 1,
            "showFilterTextSearch": true
        },
    ],
    ...
}

Components

The renderer property is one of:

[
    'counts-ratio-box',
    'filter-box',
    'data-table',
    'pivot-table',
]

Counts Ratio Box

Basic props:

{
    "componentProps: [
        {
            "componentDefinition": "custom-counts-ratio-box",
            "renderer": "counts-ratio-box",
            "className": "counts",
            "position": 0,
            "label": "(Optional)",
            "alignment": "left"
        }
    ]
}

• componentDefinition: The string key to the query and transform object in component definitions.
• renderer: The string key for the particular sub-component renderer in Faceted Search.
• position: Used by Faceted Search for this component's position in the layout.
• label: A label string.
• alignment: This property gets passed directly to the component and determines how the counts are arranged inside the component
• className: Used by Faceted Search

Filter Box

Basic props:

{
    "componentProps": [
        {
            "componentDefinition": "filter-box",
            "renderer": "filter-box",
            "className": "filter-box",
            "position": 1,
            "showFilterTextSearch": true
        }
    ]
}

• componentDefinition: The string key to the query and transform object in component definitions.
• renderer: The string key for the particular sub-component renderer in Faceted Search.
• position: Used by Faceted Search for this component's position in the layout.
• className: Used by Faceted Search
• showFilterTextSearch: A bool indicating if the user should be able to search the filters using a text box.

Data Table

Basic props:

{
    "componentProps": [
        {
                "componentDefinition": "data-table",
                "renderer": "data-table",
                "className": "data-table",
                "position": 2,
                "columnFont": "700 normal 0.875rem roboto, sans-serif",
                "columnMarginHorizontal": 22,
                "offsetIncrement": 1000,
                "schema": [/* See Data Table ReadMe */]
        }
    ]
}

• componentDefinition: The string key to the query and transform object in component definitions.
• renderer: The string key for the particular sub-component renderer in Faceted Search.
• className: Used by Faceted Search
• position: Used by Faceted Search for this component's position in the layout.
• columnFont: Font information for column header.
• columnMarginHorizontal: Spacing between columns.
• offsetIncrement: How many rows to offset by for each chunk of data.
• schema: This is a description of which columns to render and how to access the data for cells.

Pivot Table

Basic props:

{
    "componentProps": [
        {
            "componentDefinition": "pivot-table",
            "renderer": "pivot-table",
            "className": "pivot-table",
            "position": 2
        }
    ]
}

• componentDefinition: The string key to the query and transform object in component definitions.
• renderer: The string key for the particular sub-component renderer in Faceted Search.
• className: Used by Faceted Search
• position: Used by Faceted Search for this component's position in the layout.

Other Configuration

Network

The network section of the config is used to define how and where we make a graphql connections. Currently this contains only one value: uri

{
    ...
    "network": {
        "uri": "http://my-graphql-server.org/"
    }
}

State Store

{
    ...
    "state-store": {
        "rowCountLimit": 1000,
        "default-sort": ["technique"]
    }
}

• default-sort: Optionally provide a column that initialized as sorted.
• rowCountLimit sets the number of rows to load in chunks for the data table component.

Component Definition

This object contains keys associated with the componentDefinition property of each of the componentProps listed in the config. Each component definition is an object with query and transform properties. These are used by Faceted Search to query specific data for each component and to transform data from an API into data that is consumable by a component. Component definitions should be provided by the hosting application.

const componentDefinitions = {
    'custom-counts-ratio-box': { query: CustomCountsQueryBuilder, transformer: CustomCountsDataTransform },
    'another-custom-counts-ratio-box': { query: AnotherCustomCountsQueryBuilder, transformer: AnotherCustomCountsDataTransform },
    'filter-box': { query: FilterBoxQueryBuilder, transformer: FilterBoxDataTransform },
    'data-table': { query: DataTableQueryBuilder, transformer: DataTableDataTransform },
    'pivot-table': { query: null, transformer: d => d }
};