Installations
npm install throughput-widgetDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
12.13.0
NPM Version
6.12.0
Score
74.3
Supply Chain
99.5
Quality
75.8
Maintenance
50
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
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! 🚀
Developer
Download Statistics
Total Downloads
50,538
Last Day
7
Last Week
54
Last Month
228
Last Year
7,793
GitHub Statistics
131 Commits
3 Forks
6 Watching
24 Branches
3 Contributors
Bundle Size
282.00 B
Minified
207.00 B
Minified + Gzipped
Maintainers
Package Meta Information
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
Total Downloads
Cumulative downloads
Total Downloads
50,538
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
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Dev Dependencies
1
Throughput Annotation Widget
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.
Contributors
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.
Tips for Contributing
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.
How to use this repository
Developing the widget locally
- Install npm.
- Clone the repository and run
npm installin its root directory. - In
src/index.html, setidentifier,link,additional-typeproperties for the data resource to be annotated. Additionally, setorcid-client-id, which is required unless the optionalread-only-modeproperty is set totrue. - Run with
npm run start. - View the widget in a browser at
http://localhost:3333. - Hack away and send us pull requests or issues!
Integrating the widget into an existing application/website
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.
Register with ORCID
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.
Install the widget
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\> properties
Once 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.
Vue
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.
React
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/>
Angular
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>
Static HTML
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>
Styling Options
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}
Data Requirements
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.
Key Outputs
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.
Metrics
This project is to be evaluated using the following metrics:
- COMPLETE -- Active npm registry page.
- Download activity for the
npmmodule - Number of data services using the Throughput widget
- Number of annotations added using the widget
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
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
- Warn: no pull requests merged into dev branch
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
115 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-3fvg-4v2m-98jf
- Warn: Project is vulnerable to: GHSA-rh63-9qcf-83gf
- Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
- Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
- Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
- Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Score
1.7
/10
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