broadinstitute/gnomad-browser-toolkit

Components for building genomic data browsers

gnomAD Browser Toolkit

A collection of reusable components and tools for building genomic data browsers.

gnomad-browser-toolkit's Issues

Remove feature type from region viewer regions

RegionViewer currently requires a feature_type property on regions.

gnomad-browser-toolkit/packages/region-viewer/src/RegionViewer.js

Line 71 in 5d74d41

feature_type: PropTypes.string.isRequired,

However, it isn't used by RegionViewer.

Remove the requirement and implement padding by extending passed regions instead of adding additional padding regions. Better yet, as long as we're making a breaking change, remove padding entirely from RegionViewer and leave that to consumers.

Check if Unicode property escapes are supported for identifiers

Currently, identifiers regular expressions use a Unicode property escape if the Unicode flag is supported by the browser.

gnomad-browser-toolkit/packages/identifiers/src/identifiers.ts

Line 13 in 5d74d41

const DASH = isRegExpUnicodeFlagSupported ? '\\p{Pd}' : '-'

However, the Unicode flag is more broadly supported than Unicode property escapes.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#browser_compatibility

We should test if Unicode property escapes are supported.

Migrate GBTK to Typescript

Currently, the gnomAD Browser Toolkit (GBTK) package is written in JavaScript.

It would be preferable to migrate this package to TypeScript to be in line with what is happening with the gnomAD browser, and to gain the benefits of static typing.

Remove resources imports

A few examples import data from an unpublished "resources" folder. These should be replaced with fixtures checked into the repository, randomly generated data, or data fetched from the gnomAD API.

Once that is done, configuration related to resources can be removed from .eslintrc.js, babel.config.js, and .gitignore.

Accept underscores as separators for variant/region IDs

https://atgu.slack.com/archives/CNNTF8Z46/p1623178859062100

Yarn v2 migration road map

• Remove selective version resolution for @types/react in the top-level package.json and confirm that type checking still succeeds.
• Make sure ESLint + Prettier works for both JS and TS code.

Document publishing packages

Release region viewer update

#48 made breaking changes to region-viewer. When that is released, all track packages will also have to be updated to allow region-viewer version 1 or 2 in peer dependencies.

Deprecated lifecycle methods

A few components in the ui package have dependencies that use deprecated lifecycle methods.

• Combobox and Searchbox use react-autocomplete. react-autocomplete is no longer maintained (the repository is archived) and will need to be replaced.

• Tabs uses react-aria-tabpanel. react-aria-tabpanel is seeking new maintainers but has not been updated in the past year.

Add ID prop to SearchInput

Avoid creating a container element for each tooltip

Currently, the TooltipAnchor component attaches a container element to the body and render its tooltip into that container.

gnomad-browser-toolkit/packages/ui/src/tooltip/TooltipAnchor.js

Lines 23 to 34 in 6ed158a

	constructor(props) {
	super(props)
	this.containerElement = document.createElement('div')
	}
	componentDidMount() {
	document.body.appendChild(this.containerElement)
	}
	componentWillUnmount() {
	document.body.removeChild(this.containerElement)
	}

This affects performance when rendering many elements with tooltips, such as some plots. Preferably, all tooltip anchors could share one container.

Regex for variant/region IDs is not supported in IE 11

Unicode property escapes are not supported in IE 11.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Remove width prop from styled components

Some styled components take a width prop.

gnomad-browser-toolkit/packages/region-viewer/src/RegionViewer.js

Line 12 in 5d74d41

width: ${props => props.width}px;

This can result in a large number of classes being generated (one for every value of width as the window is resized). Instead, these should use inline styles.

OrderedList should display numbers for list items

OrderedList inherits list-style-type: disc from List. It should use decimal instead.

gnomad-browser-toolkit/packages/ui/src/List.js

Lines 3 to 7 in ec4f9da

	export const List = styled.ul`
	padding-left: 20px;
	list-style-type: disc;
	margin-bottom: 1em;
	`

gnomad-browser-toolkit/packages/ui/src/List.js

Line 13 in ec4f9da

export const OrderedList = List.withComponent('ol')

Migrate to pnpm

Related: #8

Currently, this repo uses Yarn as the package manager, rather than migrating to Yarn v2, which many users seem to dislike, it was suggested to migrate to pnpm, if we are to migrate.

Remove margin and font size from RegionViewer

These styles should be left up to the consumer.

gnomad-browser-toolkit/packages/region-viewer/src/RegionViewer.js

Lines 13 to 14 in 5d74d41

	margin: 0 auto 10px;
	font-size: 12px;

Decouple Markdown translation logic from Webpack plumbing in mdLoader

Migrate GBTK to TypeScript

Placeholder issue created during browser meeting, will be closed as duplicate on more thorough inspection if needed.

Add types to UI package

The gnomad-browser has migrated to TypeScript. It makes sense for the Toolkit to follow, and to add types for all of its components in the ui package, so that any Frontend application using these ui components can use this packages types.

Create per-package README files

So that documentation for each package shows up on its NPM page.

Create changelog

https://keepachangelog.com/

Modernize GBTK toolchain

Support variant ID pattern 1:55516888 G/GA