# 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` 1. `npm i` 1. `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 } };