Gathering detailed insights and metrics for throughput-widget
Gathering detailed insights and metrics for throughput-widget
Repository for the development of a Throughput widget to be used by research databases.
Installations
npm install throughput-widgetDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
12.13.0
NPM Version
6.12.0
Releases
Unable to fetch releases
Languages
5
JavaScript
HTML
TypeScript
CSS
Shell
JavaScript (52.19%)
HTML (21.28%)
TypeScript (13.43%)
CSS (12.76%)
Shell (0.34%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
131 Commits
3 Forks
5 Watchers
24 Branches
3 Contributors
Updated on Nov 16, 2021
Maintainers
1
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
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
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 effort to earn an OpenSSF best practices badge detected
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
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
124 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- 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-v6h2-p8h4-qcjw
- 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-vjh7-7g9h-fjfh
- 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-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- 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-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- 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-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- 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-06-30
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