@weng-lab/genomebrowser 0.0.3 → 0.0.5

package/README.md

@@ -1,125 +1,125 @@
-# 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,
-  zoomLevel: 148,
-  delta: 0,
-  tracks: []
-});
-```
-
-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:
+# 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,
+  zoomLevel: 148,
+  delta: 0,
+  tracks: []
+});
+```
+
+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](image.png)

package/dist/components/browser/browser.d.ts

@@ -1,9 +1,8 @@
 import { BrowserAction, BrowserState } from '../context/browserContext';
 import { default as React } from 'react';
-declare function GenomeBrowser({ children, browserState, browserDispatch, externalFetch }: {
+declare function GenomeBrowser({ children, browserState, browserDispatch }: {
     children?: React.ReactNode;
     browserState: BrowserState;
     browserDispatch: React.Dispatch<BrowserAction>;
-    externalFetch?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export default GenomeBrowser;

package/dist/components/browser/gqltracks.d.ts

@@ -1,4 +1,5 @@
-import { BrowserAction, BrowserState } from '../context/browserContext';
+import { ReactElement } from 'react';
+import { BrowserState } from '../context/browserContext';
 export type TranscriptRequest = {
     chromosome: string;
     assembly: string;
@@ -6,8 +7,9 @@ export type TranscriptRequest = {
     end: number;
     version: number;
 };
-declare function GQLTracks({ browserState, browserDispatch }: {
+declare function GQLTracks({ children, browserState, rulerHeight }: {
+    children: ReactElement[];
     browserState: BrowserState;
-    browserDispatch: React.Dispatch<BrowserAction>;
-}): null;
+    rulerHeight: number;
+}): import("react/jsx-runtime").JSX.Element;
 export default GQLTracks;

package/dist/components/context/browserContext.d.ts

@@ -10,7 +10,6 @@ export type BrowserState = {
     preRenderedWidth: number;
     width: number;
     zoomLevel: number;
-    delta: number;
     tracks: TrackProps[];
 };
 export declare enum BrowserActionType {
@@ -30,14 +29,9 @@ export declare enum BrowserActionType {
     TRANSLATE_TRACK = "translateTrack",
     SET_RANGE = "setRange",
     UPDATE_PROPS = "updateProps",
-    BRING_TO_TOP = "bringToTop",
-    SET_DELTA = "setDelta"
+    BRING_TO_TOP = "bringToTop"
 }
-export type BrowserAction = SetDomain | AddTrack | UpdateTrack | SetTrackHeight | SetTrackData | SwapTracks | ShiftDomain | SetLoading | ShiftTrack | RemoveTranslation | InsertTrack | DeleteTrack | TranslateTrack | SetRange | UpdateProps | BringToTop | SetDelta;
-export type SetDelta = {
-    type: BrowserActionType.SET_DELTA;
-    delta: number;
-};
+export type BrowserAction = SetDomain | AddTrack | UpdateTrack | SetTrackHeight | SetTrackData | SwapTracks | ShiftDomain | SetLoading | ShiftTrack | RemoveTranslation | InsertTrack | DeleteTrack | TranslateTrack | SetRange | UpdateProps | BringToTop;
 export type SetDomain = {
     type: BrowserActionType.SET_DOMAIN;
     domain: Domain;