@sfgrp/distinguish
Advanced tools
An interactive key engine that feeds off of [TaxonWorks](https://taxonworks.org)' [API](https://api.taxonworks.org). Distinguish is a product of the [Species File Group](https://speciesfilegroup.org) and its collaborators.
An interactive key engine that feeds off of TaxonWorks' API. Distinguish is a product of the Species File Group and its collaborators.
See Example page.
Interactive keys are tools used by taxonomists and others to diagnosis or seperate one taxon (e.g. a species) from others. Distinguish provides an embedable, web-based, interactive key interface. The key uses logic (the "engine") and data managed in an instance of TaxonWorks. Keys can served locally (e.g. by opening a file in your browser) or on websites. They require an internet connection.
Distinguish is a javascript package. All functionality is driven from a single, parameterized API call.
You can install the latest version with the npm CLI command:
npm install @sfgrp/distinguish vue pinia
As an alternative you can use the Yarn CLI command:
yarn add @sfgrp/distinguish vue pinia
You can copy and paste the following tags into your HTML file.
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/pinia"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@sfgrp/distinguish@latest/dist/style.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@sfgrp/distinguish@latest/dist/distinguish.umd.min.js"></script>
There are two ways to setup Interactive Keys. The easiest way is to let InteractiveKey auto discover your inputs automatically. For that, you simply need to provide a data attribute on your element.
Add data-interactive-key="true" attribute to input elements to initialize it.
To pass the options you need to add the prefix data- and write the option in kebab-case, like the following example:
<div
data-interactive-key="true"
data-observation-matrix-id="1"
data-project-token="xQ9bKrhfQtHYfro9t6YY0A"
data-base-url="https://sfg.taxonworks.org/api/v1"
></div>
You can initialize it by createInteractiveKey function
<div id="interactive-key"></div>
import { createInteractiveKey } from '@sfgrp/distinguish'
import '@sfgrp/distinguish/dist/style.css'
const app = createInteractiveKey('#interactive-key', options)
{
observationMatrixId: '', // Observation matrix ID
apiConfig: {
baseURL: '', // URL API, e.g https://sfg.taxonworks.org/api/v1
csrfToken: '', // CSRF Token. Don't use it with authentification API params.
projectId: '', // Project ID. Don't use it with projectToken.
userToken: '', // User Token. Don't use it with projectToken and csrfToken.
projectToken: '' // Project token. Don't use it with projectId and userToken.
}
}
This uses the CDN and Declarative approach.
index.html.data- options to point to your key.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@sfgrp/distinguish@latest/dist/style.min.css"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<style>
body {
margin: 0;
}
.standalone-app {
height: 100vh;
}
</style>
<title>Distinguish</title>
</head>
<body>
<div
class="standalone-app"
data-interactive-key="true"
data-observation-matrix-id="1"
data-project-token="yourprojecttoken"
data-base-url="https://<your.taxonworks.server>/api/v1"
></div>
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/pinia"></script>
<script src="https://cdn.jsdelivr.net/npm/@sfgrp/distinguish@latest/dist/distinguish.umd.min.js"></script>
</body>
</html>
GitHub Pages is perhaps the quickest way to deploy your key if you don't have access to your own server.
If nothing loads (blank page):
If when loaded or during use you see:
Request failed with status code 401 - The API configuration parameters are incorrectRequest failed with status code 404 - The API URL path or Token is incorrect (the base of the API URL is correct)Network error - The key can not connect to the internetDistinguish is based of interfaces available inside TaxonWorks. Those interfaces have many additional features facilitating the addition and management of images, curation, annotations, expansion, and editing of the underlying data. To start editing a key find a TaxonWorks provider, or install your own instance. Need help? Chat on Gitter or join a TaxonWorks event.
See CONTRIBUTING.md.
Distinguish is open source and is presently available under the University of Illinois/NCSA Open Source License.
FAQs
An interactive key engine that feeds off of [TaxonWorks](https://taxonworks.org)' [API](https://api.taxonworks.org). Distinguish is a product of the [Species File Group](https://speciesfilegroup.org) and its collaborators.
We found that @sfgrp/distinguish demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.