Gathering detailed insights and metrics for throughput-widget
Gathering detailed insights and metrics for throughput-widget
npm install throughput-widget
Typescript
Module System
Node Version
NPM Version
74.3
Supply Chain
99.5
Quality
75.8
Maintenance
50
Vulnerability
99.6
License
JavaScript (52.19%)
HTML (21.28%)
TypeScript (13.43%)
CSS (12.76%)
Shell (0.34%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
50,538
Last Day
7
Last Week
54
Last Month
228
Last Year
7,793
131 Commits
3 Forks
6 Watching
24 Branches
3 Contributors
Minified
Minified + Gzipped
Latest Version
1.0.7
Package Id
throughput-widget@1.0.7
Unpacked Size
2.37 MB
Size
614.19 kB
File Count
86
NPM Version
6.12.0
Node Version
12.13.0
Cumulative downloads
Total Downloads
Last day
250%
7
Compared to previous day
Last week
17.4%
54
Compared to previous week
Last month
22.6%
228
Compared to previous month
Last year
-65.2%
7,793
Compared to previous year
2
1
The Throughput Annotation Widget is a lightweight web component that allows web users to view Throughput annotations on a dataset, and to add new annotations after authenticating through ORCID.
Built with the Stencil toolchain, the widget is easy to integrate into Vue, React, and Angular applications, or a static HTML webpage.
This project is an open project, and contributions are welcome from any individual. All contributors to this project are bound by a code of conduct. Please review and follow this code of conduct as part of your contribution.
Issues and bug reports are always welcome. Code clean-up, and feature additions can be done either through pull requests to project forks or branches.
All products of the Throughput Annotation Project are licensed under an MIT License unless otherwise noted.
npm install
in its root directory.src/index.html
, set identifier
, link
, additional-type
properties for the data resource to be annotated. Additionally, set orcid-client-id
, which is required unless the optional read-only-mode
property is set to true
.npm run start
.http://localhost:3333
.Minimal examples of widget integration into Vue, React, Angular, and static HTML can be found in the examples directory. All examples use read-only-mode
.
If you plan to use the widget in read-only-mode
, skip this step.
To add annotations, widget users must first authenticate through ORCID. We encourage devs to register for the public ORCID API so they can freely manage post-authentication redirects for their site.
Separate registrations are required for the ORCID production and ORCID sandbox sites.
Once registered, an ORCID Client ID (e.g. APP-1234567890ABCDEF) will be provided. This is passed to the widget in the orcid-client-id
property, described below.
For Vue, React, and Angular applications, install the widget with npm:
npm install throughput-widget
For static HTML pages, import the widget with the following tag:
<script type="module" src="https://unpkg.com/throughput-widget/dist/throughputwidget/throughputwidget.esm.js"></script>
Vue, React, and Angular can use this tag as an alternative to npm.
<throughput-widget\>
propertiesOnce installed, your application will have access to the <throughput-widget>
component.
It accepts the following properties:
property | Required | Description |
---|---|---|
identifier | Required | re3data identifier for top-level data resource. |
link | Required | Identifies a dataset within the top-level data resource. |
additional-type | Required | Identifies the data type associated with link . |
read-only-mode | Optional bool (def. false ) | If true , the "Add Annotation" UI will be hidden. |
orcid-client-id | Required if read-only-mode=false | The ORCID client ID to be used for authentication. |
use-orcid-sandbox | Optional bool (def. false ) | If false , use ORCID production for authentication. If true , use ORCID sandbox |
Databases registered within Throughput use the re3data identifier as a UID. For example, the Neotoma Paleoecology Database has a re3data landing page at https://www.re3data.org/repository/r3d100011761, and a UID within Throughput of r3d100011761.
Within an individual database, individual data elements are identified using both an identifier, and an additional-type. These are defined by the database themselves. For example, in a data service that provides access to data at multiple granularity, it might be the case that there is a collectionunit with an identifier 1223, and also a site with the same identifier ID. The use of the additional-type together with the identifier is intended to add flexibility for the data resource in managing and querying annotations.
Vue, React, and Angular each require additional changes to make use of the widget, detailed below.
In src/main.js
, import the widget and tell Vue to ignore the widget element:
1import { applyPolyfills, defineCustomElements } from 'throughput-widget/loader'; 2Vue.config.ignoredElements = ["throughput-widget"]; 3applyPolyfills().then(() => { 4 defineCustomElements(); 5});
The widget will be added to the .vue
template file, as an HTML element. Add the widget to your dataset template, and pass in props. Note the Vue-specific syntax for the link
prop. this.dsid
is the dataset page's ID.
1<throughput-widget 2 identifier="[your re3data ID]" 3 :link.prop="this.dsid" 4 additional-type="[your dataset type]" 5 orcid-client-id="[your ORCID client ID]" 6/>
NOTE: If the widget is to be run in read-only mode, you can omit the orcid-client-id
.
In App.js, import the widget:
1import { applyPolyfills, defineCustomElements } from 'throughput-widget/loader'; 2applyPolyfills().then(() => { 3 defineCustomElements(); 4});
Add the widget to your dataset template, and pass in props. Note the React-specific syntax for the link
prop. dsid
is the dataset page's ID.
1<throughput-widget 2 identifier="[your re3data ID]" 3 link={dsid} 4 additional-type="[your dataset type]" 5 orcid-client-id="[your ORCID client ID]" 6/>
In app.module.ts, add CUSTOM_ELEMENTS_SCHEMA
to the imports from @angular/core
, then include it in AppModule's schemas
list. Repeat for other modules that use the widget.
1// ... 2import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; // import CUSTOM_ELEMENTS_SCHEMA 3 4@NgModule({ 5 // ... 6 schemas: [CUSTOM_ELEMENTS_SCHEMA] // add CUSTOM_ELEMENTS_SCHEMA to AppModule and other modules using the widget 7}) 8export class AppModule { }
In main.ts, import and call defineCustomElements()
:
1// ... 2import { defineCustomElements } from 'throughput-widget/loader'; 3 4// ... 5defineCustomElements();
Add the widget to your dataset template, and pass in props. Note the Angular-specific syntax for the link
prop. dsid
is the dataset page's ID.
1<throughput-widget 2 identifier="[your re3data ID]" 3 link="{{ dsid }}" 4 additional-type="[your dataset type]" 5 orcid-client-id="[your ORCID client ID]" 6></throughput-widget>
Add the imported <throughput-widget>
tag to your dataset page(s):
1<throughput-widget 2 identifier="[your re3data ID]" 3 link="[your dataset ID]" 4 additional-type="[your dataset type]" 5 orcid-client-id="[your ORCID client ID]" 6></throughput-widget>
There are several CSS variables available for styling.
These currently include:
1--badge-background-color 2--badge-border-color 3--badge-font-color 4--modal-background-color 5--modal-font-color 6--modal-card-color 7--widget-font-family
They can be added to your site's CSS like so:
1throughput-widget { 2 --badge-background-color: red; 3}
The widget pulls annotations from the Throughput Annotation Database using the Annotation API. Annotations are added by individuals, or through scripted workflows and are searchable using the API.
Once a user authenticates through ORCID, the widget can be used to annotate a dataset. These annotations are maintained on Throughput, but can be accessed by any individual.
This project is to be evaluated using the following metrics:
npm
moduleNo vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
115 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More