Chrom-o-graph

Installation:

• First it is necessary to install the graphics library.
• Clone the library in a separate folder in the same folder as this repository
  • To get something like ./folder/chromograph and ./folder/lib-graphics
• Next install npm install and build the library npm run build
• Now just install the npm dependencies of this repository based on ./package-lock.json

npm install

Development:

npm run dev

Python scripts

• Python scripts present in this repository were the same ones used during the evaluation of the four separate graph-layouting algorithms
• The datasets however, are not part of the repository, as the datasets are too large.

Data Sources

The repository comes with the Papaver and Arabidopsis datasets for showcase of the application.

• CHANGING DATASET: To change visualized dataset - go to the /src/dataConstants.ts file and change the last two lines to a specific dataset eg:

	export const HIC_DATASETS: HiCDataset[] = Papaver
	export const HIC_DATASETS_ANNOTATIONS: BEDAnnotation[][] = Papaver_annot

Changing Visuals:

• Inside /src/getStyle.ts is object defining the visuals
• FILTERING BINS/LINES - Change contact_min_freqency value, all bins/lines with contact smaller than value are filtered, RECOMMENDED for large datasets set value depending on the selectedLevel value
• Adding transparent between non-sequential bins - Change nonSequentialEdgeThreshold value - all lines with contact bigger than will be shown as transparent
• Otherwise most every color or visiblity in the app can be changed from this file, look around if interested - the file defines a structure that is a "style" for each primitive e.g. binAnnotation
• In /src/dataConstants.ts can change the regions/TADs of files by changing the annotations eg:

let Papaver_annot: BEDAnnotation[][] = [
    [
        new BEDAnnotation("Papaver", 0, 2472226818, [])
    ],
    [
        new BEDAnnotation("Papaver_Chr1", 0, 342574472, []),
        new BEDAnnotation("Papaver_Chr2", 342574472, 708183937, []),
        new BEDAnnotation("Papaver_Chr3", 708183937, 1081960553, []),
        new BEDAnnotation("Papaver_Chr4", 1081960553, 1441575871, []),
        new BEDAnnotation("Papaver_Chr5", 1441575871, 1792593526, []),
        new BEDAnnotation("Papaver_Chr6", 1792593526, 2103694979, []),
        new BEDAnnotation("Papaver_Chr7", 2103694979, 2446347364, []),
    ],
    [
        new BEDAnnotation("NEWANNOTATION", 0, 40000000, []),
    ]
]

• each array is a new level of the hierarchy and levels can be extended or shortened as necessary

Controls:

• Panning/Zooming
• Middle mouse button click: Show lens, lens can be zoomed via mouse Wheel
• Space + Left click - add green coloring to hovered bins
• Shift + Left click - remove annotation from hovered bins
• Ctrl + Left click - remove hovered element from visibilty in 2D Graph View, Subgraph View and 3D View
• P - upload tsv file with annotations (name startgenepositions endgeneposition optional:#hexcolor) e.g BRCA1 43044295 43125364 #2791e7
• S - save graph as .png
• D - save hic as .png
• F - save positions as .csv

Recommended IDE Setup

VS Code + Svelte.

Technical considerations

Why use this over SvelteKit?

• It brings its own routing solution which might not be preferable for some users.
• It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.

This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other create-vite templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.

Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.

Why global.d.ts instead of compilerOptions.types inside jsconfig.json or tsconfig.json?

Setting compilerOptions.types shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding svelte and vite/client type information.

Why include .vscode/extensions.json?

Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.

Why enable allowJs in the TS template?

While allowJs: false would indeed prevent the use of .js files in the project, it does not prevent the use of JavaScript syntax in .svelte files. In addition, it would force checkJs: false, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.

Why is HMR not preserving my local component state?

HMR state preservation comes with a number of gotchas! It has been disabled by default in both svelte-hmr and @sveltejs/vite-plugin-svelte due to its often surprising behavior. You can read the details here.

If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.

// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)