StaticSection

Embedded Search Table Examples

Basic Usage

Use JSX component in body of static section of filetype that has a filetype of jsx. Show results of any search URL. For all search tables, it is imperative to supply at least the following 3 props, with which a minimal search table can be embedded:

• searchHref="/search/?type=Item..." - This is the initial search URL, including URL query parameters, to search.
• schemas={schemas} - This should always be schemas={schemas}, it means to use/pass-in in-code variable schemas, which contains definitions for facets, columns, property titles, and so forth by Item Type.
• session={session} - This should always be session={session}, it means to use/pass-in in-code variable session, which is a boolean informing whether end-user is logged in, change of which triggers results refresh.
• key="anyRandomTextString" - This should always be set to any random string value, it tells React to avoid completely initiating a new instance of this component on extraneous changes, e.g. browser window width. This may be excluded if your component is within a parent/root JSX element that has a key prop, such as this static section.
• title="anyString or React component" - Title is optional, you can completely exclude it by not defining title prop at all or you can supply a plain text or allowed React component. It is highly recommended to use the built-in SearchTableTitle component:

  <SearchTableTitle title="Experiment Set or File or ..etc" externalSearchLinkVisible />

---

FacetList Configuration

No FacetList
tldr: facets={null}

FacetList configuration is done via the facets prop. You can completely exclude a FacetList by passing in null as the value for the facets prop of EmbeddSearchTable. Passing in null is different than not defining facets at all, which has a differing effect.

<EmbeddedItemSearchTable
    searchHref="/search/?type=Item"
    schemas={schemas}
    session={session}
    facets={null}
/>

This generates the following table:

Default Facets (from Schemas)
with optional exclusions

By not supplying a value for facets, leaving it undefined, will instruct the code to use the default Facets that are defined in schemas for the current Item type being searched. In many cases, will want to use the default facets for the Item type, but perhaps remove a few of them, such as facet for type field. This can be accomplished using the optional hideFacets prop, which if not provided will default to ["type", "validation_errors.name"]. If you are defining the searchHref prop to (pre-)filter the results in some way aside from just type, you would also want to hide the facet that allows people to remove/cancel that filtration. Code example and result is below.

<EmbeddedItemSearchTable
    searchHref="/search/?type=File&file_format.file_format=fastq&status=released&award.project=4DN&file_type=reads"
    schemas={schemas}
    session={session}
    hideFacets={["type", "validation_errors.name", "status", "file_format.file_format", "award.project", "file_type"]}
/>

(TODO) Custom Facets
NOT YET FUNCTIONAL

(In the future) You can also define and pass in your own complete facets object into the facets prop. It should be in the same form as the contents of facets property in the search response JSON (array).

Current issue & To-Do

The facets to pass in via the prop must currently also contain terms and term counts, which is... impossible to provide ahead of time. For custom facets to work, we must be able to pass in these facets TO the backend endpoint. We can perhaps migrate to POST requests for EmbeddedSearchView in mid-term future to allow for this and other features.

Columns Configuration

Overall this is very similar to FacetList configuration. There is a prop columns to which may provide an object of columns to completely customize or exclude it (or pass null) to default to the columns in schemas. Like the hideFacets prop, there is also a hideColumns prop which can be used to reduce the in-schema columns down.

Default Columns
with optional exclusions

<EmbeddedItemSearchTable
    searchHref="/search/?type=File&file_format.file_format=fastq&status=released&award.project=4DN&file_type=reads"
    schemas={schemas}
    session={session}
    columns={null} // excluding this would result in same effect (unlike with facets where null has special meaning)
    facets={null} // null hides FacetList explictly.
    hideColumns={[
        "track_and_facet_info.experiment_type",
        "track_and_facet_info.dataset",
        "track_and_facet_info.assay_info",
        "file_type",
        "file_format.file_format"
    ]}
/>

Custom Columns

<EmbeddedItemSearchTable
    searchHref="/search/?type=File&file_format.file_format=fastq&status=released&award.project=4DN&file_type=reads"
    schemas={schemas}
    session={session}
    facets={null} // null hides FacetList explictly.
    columns={{
        "display_title": {
            "title": "Title"
        },
        "lab.display_title": {
            "title": "Lab"
        },
        "track_and_facet_info.experiment_type" : {
            "title" : "Experiment Type",
            "description" : "Type of experiment to which this file belongs"
        }
    }}
/>

Title Configuration

No Title

Set title={null} or do not define title at all.

Default Title

The built-in SearchTableTitle component renders the total count of type (you should also pass it as title prop into SearchTableTitle) and an optional Browse/Search button that redirects you to Browse or Search pages with respectively.

<EmbeddedItemSearchTable
        searchHref="/search/?type=Biosource"
        schemas={schemas}
        session={session}
        facets={null}
        title={<SearchTableTitle title="Biosource" externalSearchLinkVisible={true} />}
    />

This generates the following table: