# Taxonomy

The `taxonomy`  package connects to the [Connectivity Hub](https://connectivity-hub.weadapt.org/?resource=false\&teaser_resource=false), which is a “search and discovery” tool that helps users find relevant knowledge and organizations working on climate change issues. The Hub is a testbed for artificial intelligence (AI) and machine learning techniques to produce new, policy-relevant insights. It was developed by partners at [SEI](https://www.sei.org/) in cooperation with the DIRECTED project. 

When using the taxonomy package, users are able to integrate terms and their definitions directly from the Connectivity Hub's API (see documentation via [this link](https://api.connectivity-hub.com/terms-api-guide.html)), as well as link to the hub for further literature exploration. The following steps showcase how to integrate this package into the front-end as a component. 

<figure><img src="/files/6DWchManm6Z6PR3XHz1m" alt="" width="315"><figcaption><p>The taxonomy package integrated as a component</p></figcaption></figure>

### Adding the `taxonomy` package

For the purposes of this example, we will showcase how this was done in the [Crop Yield Scenarios](/data-fabric-manual/using-the-data-fabric/regional-adaptation-planning/long-term-climate-projections.md#crop-yield-scenarios) in the [Danube RWL](/data-fabric-manual/real-world-labs/rwl-3-danube-region.md) (see the file itself in the repository [here](https://github.com/directedproject-eu/directed-pioneer/blob/main/src/apps/rwl_danube/danube-app/components/ChartComponentZala.tsx)).&#x20;

{% stepper %}
{% step %}

#### Install the package into the app

Within your application's `package.json`, add the `taxonomy` package under dependencies and install it by running `pnpm install`.&#x20;

If you do not have the `taxonomy` package already in the packages folder, copy it from [this repository](https://github.com/directedproject-eu/directed-pioneer/tree/main/src/packages) and then install it.

```typescript
// your-app/package.json
{
    "name": "my-app",
    "private": true,
    "main": "services.ts",
    "dependencies": {
        "taxonomy": "workspace:^"
    }
}
```

{% endstep %}

{% step %}

#### Import the package into the desired location

The taxonomy package is flexible in that it can be called and displayed in any component that supports Typescript with JSX syntax.&#x20;

We will also add a `Button` and `Flex` from OPT's Chakra integration, and [internationalization](/data-fabric-manual/adding-and-developing-features/introduction-to-open-pioneer-trails/internationalization.md) (see [Chakra integration with OPT](https://github.com/open-pioneer/trails-starter/blob/f3d1ce7e19097721f0d7fa47ce9d687a4f9a3c36/docs/internals/ChakraV3Migration.md#L4) for more details).&#x20;

```typescript
// your-app/YourComponent.tsx
import { TaxonomyInfo } from "taxonomy";
import { Button, Flex } from "@open-pioneer/chakra-integration";
import { useIntl } from "open-pioneer:react-hooks";
```

{% endstep %}

{% step %}

#### Declare the statement for the keyword

```typescript
// your-app/YourComponent.tsx
const [activeKeyword, setActiveKeyword] = useState<string | null>(null); 
```

{% endstep %}

{% step %}

#### Add terms in the `return` statement

These serve as a trigger for the taxonomy pop-up. Any term in the API can be called with the package. Search for available terms in [Connectivity Hub](https://connectivity-hub.weadapt.org/?resource=false\&teaser_resource=false).&#x20;

In this example, we will add the term "agriculture" in a `Button`. More terms can be added as desired.&#x20;

```typescript
// your-app/YourComponent.tsx
<Button
    variant="link"
    color="#2e9ecc"
    onClick={() => setActiveKeyword("agriculture")}
    >
    {intl.formatMessage({id: "charts.keyword1"})} // i18n
</Button>{" "}
```

{% endstep %}

{% step %}

#### Add the `TaxonomyInfo` component&#x20;

The component is wrapped for conditional rendering, so the pop-up shows when the keyword is active.&#x20;

```typescript
// your-app/YourComponent.tsx
{activeKeyword && (
    <Flex>
        <TaxonomyInfo
            keyword={activeKeyword}
            onClose={() => setActiveKeyword(null)}
        />
    </Flex>
)}
```

{% endstep %}

{% step %}

#### Summary example

We now have a minimal working example of the `taxonomy` package implemented as a component. All the relevant pieces put together are as follows:&#x20;

```typescript
// your-app/YourComponent.tsx
import { TaxonomyInfo } from "taxonomy";
import { Button, Flex } from "@open-pioneer/chakra-integration";
import { useIntl } from "open-pioneer:react-hooks";

const ExampleChart = () => {
    const intl = useIntl(); // i18n
    const [activeKeyword, setActiveKeyword] = useState<string | null>(null);
    
    return (
            // Other code 
            <Button
                variant="link"
                color="#2e9ecc"
                onClick={() => setActiveKeyword("agriculture")}
            >
                {intl.formatMessage({id: "charts.keyword1"})}
            </Button>{" "}
        {activeKeyword && (
            <Flex>
                <TaxonomyInfo
                    keyword={activeKeyword}
                    onClose={() => setActiveKeyword(null)}
                />
            </Flex>
        )}
    );
};
export default ExampleChart;
```

{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://directed-eu.gitbook.io/data-fabric-manual/adding-and-developing-features/taxonomy.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.