{"file": "/src/encoded/static/data/embedded-search-table-demo.jsx", "name": "demos.embedded-search-table", "award": {"uuid": "b0b9c607-f8b4-4f02-93f4-9895b461334b", "project": "4DN", "display_title": "4D NUCLEOME NETWORK DATA COORDINATION AND INTEGRATION CENTER", "name": "1U01CA200059-01", "description": "DCIC: The goals of the 4D Nucleome (4DN) Data Coordination and Integration Center (DCIC) are to collect, store, curate, display, and analyze data generated in the 4DN Network. We have assembled a team of investigators with a strong track record in analysis of chromatin interaction data, image processing and three-dimensional data visualization, integrative analysis of genomic and epigenomic data, data portal development, large-scale computing, and development of secure and flexible cloud technologies. In Aim 1, we will develop efficient submission pipelines for data and metadata from 4DN data production groups. We will define data/metadata requirements and quality metrics in conjunction with the production groups and ensure that high-quality, well- annotated data become available to the wider scientific community in a timely manner. In Aim 2, we will develop a user-friendly data portal for the broad scientific community. This portal will provide an easy-to-navigate interface for accessing raw and intermediate data files, allow for programmatic access via APIs, and will incorporate novel analysis and visualization tools developed by DCIC as well as other Network members. For computing and storage scalability and cost-effectiveness, significant efforts will be devoted to development and deployment of cloud-based technology. We will conduct tutorials and workshops to facilitate the use of 4DN data and tools by external investigators. In Aim 3, we will coordinate and assist in conducting integrative analysis of the multiple data types. These efforts will examine key questions in higher-order chromatin organization using both sequence and image data, and the tools and algorithms developed here will be incorporated into the data portal for use by other investigators. These three aims will ensure that the data generated in 4DN will have maximal impact for the scientific community.", "status": "current", "@id": "/awards/1U01CA200059-01/", "@type": ["Award", "Item"], "center_title": "DCIC - DCIC", "pi": {"error": "no view permissions"}, "principals_allowed": {"view": ["system.Everyone"], "edit": ["group.admin"]}}, "title": "Embedded Search Table Examples", "status": "released", "description": "Check out these examples", "date_created": "2022-08-10T16:08:19.626342+00:00", "section_type": "Page Section", "submitted_by": {"error": "no view permissions"}, "last_modified": {"modified_by": {"error": "no view permissions"}, "date_modified": "2022-08-10T16:09:11.797646+00:00"}, "schema_version": "2", "@id": "/static-sections/4570c6b5-dad9-4f34-b366-9895b461334d/", "@type": ["StaticSection", "UserContent", "Item"], "uuid": "4570c6b5-dad9-4f34-b366-9895b461334d", "principals_allowed": {"view": ["system.Everyone"], "edit": ["group.admin", "role.owner", "userid.986b362f-4eb6-4a9c-8173-3ab267307e3a"]}, "display_title": "Embedded Search Table Examples", "external_references": [], "content": "\n\n
\n

Basic Usage

\n

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

\n\n \n\n
\n\n

FacetList Configuration

\n\n

No FacetList
tldr: {\"facets={null}\"}

\n\n

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

\n\n 
{''}
\n\n

This generates the following table:

\n\n \n\n

Default Facets (from Schemas)
with optional exclusions

\n\n

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

\n\n 
{''}
\n\n \n\n

(TODO) Custom Facets
NOT YET FUNCTIONAL

\n\n

\n (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\n in the search response JSON (array).\n

\n\n
Current issue & To-Do
\n

\n The facets to pass in via the prop must currently also contain terms and term counts, which is... impossible to provide ahead of time.\n 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\n mid-term future to allow for this and other features.\n

\n\n

Columns Configuration

\n\n

\n Overall this is very similar to FacetList configuration. There is a prop columns to which may provide an object of columns to completely customize\n 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\n down.\n

\n\n

Default Columns
with optional exclusions

\n\n 
{''}
\n\n \n\n

Custom Columns

\n\n 
{''}
\n\n \n\n

Title Configuration

\n\n

No Title

\n\n

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

\n\n

Default Title

\n\n

\n 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.\n

\n\n 
{'}\\r\\n    />'}
\n\n

This generates the following table:

\n\n }\n />\n\n
\n\n", "filetype": "jsx", "@context": "/terms/", "aggregated-items": {}, "validation-errors": []}