open-index/open-npm huggingface dataset:
npm package: @legumeinfo/taxon-symbology
Description: A TypeScript library for consistent coloring of visualizations by genus & species
Author: Legume Information System
Latest version: 1.1.1

# `@legumeinfo/taxon-symbology`

A TypeScript library for consistent coloring of visualizations by genus &amp; species.

## Installation

```console
npm i @legumeinfo/taxon-symbology
```

## Usage

To use the library, import the `taxonChroma` object.
When using the library in a webpage, import from the bundled script:
```html
<script type="module">
    import { taxonChroma } from 'node_modules/@legumeinfo/taxon-symbology/dist/taxon-symbology.min.js';
</script>
```
When using the library in a TypeScript/JavaScript project, import from the module:
```typescript
import { taxonChroma } from '@legumeinfo/taxon-symbology';
```

Use the library as follows:
```typescript
// returns css color specification in rgb
taxonChroma.get(taxon, options);

// examples:
taxonChroma.get('Arachis hypogaea'); // returns "rgb(254, 255, 32)"
taxonChroma.get('Arachis burkartii'); // etc.

// make 20% lighter overall
taxonChroma.get(someTaxon, { lightnessFactor: 1.2 } );

// override some taxon
taxonChroma.get(myTaxonVar, {
  'overrides' : {
    'phaseolus lunatus' : 'green',
  }
});
```
Note that the library is case-insensitive, meaning that `taxonChroma.get('Arachis hypogaea')` and `taxonChroma.get('ARACHIS HYPOGAEA')` will return the same result.
Similarly, if the `overrides` has multiple entries for the same taxon (i.e. different capitalizations), then the last one will be used.
npm package: @legumeinfo/web-components
Description: Web Components for the Legume Information System and other AgBio databases
Author: Legume Information System
Latest version: 1.7.0

# `@legumeinfo/web-components`

**`@legumeinfo/web-components` is an [open-source](https://github.com/legumeinfo/web-components) Web Component library** for interacting with and visualizing biological data.
The Web Components can be used as is in your HTML or extended in your own JavaScript/TypeScript library.

## Documentation

Full user documentation for `@legumeinfo/web-components` is available on [our documentation site](https://legumeinfo.github.io/web-components/).
Technical documentation for developers is available on [GitHub](https://github.com/legumeinfo/web-components).
This README shows the basics of installing the library and using Web Components, but most features are only documented on our docs site.

## Getting started

`@legumeinfo/web-components` does not use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_shadow_DOM) in preference for inheriting global styles.
Specifically, `@legumeinfo/web-components` assumes [UIkit](https://getuikit.com/) has been loaded in the document, so be sure to install this before using the library.

Install the library as follows:

```
npm install @legumeinfo/web-components
```

The library can then be used in your HTML as follows:

```html
<head>
    <!-- UIkit -->
    <link rel="stylesheet" type="text/css" href="uikit/dist/css/uikit.min.css">
    <script src="uikit/dist/js/uikit.min.js"></script>
    <!-- @legumeinfo/web-components -->
    <script type="module" src="@legumeinfo/web-components/dist/web-components.min.js"></script>
</head>
<body>
    <lis-gene-search-element></lis-gene-search-element>
</body>
```

The library can be used in your JavaScript/TypeScrip library as follows:

```typescript
import { LisGeneSearchElement } from '@legumeinfo/web-components';

class MySearchElement extends LisGeneSearchElement { }
```