diff --git a/src/scripts/layout/genome-browser.ts b/src/scripts/layout/genome-browser.ts index 5eb788c134eed5c4a677948845f57c8962316e05..a23b8c6fd005f35231ff01592bb43e65bf77f23c 100644 --- a/src/scripts/layout/genome-browser.ts +++ b/src/scripts/layout/genome-browser.ts @@ -1,4 +1,4 @@ -import { State, GeneData } from "../types"; +import { GenomeBrowserState, GeneData } from "../types"; import { event } from "d3-selection"; import { format as d3Format } from "d3-format"; @@ -12,7 +12,7 @@ const geneColor = scaleOrdinal( schemeSet1 ); export default function genomeBrowserData( - state: State, + state: GenomeBrowserState, brushHandler: any, clickHandler: any ) { diff --git a/src/scripts/main-genome-browser.ts b/src/scripts/main-genome-browser.ts index ebdd5f87a2a07b9bfc14dfbe1c2042c02203e5a5..ab94ed986fab641eb14e330fd6adc351795c4c5b 100644 --- a/src/scripts/main-genome-browser.ts +++ b/src/scripts/main-genome-browser.ts @@ -1,22 +1,12 @@ -import { GeneData, GenomeBrowserData, State } from "./types"; -import { select, event, BaseEvent, ClientPointEvent } from "d3-selection"; -import { scaleOrdinal } from "d3-scale"; +import { GeneData, GenomeBrowserData, GenomeBrowserState } from "./types"; +import { select, event } from "d3-selection"; import GenomeBrowser from "./component/genome-browser"; -import { color } from "d3"; -import { format as d3Format } from "d3-format"; -import { schemeSet1 } from "d3-scale-chromatic"; import genomeBrowserLayout from "./layout/genome-browser"; const width = 1500; const height = 300; const genomeBrowserComponent = GenomeBrowser(); -const geneColor = scaleOrdinal( - // schemeDark2 - // schemeCategory10 - schemeSet1 -); - const geneData: GeneData[] = [ { name: "gene 1", @@ -78,7 +68,7 @@ const geneData: GeneData[] = [ ]; -const state: State = { +const state: GenomeBrowserState = { width: 1500, chromosomeSize: 75000, window: [20000, 26000], @@ -115,24 +105,25 @@ select("#zoom-out").on("click", function () { FUNCTIONS */ function draw() { - // + // Get the data const computedGenomeBrowserData: GenomeBrowserData = genomeBrowserLayout(state, brushHandler, clickHandler); + // Convert the data to DOM objects genomeBrowsers .datum([computedGenomeBrowserData]) .call(genomeBrowserComponent, width, height); } -function clickHandler([begin, end]: [number, number], state: State) { +function clickHandler([begin, end]: [number, number], state: GenomeBrowserState) { const centerGene = (end + begin) / 2; const sizeWindow = state.window[1] - state.window[0]; state.window = [centerGene - sizeWindow / 2, centerGene + sizeWindow / 2]; draw(); } -function brushHandler(scale: any, state: State) { +function brushHandler(scale: any, state: GenomeBrowserState) { if (!event.sourceEvent) return; if (event.selection) { const { selection: [x1, x2] } = event; diff --git a/src/scripts/types.ts b/src/scripts/types.ts index 5735aaeddd34ee5908fe90d45d45b983fb676bba..d5d1cf216c6cc92c8fab941673251f21772949f4 100644 --- a/src/scripts/types.ts +++ b/src/scripts/types.ts @@ -35,7 +35,7 @@ export interface BrushableAxisData extends GenericAxisData { } } -export interface State { +export interface GenomeBrowserState { width: number, chromosomeSize: number, window: [number, number],