npmpackage.info

Gathering detailed insights and metrics for throughput-widget

throughput-widget

Repository for the development of a Throughput widget to be used by research databases.

1.0.7

MIT

JavaScript

207.00 B

50,538 1.7

Installations

npm install throughput-widget

Developer Guide

BETA

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

Vulnerability

99.6

License

Pull Requests

Open

16

Total

31

Closed

13

Merged

2

Issues

Open

4

Total

5

Closed

1

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 3 contributors

Languages

JavaScript

HTML

TypeScript

CSS

Shell

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

throughput-ec

Download Statistics

Total Downloads

50,538

Last Day

Last Week

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

Bundlephobia

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

NPM Version

6.12.0

Node Version

12.13.0

Total Downloads

Cumulative downloads

Total Downloads

50,538

Last day

250%

Compared to previous day

Last week

17.4%

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

jsrsasign jsrsasign-util

Dev Dependencies

@stencil/core

Versions

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 install in its root directory.
In 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.
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 npm module
Number of data services using the Throughput widget
Number of annotations added using the widget

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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

throughput-widget

Installations

Developer Guide

Yes

CommonJS

12.13.0

6.12.0

Score

Pull Requests

16

31

13

2

Issues

4

5

1

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

282.00 B

207.00 B

Maintainers

Package Meta Information

Total Downloads

50,538

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Throughput Annotation Widget

Contributors

Tips for Contributing

How to use this repository

Developing the widget locally

Integrating the widget into an existing application/website

Register with ORCID

Install the widget

<throughput-widget\> properties

Vue

React

Angular

Static HTML

Styling Options

Data Requirements

Key Outputs

Metrics

10

10

0

0

0

0

0

0

0

0

1.7

/10

`<throughput-widget\>` properties