StaticSection

HiGlass Embedded Instance Examples

Basic Usage

HiGlassEmbeddedInstance is a JSX component for embedding HiGlass View Config items into a static section that has a filetype of jsx. For all HiGlass embedded instances, it is imperative to supply at least 2 props, uuid and key.

• uuid="00000000-1111-00..." - required - This is the uuid of HiGlass View Config item.
• key="anyRandomTextString" - required - 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.
• headerElement="any header tag e.g. h1, h2 ..." - headerElement is optional, you can completely exclude it by not defining headerElement prop at all. Default value is h3, other possible/recommended values are h1, h2, h3, h4, h5 or h6.

Examples

HiGlassEmbeddedInstance grabs title, description and collapsible fields from HiGlass View Config item. If HiGlass View Config item is collapsible then HiGlassEmbeddedInstance renders it in a collapsible panel.

1. Non-collapsible

<HiGlassEmbeddedInstance uuid="00000000-1111-0000-1111-000000000001" key="higlass-instance-1"/>

This generates the following display:

2. Collapsible

<HiGlassEmbeddedInstance uuid="00000000-1111-0000-1111-000000000003" key="higlass-instance-2"/>

This generates the following display:

3. Multiple Instances with Custom headerElement prop

Multiple HiGlassEmbeddedInstances can be embedded along with custom HTML markup:

        <p>Insert any text here e.g. Below are the insulation scores and boundary calls produced by different members of the 4DN Network, along with the results produced by DCIC.</p>
        <HiGlassEmbeddedInstance uuid="00000000-1111-0000-1111-000000000003" headerElement="h4" key="higlass-instance-3"/>
        <HiGlassEmbeddedInstance uuid="00000000-1111-0000-1111-000000000001" headerElement="h2" key="higlass-instance-4"/>
    

This generates the following display:

Insert any text here e.g. Below are the insulation scores and boundary calls produced by different members of the 4DN Network, along with the results produced by DCIC.