@weng-lab/genomebrowser 0.0.17 → 0.0.18

package/README.md

@@ -1,124 +1,124 @@
-# Genome Browser Component Library
-
-## Installation
-`yarn add @weng-lab/genomebrowser`
-
-`npm install @weng-lab/genomebrowser`
-
-## Usage
-
-The library revolves around creating tracks and adding them to the browser. To do this, first you import the Genome Browser component, creating the browser state and dispatch function, and adding your tracks to the state. Then you pass the state and dispatch function to the GenomeBrowser component as props.
-
-### Walkthrough
-First, import the Genome Browser component:
-```tsx
-import { GenomeBrowser } from '@weng-lab/genomebrowser';
-```
-Then you create the browser state and dispatch function with the `useBrowserState` hook:
-
-```tsx
-import { useBrowserState } from '@weng-lab/genomebrowser';
-const [browserState, browserDispatch] = useBrowserState({
-  domain: { chromosome: "chr11", start: 5220000, end: 5420000 },
-  preRenderedWidth: 1350,
-  width: 1500,
-  tracks: [],
-  highlights: []
-});
-```
-
-There are a few ways to add tracks to the browser.
-1. You can add a track by dispatching the `ADD_TRACK` action:
-```tsx
-import { BigWigTrackProps } from '@weng-lab/genomebrowser';
-const myBigWig: BigWigTrackProps = { ... }
-browserDispatch({ type: BrowserActionType.ADD_TRACK, track: myBigWig });
-```
-2. You can add a track by passing a track component as a child to the GenomeBrowser component:
-```tsx
-import { BigBedTrack } from '@weng-lab/genomebrowser';
-<GenomeBrowser browserState={browserState} browserDispatch={browserDispatch}>
-    <BigBedTrack ... />
-</GenomeBrowser>
-```
-3. You can also add a track by appending it to the 'tracks' array in the browser state:
-```tsx
-import { BigWigTrackProps, BrowserState } from '@weng-lab/genomebrowser';
-const myBigWig: BigWigTrackProps = { ... }
-const myState: BrowserState = {
-    domain: { chromosome: "chr11", start: 5220000, end: 5420000 },
-    ... // initialize the rest of the state
-    tracks: [myBigWig] // add the track to the state
-}
-```
-
-## Full Example
-
-```tsx
-// in trackExamples.ts
-export const bigWigExample: BigWigTrackProps = {
-    ...DefaultBigWig,
-    id: "1",
-    title: "bigwig",
-    height: 100,
-    url: "https://downloads.wenglab.org/DNAse_All_ENCODE_MAR20_2024_merged.bw",
-    color: "blue"
-}
-export const bigBedExample: BigBedTrackProps = {
-    ...DefaultBigBed,
-    id: "2",
-    title: "bigbed",
-    height: 75,
-    rowHeight: 12,
-    color: "red",
-    url: "https://downloads.wenglab.org/GRCh38-cCREs.DCC.bigBed"
-}
-export const transcriptExample: TranscriptTrackProps = {
-    ...DefaultTranscript,
-    id: "3",
-    title: "transcript",
-    rowHeight: 12,
-    assembly: "GRCh38",
-    queryType: "gene",
-    version: TranscriptHumanVersion.V47,
-    height: 100,
-    color: "green"
-}
-```
-
-```tsx
-// in main.tsx
-import { useEffect } from 'react'
-import {
-    GenomeBrowser, BrowserState, BrowserActionType, useBrowserState,
-    BigBedTrack
-} from '../lib'
-import { bigWigExample, bigBedExample, transcriptExample } from './trackExamples'
-
-const defaultState: BrowserState = {
-    domain: { chromosome: "chr11", start: 5220000, end: 5420000 },
-    preRenderedWidth: 1350,
-    width: 1500,
-    zoomLevel: 148,
-    delta: 0,
-    tracks: [bigWigExample] // adds a BigWig track to the state
-}
-
-function Main() {
-    const [browserState, browserDispatch] = useBrowserState(defaultState)
-
-    useEffect(() => {
-        // add a Transcript track to the state
-        browserDispatch({ type: BrowserActionType.ADD_TRACK, track: transcriptExample })
-    }, [])
-
-    return (
-        <GenomeBrowser browserState={browserState} browserDispatch={browserDispatch}>
-            <BigBedTrack {...bigBedExample} /> // add a BigBed track to the browser
-        </GenomeBrowser>
-    )
-}
-```
-
-The browser will look something like this:
-![Browser Example](https://github.com/weng-lab/genomebrowser-components/blob/master/image.png)
+# Genome Browser Component Library
+
+## Installation
+`yarn add @weng-lab/genomebrowser`
+
+`npm install @weng-lab/genomebrowser`
+
+## Usage
+
+The library revolves around creating tracks and adding them to the browser. To do this, first you import the Genome Browser component, creating the browser state and dispatch function, and adding your tracks to the state. Then you pass the state and dispatch function to the GenomeBrowser component as props.
+
+### Walkthrough
+First, import the Genome Browser component:
+```tsx
+import { GenomeBrowser } from '@weng-lab/genomebrowser';
+```
+Then you create the browser state and dispatch function with the `useBrowserState` hook:
+
+```tsx
+import { useBrowserState } from '@weng-lab/genomebrowser';
+const [browserState, browserDispatch] = useBrowserState({
+  domain: { chromosome: "chr11", start: 5220000, end: 5420000 },
+  preRenderedWidth: 1350,
+  width: 1500,
+  tracks: [],
+  highlights: []
+});
+```
+
+There are a few ways to add tracks to the browser.
+1. You can add a track by dispatching the `ADD_TRACK` action:
+```tsx
+import { BigWigTrackProps } from '@weng-lab/genomebrowser';
+const myBigWig: BigWigTrackProps = { ... }
+browserDispatch({ type: BrowserActionType.ADD_TRACK, track: myBigWig });
+```
+2. You can add a track by passing a track component as a child to the GenomeBrowser component:
+```tsx
+import { BigBedTrack } from '@weng-lab/genomebrowser';
+<GenomeBrowser browserState={browserState} browserDispatch={browserDispatch}>
+    <BigBedTrack ... />
+</GenomeBrowser>
+```
+3. You can also add a track by appending it to the 'tracks' array in the browser state:
+```tsx
+import { BigWigTrackProps, BrowserState } from '@weng-lab/genomebrowser';
+const myBigWig: BigWigTrackProps = { ... }
+const myState: BrowserState = {
+    domain: { chromosome: "chr11", start: 5220000, end: 5420000 },
+    ... // initialize the rest of the state
+    tracks: [myBigWig] // add the track to the state
+}
+```
+
+## Full Example
+
+```tsx
+// in trackExamples.ts
+export const bigWigExample: BigWigTrackProps = {
+    ...DefaultBigWig,
+    id: "1",
+    title: "bigwig",
+    height: 100,
+    url: "https://downloads.wenglab.org/DNAse_All_ENCODE_MAR20_2024_merged.bw",
+    color: "blue"
+}
+export const bigBedExample: BigBedTrackProps = {
+    ...DefaultBigBed,
+    id: "2",
+    title: "bigbed",
+    height: 75,
+    rowHeight: 12,
+    color: "red",
+    url: "https://downloads.wenglab.org/GRCh38-cCREs.DCC.bigBed"
+}
+export const transcriptExample: TranscriptTrackProps = {
+    ...DefaultTranscript,
+    id: "3",
+    title: "transcript",
+    rowHeight: 12,
+    assembly: "GRCh38",
+    queryType: "gene",
+    version: TranscriptHumanVersion.V47,
+    height: 100,
+    color: "green"
+}
+```
+
+```tsx
+// in main.tsx
+import { useEffect } from 'react'
+import {
+    GenomeBrowser, BrowserState, BrowserActionType, useBrowserState,
+    BigBedTrack
+} from '../lib'
+import { bigWigExample, bigBedExample, transcriptExample } from './trackExamples'
+
+const defaultState: BrowserState = {
+    domain: { chromosome: "chr11", start: 5220000, end: 5420000 },
+    preRenderedWidth: 1350,
+    width: 1500,
+    zoomLevel: 148,
+    delta: 0,
+    tracks: [bigWigExample] // adds a BigWig track to the state
+}
+
+function Main() {
+    const [browserState, browserDispatch] = useBrowserState(defaultState)
+
+    useEffect(() => {
+        // add a Transcript track to the state
+        browserDispatch({ type: BrowserActionType.ADD_TRACK, track: transcriptExample })
+    }, [])
+
+    return (
+        <GenomeBrowser browserState={browserState} browserDispatch={browserDispatch}>
+            <BigBedTrack {...bigBedExample} /> // add a BigBed track to the browser
+        </GenomeBrowser>
+    )
+}
+```
+
+The browser will look something like this:
+![Browser Example](https://github.com/weng-lab/genomebrowser-components/blob/master/image.png)

package/dist/components/tracks/importance/importance.d.ts

@@ -0,0 +1,32 @@
+import { Domain } from '../../../utils/types';
+import { DisplayMode } from '../types';
+import { ImportanceTrackAnnotation, ImportanceTrackData, ImportanceTrackDataPoint } from './importanceTrack';
+export type ImportanceProps = {
+    data: ImportanceTrackData;
+    width: number;
+    height: number;
+    domain: Domain;
+    id: string;
+    title: string;
+    titleSize: number;
+    trackMargin: number;
+    displayMode: DisplayMode;
+};
+export type ImportanceOptions = {
+    onSequenceLoaded?: (sequence: string) => void;
+    allowSelection?: boolean;
+    onSelectionEnd?: (coordinates: [number, number], values: ImportanceTrackDataPoint[]) => void;
+    onBaseMousedOver?: (x: ImportanceTrackDataPoint, i: number) => void;
+    onBaseClicked?: (x: ImportanceTrackDataPoint, i: number) => void;
+    onBaseMousedOut?: () => void;
+    svgRef?: React.RefObject<SVGSVGElement>;
+    zeroLineProps?: React.SVGProps<SVGLineElement>;
+    annotations?: ImportanceTrackAnnotation[];
+    transform?: string;
+};
+export declare const DefaultImportance: {
+    titleSize: number;
+    trackMargin: number;
+    canDrag: boolean;
+};
+export default function Importance(props: ImportanceProps & ImportanceOptions): import("react/jsx-runtime").JSX.Element;

package/dist/components/tracks/importance/importanceTrack.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+export type ImportanceTrackAnnotation = {
+    coordinates: [number, number];
+    color: string;
+    onMouseOver?: () => void;
+    children?: React.ReactElement[];
+};
+export type ImportanceTrackDataPoint = {
+    base: string;
+    importance: number;
+};
+export type ImportanceTrackSequence = {
+    sequence: string;
+    importance: number[];
+};
+export type ImportanceTrackData = ImportanceTrackDataPoint[] | ImportanceTrackSequence;
+export declare function isImportanceTrackSequence(data: ImportanceTrackData): data is ImportanceTrackSequence;
+/**
+ * Properties of an ImportanceTrack component.
+ * @member width the width of the component in SVG coordinates.
+ * @member height the height of the component in SVG coordinates.
+ * @member transform optional SVG transform to apply to the component.
+ * @member allowSelection if set, allows the user to click and drag to select sequences from the track.
+ * @member onSelectionEnd callback receiving information about a selection when the user releases the mouse.
+ * @member onBaseMousedOver callback receiving information about a moused over base in the sequence.
+ * @member onBaseMousedOut callback triggered when the user mouses out of a previously moused over base.
+ * @member onBaseClicked callback receiving information about a clicked base in the sequence.
+ * @member svgRef optional React reference to the containing SVG component.
+ * @member zeroLineProps optional SVG properties of the horizontal line at importance=0.
+ */
+export type TrackProps = {
+    width: number;
+    height: number;
+    transform?: string;
+    allowSelection?: boolean;
+    onSelectionEnd?: (coordinates: [number, number], values: ImportanceTrackDataPoint[]) => void;
+    onBaseMousedOver?: (x: ImportanceTrackDataPoint, i: number) => void;
+    onBaseClicked?: (x: ImportanceTrackDataPoint, i: number) => void;
+    onBaseMousedOut?: () => void;
+    svgRef?: React.RefObject<SVGSVGElement>;
+    zeroLineProps?: React.SVGProps<SVGLineElement>;
+    annotations?: ImportanceTrackAnnotation[];
+};
+/**
+ * Properties of an ImportanceTrack component.
+ * @member data the sequence/importance data to render.
+ */
+export type ImportanceTrackProps = TrackProps & {
+    data: ImportanceTrackData;
+    onSequenceLoaded?: (sequence: string) => void;
+};
+/**
+ *
+ * A sequence/importance track. Must be rendered within an SVG element. Data may be provided as a sequence string
+ * plus an array of importance values or an array of sequence/importance value pairs.
+ *
+ * @param props component properties; see TrackProps and ImportanceTrackProps.
+ * @returns a rendered ImportanceTrack component instance.
+ *
+ */
+declare const ImportanceTrack: React.FC<ImportanceTrackProps>;
+export default ImportanceTrack;

package/dist/components/tracks/importance/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Importance, ImportanceProps, ImportanceOptions, DefaultImportance } from './importance';
+export { Importance };
+export type { ImportanceProps, ImportanceOptions };
+export { DefaultImportance };

package/dist/components/tracks/importance/letter.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ImportanceTrackDataPoint } from './importanceTrack';
+export type LetterProps = ImportanceTrackDataPoint & {
+    fill?: string;
+    x: number;
+    totalHeight: number;
+    totalWidth: number;
+    transform: (x: number) => [number, number, string];
+    xScale: number;
+    onMouseOver?: () => void;
+    onMouseOut?: () => void;
+    onMouseUp?: () => void;
+    onClick?: () => void;
+};
+declare const Letter: React.FC<LetterProps>;
+export default Letter;

package/dist/components/tracks/importance/utils.d.ts

@@ -0,0 +1,27 @@
+import { ImportanceTrackAnnotation, ImportanceTrackData, ImportanceTrackDataPoint } from './importanceTrack';
+export type Range = {
+    start: number;
+    end: number;
+};
+export declare function linearTransform(initial: Range, final: Range): (value: number) => number;
+type YRange = {
+    start: number;
+    end: number;
+};
+export type GenomicRange = {
+    chromosome: string;
+    start: number;
+    end: number;
+};
+export declare function yRange<T>(values: T[], transform: (v: T) => number): YRange;
+export declare function svgElementTransform(transform: (x: number) => number): (x: number) => [number, number, string];
+export declare function useRenderedImportanceTrackData(data: ImportanceTrackData, height: number): [ImportanceTrackDataPoint[], (x: number) => [number, number, string], (x: number) => number];
+export declare function useRenderedImportanceTrackAnnotations(annotations: ImportanceTrackAnnotation[], data: ImportanceTrackDataPoint[], transform: (x: number) => number): {
+    y: number;
+    height: number;
+    coordinates: [number, number];
+    color: string;
+    onMouseOver?: () => void;
+    children?: React.ReactElement[];
+}[];
+export {};

package/dist/components/tracks/motif/index.d.ts

@@ -1,4 +1,4 @@
-import { default as DenseMotif } from './dense';
-import { DenseMotifProps, SquishMotifProps } from './types';
-import { default as SquishMotif } from './squish';
-export { DenseMotif, SquishMotif, type DenseMotifProps, type SquishMotifProps };
+import { default as Motif, MotifProps, MotifOptions, DefaultMotif } from './motif';
+export { Motif };
+export type { MotifProps, MotifOptions };
+export { DefaultMotif };

package/dist/components/tracks/motif/motif.d.ts

@@ -0,0 +1,33 @@
+import { TrackType, DisplayMode } from '../types';
+import { Rect } from './types';
+import { Domain } from '../../../utils/types';
+export type MotifProps = {
+    displayMode: DisplayMode;
+    width: number;
+    height: number;
+    id: string;
+    domain: Domain;
+    data?: Rect[];
+    title: string;
+    titleSize: number;
+    trackMargin: number;
+};
+export type MotifOptions = {
+    transform?: string;
+    peakColor?: string;
+    color?: string;
+    peaks?: Rect[];
+    svgRef?: React.RefObject<SVGSVGElement>;
+    rowHeight?: number;
+    onHeightChanged?: (height: number) => void;
+    canDrag?: boolean;
+};
+export declare const DefaultMotif: {
+    trackType: TrackType;
+    titleSize: number;
+    trackMargin: number;
+    height: number;
+    displayMode: DisplayMode;
+    canDrag: boolean;
+};
+export default function Motif(props: MotifProps & MotifOptions): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/tracks/motif/types.d.ts

@@ -8,7 +8,6 @@ export type DenseMotifProps = {
     width: number;
     height: number;
     id?: string;
-    transform?: string;
     color?: string;
     peakColor?: string;
     domain: Domain;
@@ -16,6 +15,8 @@ export type DenseMotifProps = {
     peaks?: Rect[];
     svgRef?: React.RefObject<SVGSVGElement>;
     onHeightChanged?: (height: number) => void;
+    canDrag?: boolean;
+    hoverColor?: string;
 };
 export type SquishMotifProps = {
     data?: Rect[];
@@ -23,10 +24,11 @@ export type SquishMotifProps = {
     width: number;
     rowHeight: number;
     id?: string;
-    transform?: string;
     color?: string;
     peakColor?: string;
     domain: Domain;
     svgRef?: React.RefObject<SVGSVGElement>;
     onHeightChanged?: (height: number) => void;
+    canDrag?: boolean;
+    hoverColor?: string;
 };

package/dist/components/tracks/types.d.ts

@@ -2,6 +2,10 @@ import { OperationVariables, LazyQueryExecFunction } from '@apollo/client';
 import { BigBedOptions, BigWigOptions } from '../../lib';
 import { TranscriptOptions } from './transcripts';
 import { Rect } from './bigbed/types';
+import { ImportanceTrackAnnotation, ImportanceTrackDataPoint } from './importance/importanceTrack';
+import { Rect as MotifRect } from './motif/types';
+import { MotifOptions } from './motif/motif';
+import { ImportanceOptions } from './importance/importance';
 /**
  * Display modes for tracks
  */
@@ -21,6 +25,7 @@ export declare enum TrackType {
     RULER = "ruler",
     BIGWIG = "bigwig",
     BIGBED = "bigbed",
+    IMPORTANCE = "importance",
     TRANSCRIPT = "transcript",
     BAM = "bam",
     MOTIF = "motif",
@@ -39,7 +44,8 @@ export type BaseTrack = {
     trackMargin: number;
     displayMode: DisplayMode;
     trackType: TrackType;
-    data?: any[];
+    data?: any;
+    loading?: boolean;
     hoverColor?: string;
     error?: string;
     refetch?: LazyQueryExecFunction<any, OperationVariables>;
@@ -75,4 +81,27 @@ export type TranscriptTrackProps = {
     version: TranscriptHumanVersion | TranscriptMouseVersion;
     props?: TranscriptOptions;
 } & BaseTrack;
-export type TrackProps = BigWigTrackProps | BigBedTrackProps | TranscriptTrackProps;
+export type ImportanceTrackProps = {
+    signalURL: string;
+    onSequenceLoaded?: (sequence: string) => void;
+    transform?: string;
+    allowSelection?: boolean;
+    onSelectionEnd?: (coordinates: [number, number], values: ImportanceTrackDataPoint[]) => void;
+    onBaseMousedOver?: (x: ImportanceTrackDataPoint, i: number) => void;
+    onBaseClicked?: (x: ImportanceTrackDataPoint, i: number) => void;
+    onBaseMousedOut?: () => void;
+    svgRef?: React.RefObject<SVGSVGElement>;
+    zeroLineProps?: React.SVGProps<SVGLineElement>;
+    annotations?: ImportanceTrackAnnotation[];
+    props?: ImportanceOptions;
+} & BaseTrack;
+export type MotifTrackProps = {
+    assembly: string;
+    consensusRegex: string;
+    peaksAccession: string;
+    peaks?: MotifRect[];
+    occurences: boolean;
+    rowHeight?: number;
+    props?: MotifOptions;
+} & BaseTrack;
+export type TrackProps = BigWigTrackProps | BigBedTrackProps | TranscriptTrackProps | MotifTrackProps | ImportanceTrackProps;