10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": false,
4 | "declaration": true,
5 | "allowSyntheticDefaultImports": true,
6 | "noImplicitAny": false,
7 | "allowJs": true,
8 | // Module defines the output module resolution system
9 | "module": "es6",
10 | // Target defines the compiled code targets
11 | "target": "es6",
12 | // Skip type checking all .d.ts files.
13 | "skipLibCheck": true
14 | },
15 | // Define files to be included
16 | "files": ["./index.ts", "./example.ts"],
17 | // Include sources
18 | "include": ["src"],
19 | // Exclude node modules
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "feature-viewer-typescript",
3 | "version": "2.3.20",
4 | "description": "Feature Viewer (Typescript)",
5 | "main": "./dist/index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "build": "webpack --mode=production --node-env=production",
9 | "build:dev": "webpack --mode=development",
10 | "build:prod": "webpack --mode=production --node-env=production",
11 | "prepare": "echo \"Building...\" && npm run build",
12 | "watch": "webpack --watch",
13 | "serve": "webpack serve"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/BioComputingUP/FeatureViewerTypeScript.git"
18 | },
19 | "keywords": [],
20 | "author": "Martina Bevilacqua, Lisanna Paladin and collaborators",
21 | "license": "ISC",
22 | "bugs": {
23 | "url": "https://github.com/BioComputingUP/FeatureViewerTypeScript/issues"
24 | },
25 | "homepage": "https://github.com/BioComputingUP/FeatureViewerTypeScript#readme",
26 | "dependencies": {
27 | "@types/d3-axis": "1.0.12",
28 | "@types/d3-brush": "1.0.6",
29 | "@types/d3-scale": "2.1.1",
30 | "@types/d3-selection": "1.4.1",
31 | "@types/d3-shape": "1.3.1",
32 | "@types/d3-transition": "^1.3.2",
33 | "@types/underscore": "1.8.16",
34 | "d3-axis": "^1.0.12",
35 | "d3-brush": "^1.0.6",
36 | "d3-scale": "2.2.2",
37 | "d3-selection": "1.4.0",
38 | "d3-shape": "1.3.5",
39 | "underscore": "^1.9.1"
40 | },
41 | "devDependencies": {
42 | "@types/node": "^18.7.23",
43 | "@webpack-cli/generators": "^2.5.0",
44 | "css-loader": "^6.7.1",
45 | "html-webpack-plugin": "^5.5.0",
46 | "mini-css-extract-plugin": "^2.6.1",
47 | "prettier": "^2.7.1",
48 | "sass": "^1.55.0",
49 | "sass-loader": "^13.0.2",
50 | "ts-loader": "^9.4.1",
51 | "typescript": "^4.8.4",
52 | "webpack": "^5.74.0",
53 | "webpack-cli": "^4.10.0",
54 | "webpack-dev-server": "^4.9.3"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/helper.ts:
--------------------------------------------------------------------------------
1 |
2 | import {event as currentEvent} from 'd3-selection';
3 |
4 | class ComputingFunctions {
5 |
6 | public commons;
7 |
8 | public rectWidth2 = (d) => {
9 | /*if (d.x === d.y) {
10 | if (this.commons.scaling([d.x + 0.4]) - this.commons.scaling([d.x - 0.4]) < 2) return 2;
11 | else return this.commons.scaling([d.x + 0.4]) - this.commons.scaling([d.x - 0.4]);
12 | }*/
13 | return (this.commons.scaling([d.y + 0.4])- this.commons.scaling([d.x - 0.4]));
14 | };
15 |
16 | public rectX = (object) => {
17 | /*if (object.x === object.y) {
18 | return this.commons.scaling([object.x - 0.4]);
19 | }*/
20 | let scale = this.commons.scaling([object.x - 0.4]);
21 | //if (scale<0) {scale = 0};
22 | return scale
23 | };
24 |
25 | protected displaySequence(seq) {
26 | return this.commons.viewerOptions.width / seq > 5;
27 | }
28 |
29 | protected gradientColor(stringContent) {
30 | let percent = Number(stringContent);
31 | //value from 0 to 100
32 | //let hue = ((1 - percent) * 120).toString(10);
33 | let hue;
34 | if (percent === 0) {
35 | hue = '#ffffff'
36 | } else if (percent > 0 && percent <= 15) {
37 | hue = '#d2d2f8'
38 | } else if (percent > 15 && percent < 50) {
39 | hue = '#a6a6f1'
40 | } else if (percent >= 50 && percent < 100) {
41 | hue = '#7a7aeb'
42 | } else if (percent === 100) {
43 | hue = '#4e4ee4'
44 | }
45 | return hue;
46 | //return ["hsl(", hue, ",100%,50%)"].join("");
47 | };
48 |
49 | protected forcePropagation(item) {
50 | item.on('mousedown', () => {
51 | let new_click_event = new Event('mousedown');
52 | new_click_event['pageX'] = currentEvent.layerX;
53 | new_click_event['clientX'] = currentEvent.clientX;
54 | new_click_event['pageY'] = currentEvent.layerY;
55 | new_click_event['clientY'] = currentEvent.clientY;
56 | });
57 | }
58 |
59 | constructor(commons: {}) {
60 | this.commons = commons;
61 | }
62 | }
63 |
64 | export default ComputingFunctions
65 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Generated using webpack-cli https://github.com/webpack/webpack-cli
2 | // Dependencies
3 | const path = require("path");
4 | // Plugins
5 | const HtmlWebpackPlugin = require("html-webpack-plugin");
6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
7 | // Define whether current environment is production or not
8 | const isProduction = process.env.NODE_ENV === "production";
9 | // Main configuration options
10 | const config = {
11 | // Entry point for the app
12 | entry: {
13 | 'index': { import: './index.ts' },
14 | 'example': { import: './example.ts', dependOn: 'index' },
15 | },
16 | // Define output file and directory
17 | output: {
18 | // Define output file name
19 | filename: "[name].js",
20 | // Define output directory
21 | path: path.resolve(__dirname, "dist"),
22 | // Define a library (Universal Module Definition)
23 | library: "feature-viewer-typescript",
24 | libraryTarget: "umd",
25 | umdNamedDefine: true,
26 | // Clean the output directory before emit.
27 | clean: true,
28 | },
29 | // Live development server
30 | devServer: {
31 | open: true,
32 | host: "localhost",
33 | },
34 | plugins: [
35 | new HtmlWebpackPlugin({
36 | template: "example.html",
37 | }),
38 | new MiniCssExtractPlugin(),
39 | // Add your plugins here
40 | // Learn more about plugins from https://webpack.js.org/configuration/plugins/
41 | ],
42 | module: {
43 | rules: [
44 | {
45 | test: /\.(ts|tsx)$/i,
46 | loader: "ts-loader",
47 | exclude: /node_modules/,
48 | },
49 | {
50 | test: /\.s[ac]ss$/i,
51 | use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
52 | // use: ["css-loader", "sass-loader"],
53 | },
54 | {
55 | test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
56 | type: "asset",
57 | },
58 | // Add your rules for custom modules here
59 | // Learn more about loaders from https://webpack.js.org/loaders/
60 | ],
61 | },
62 | resolve: {
63 | extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
64 | },
65 | };
66 | // Export actual module
67 | module.exports = () => {
68 | if (isProduction) {
69 | config.mode = "production";
70 | } else {
71 | config.mode = "development";
72 | }
73 | return config;
74 | };
75 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | ## Getting started
4 |
5 | Before you begin:
6 | - Check out the [existing issues](https://github.com/BioComputingUP/feature-viewer-typescript/issues).
7 |
8 | ### Don't see your issue? Open one
9 |
10 | If you spot something new, open an issue. We'll use the issue to have a conversation about the problem you want to fix.
11 |
12 | ### Ready to make a change? Fork the repo
13 |
14 | Fork using GitHub Desktop:
15 |
16 | - [Getting started with GitHub Desktop](https://docs.github.com/en/desktop/installing-and-configuring-github-desktop/getting-started-with-github-desktop) will guide you through setting up Desktop.
17 | - Once Desktop is set up, you can use it to [fork the repo](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/cloning-and-forking-repositories-from-github-desktop)!
18 |
19 | Fork using the command line:
20 |
21 | - [Fork the repo](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo#fork-an-example-repository) so that you can make your changes without affecting the original project until you're ready to merge them.
22 |
23 | Fork with [GitHub Codespaces](https://github.com/features/codespaces):
24 |
25 | - [Fork, edit, and preview](https://docs.github.com/en/free-pro-team@latest/github/developing-online-with-codespaces/creating-a-codespace) using [GitHub Codespaces](https://github.com/features/codespaces) without having to install and run the project locally.
26 |
27 | ### Make your update:
28 | Make your changes to the file(s) you'd like to update. Here are some tips and tricks for [using the docs codebase](#working-in-the-githubdocs-repository).
29 | - Are you making changes to the application code? You'll need **Node.js lts/dubnium** to run the library locally.
30 |
31 | ### Open a pull request
32 | When you're done making changes and you'd like to propose them for review, open your pull request (PR).
33 |
34 | ### Submit your PR & get it reviewed
35 | - Once you submit your PR, we will review it with you. The first thing you're going to want to do is a [self review](#self-review).
36 | - After that, we may have questions, check back on your PR to keep up with the conversation.
37 |
38 | ### Your PR is merged!
39 | Congratulations! The whole GitHub community thanks you. :sparkles:
40 | Once your PR is merged, you will be proudly listed as a contributor in the [contributor chart](https://github.com/BioComputingUP/feature-viewer-typescript/graphs/contributors).
41 |
--------------------------------------------------------------------------------
/src/styles/styles.scss:
--------------------------------------------------------------------------------
1 |
2 | @keyframes loadingcolorflag {
3 | 50% {fill: grey }
4 | }
5 |
6 | // non-svg objects in svg
7 | foreignObject > body {
8 | overflow: visible;
9 | }
10 |
11 | // header
12 | .helperButton {
13 | width: 20px;
14 | height: 20px;
15 | }
16 | .helperButton path {
17 | fill: rgba(39, 37, 37, 0.71);
18 | }
19 |
20 | // brush selection
21 | .selectionRect {
22 | fill: rgba(0,0,0,0.15);
23 | fill-opacity: .5;
24 | }
25 | .brush .selection{
26 | stroke: #fff;
27 | fill: #4682b4;
28 | fill-opacity: .125;
29 | shape-rendering: crispEdges;
30 | display: block;
31 | height: 100%;
32 | }
33 |
34 | // fv buttons
35 | .mybutton {
36 | -moz-border-radius: 10px;
37 | -webkit-border-radius: 10px;
38 | border-radius: 10px; /* future proofing */
39 | -khtml-border-radius: 10px; /* for old Konqueror browsers */
40 | background: darkgrey;
41 | border: none;
42 | color: rgb(0,0,0);
43 | height: 30px;
44 | min-width: 36px;
45 | outline: none;
46 | text-decoration: none;
47 | text-align: center;
48 | line-height: 24px;
49 | vertical-align: middle;
50 | overflow: visible !important;
51 | }
52 | .mybuttonsquare {
53 | border-radius: 0px;
54 | font-size: 12px;
55 | height: 30px;
56 | cursor: default;
57 | margin: auto;
58 | min-width: 30px;
59 | width:70px;
60 | font-family:'Roboto';
61 | font-size:10px;
62 | background: white;
63 | box-shadow: 0 2px 3px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
64 | line-height: normal
65 | }
66 | .mybuttoncircle {
67 | border-radius: 50%;
68 | font-size: 12px;
69 | height: 36px;
70 | width: 36px;
71 | cursor: pointer;
72 | background: white;
73 | line-height: normal
74 | }
75 | // fv axis
76 | .axis {
77 | font: 14px sans-serif;
78 | }
79 | // fv flags
80 | .Arrow {
81 | fill-opacity: 0.6;
82 | }
83 | // fv tooltips
84 | .fvtooltip {
85 | position: absolute;
86 | text-align: center;
87 | color: white;
88 | width: auto;
89 | height: auto;
90 | padding: 2px;
91 | font-family: "Arial", sans-serif;
92 | font-size: 10px;
93 | font-weight: normal;
94 | background-color:rgba(0, 0, 0, 0.7);
95 | border: 0px;
96 | border-radius: 4px;
97 | pointer-events: none;
98 |
99 | }
100 |
101 | // fv custom tooltips
102 | .fvcustomtooltip {
103 | position: absolute;
104 | text-align: center;
105 | color: white;
106 | height: auto;
107 | background-color:rgba(0, 0, 0, 0.7);
108 | pointer-events: none;
109 |
110 | }
111 |
112 |
113 | // loading
114 | .pageoverlay {
115 | position: fixed; /* Sit on top of the page content */
116 | width: 100%; /* Full width (cover the whole page) */
117 | height: 100%; /* Full height (cover the whole page) */
118 | top: 0;
119 | left: 0;
120 | right: 0;
121 | bottom: 0;
122 | background-color: rgba(0,0,0,0.3); /* Black background with opacity */
123 | z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
124 | cursor: pointer; /* Add a pointer on hover */
125 | }
126 |
--------------------------------------------------------------------------------
/src/interfaces.ts:
--------------------------------------------------------------------------------
1 |
2 | export interface UserOptions {
3 | offset?: {
4 | start: number,
5 | end: number
6 | },
7 | breakpoint?: number,
8 | showAxis?: boolean,
9 | showSequence?: boolean,
10 | showSequenceLabel?: boolean,
11 | brushActive?: boolean,
12 | toolbar?: boolean,
13 | toolbarPosition?: string,
14 | zoomMax?: number,
15 | showSubFeatures?: boolean,
16 | flagColor?: string,
17 | flagTrack?: number | string | boolean,
18 | flagTrackMobile?: number | string | boolean,
19 | sideBar?: number | string | boolean,
20 | animation?: boolean,
21 | unit?: string,
22 | backgroundcolor?: string,
23 | maxDepth?: number
24 | }
25 |
26 | export interface ViewerOptions {
27 | showSequence: boolean,
28 | showSequenceLabel?: boolean,
29 | brushActive: boolean,
30 | verticalLine: boolean,
31 | dottedSequence: boolean,
32 | offset?: {
33 | start: number,
34 | end: number
35 | },
36 | tooltipColor: string,
37 | showHelper: boolean,
38 | flagColor: string,
39 | showSubFeatures: boolean,
40 | sideBar: boolean,
41 | labelTrackWidth: number,
42 | labelTrackWidthMobile: number,
43 | tagsTrackWidth: number,
44 | maxDepth?: number,
45 | margin: {
46 | top: number,
47 | bottom: number,
48 | left: number,
49 | right: number
50 | },
51 | backup: {
52 | labelTrackWidth: number,
53 | tagsTrackWidth: number,
54 | features: any
55 | },
56 | width: number,
57 | height: number,
58 | zoomMax: number,
59 | mobileMode: boolean,
60 | unit: string,
61 | animation: boolean,
62 | toolbar: boolean,
63 | toolbarPosition?: string,
64 | bubbleHelp: boolean,
65 | showAxis: boolean,
66 | positionWithoutLetter: number,
67 | drawLadder: boolean,
68 | ladderWidth: number,
69 | ladderHeight: number,
70 | ladderSpacing: number,
71 | labelSidebarWidth?: number
72 | }
73 |
74 | export interface FeaturesList extends Array{}
75 |
76 | export interface FeatureObject {
77 | id: string,
78 | type: string // "rect" | "path" | "curve" | "unique" | "circle" | "sequence" | "lollipop",
79 | data: Array | string,
80 | parentId?: any,
81 | label?: string,
82 | className?: string,
83 | height?: number,
84 | yLim?: number,
85 | color?: string,
86 | stroke?: string,
87 | opacity?: number,
88 | tooltip?: string,
89 | sidebar?: Array,
90 | isOpen?: boolean,
91 | flagLevel?: number,
92 | subfeatures?: Array
93 | }
94 |
95 | export interface FeatureData {
96 | x: number,
97 | y?: any,
98 | label?: string,
99 | className?: string,
100 | color?: string,
101 | stroke?: string,
102 | opacity?: number,
103 | tooltip?: string
104 | }
105 |
106 | export interface SideBarObject {
107 | id: string,
108 | tooltip?: string, // or html
109 | content?: string,
110 | type?: string,
111 | width?: number,
112 | label?: string | number
113 | }
114 |
115 | export interface FeatureViewerLogger {
116 | debug(primaryMessage: string, ...supportingData: any[]): void;
117 | warn(primaryMessage: string, ...supportingData: any[]): void;
118 | error(primaryMessage: string, ...supportingData: any[]): void;
119 | info(primaryMessage: string, ...supportingData: any[]): void;
120 | }
121 |
122 | export class FeatureViewerLog implements FeatureViewerLogger {
123 |
124 | public debug(msg: string, ...supportingDetails): void {
125 | this.emitLogMessage("debug", msg, supportingDetails)
126 | }
127 |
128 | public info(msg: string, ...supportingDetails): void {
129 | this.emitLogMessage("info", msg, supportingDetails)
130 | }
131 |
132 | public warn(msg: string, ...supportingDetails): void {
133 | this.emitLogMessage("warn", msg, supportingDetails)
134 | }
135 |
136 | public error(msg: string, ...supportingDetails): void {
137 | this.emitLogMessage("error", msg, supportingDetails)
138 | }
139 |
140 | private emitLogMessage(msgType:"debug"|"info"|"warn"|"error", msg:string, supportingDetails:any[]){
141 | if(supportingDetails.length > 0) {
142 | console[msgType](msg, supportingDetails);
143 | } else {
144 | console[msgType](msg);
145 | }
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/src/commons.ts:
--------------------------------------------------------------------------------
1 | import { FeatureObject, ViewerOptions, FeaturesList, FeatureData, FeatureViewerLog } from './interfaces';
2 |
3 | // let commons: Commons;
4 |
5 | type MyType = {};
6 |
7 | class Commons {
8 | public fvLength: number;
9 | public events = {
10 | FEATURE_SELECTED_EVENT: "feature-viewer-position-selected",
11 | CLEAR_SELECTION_EVENT: "feature-viewer-clear-selection",
12 | FLAG_SELECTED_EVENT: "feature-viewer-flag-selected",
13 | FLAG_SELECTED_INTERRUPTED_EVENT: "feature-viewer-flag-interrupted-event",
14 | TAG_SELECTED_EVENT: "feature-viewer-button-selected",
15 | ZOOM_EVENT: "feature-viewer-zoom-altered",
16 | ANIMATIONS_FALSE_EVENT: "feature-viewer-animations-off"
17 | };
18 | public viewerOptions: ViewerOptions = {
19 | showSequence: true,
20 | showSequenceLabel: true,
21 | brushActive: false,
22 | verticalLine: false,
23 | dottedSequence: true,
24 | showHelper: false,
25 | flagColor: "#DFD5D3",
26 | tooltipColor: '#fff',
27 | showSubFeatures: true,
28 | sideBar: true,
29 | labelTrackWidth: 0,
30 | labelTrackWidthMobile: 0,
31 | tagsTrackWidth: 0,
32 | mobileMode: false,
33 | margin: {
34 | top: 10,
35 | bottom: 20,
36 | left: 0,
37 | right: 0
38 | },
39 | backup: {
40 | labelTrackWidth: 0,
41 | tagsTrackWidth: 0,
42 | features: []
43 | },
44 | width: null,
45 | height: null,
46 | zoomMax: 10,
47 | unit: null,
48 | maxDepth: 3,
49 | animation: true,
50 | toolbar: true,
51 | bubbleHelp: true,
52 | showAxis: true,
53 | positionWithoutLetter: null,
54 | drawLadder: true,
55 | ladderWidth: 15,
56 | ladderSpacing: 10,
57 | ladderHeight: 18,
58 | };
59 | public mobilesize = 951;
60 | public radius = 5;
61 | public flagsHeight = 18;
62 | public maxNumberOfButtons = 0;
63 | public features: FeaturesList;
64 | public yData: any;
65 | public seqShift = 1;
66 | public scalingPosition: any;
67 | public lineYScale: any;
68 | public featureSelected: any;
69 | public flagSelected = [];
70 | public animation = true;
71 | public trigger: any;
72 | public level = 0;
73 | public svgElement: any;
74 | public svg: any;
75 | public svgContainer: any;
76 | public tagsContainer: any;
77 | public tooltipDiv: any;
78 | public customTooltipDiv: any;
79 | public divId: string;
80 | public right_chevron: any;
81 | public down_chevron: any;
82 | public yAxisSVG: any;
83 | public yAxisSVGGroup: any;
84 | public xAxis: any;
85 | public line: any;
86 | public lineBond: any;
87 | public brush: any;
88 | public extent: any;
89 | public pathLevel = 0;
90 | public step: number = 30; // or 20
91 | public elementHeight: number = Math.floor(this.step / 2); // or 1.5 if step is 20
92 | public YPosition: number = this.step;
93 | public scaling: any;
94 | public lineGen: any;
95 | public headMargin: number;
96 | public stringSequence : string;
97 | public calculatedTransitions: any={}
98 | public d3helper: any={};
99 | public style: any;
100 | public logger: any;
101 | public backgroundcolor: string;
102 | public currentposition: number;
103 | public currentzoom: number;
104 |
105 | private _current_extend = null;
106 |
107 | public get current_extend() {
108 | let extend = this._current_extend;
109 | this._current_extend = null;
110 | return extend || {
111 | length: this.viewerOptions.offset.end - this.viewerOptions.offset.start,
112 | start: this.viewerOptions.offset.start,
113 | end: this.viewerOptions.offset.end
114 | }
115 | };
116 |
117 | public set current_extend(current_extend) {
118 | this._current_extend = current_extend;
119 | }
120 |
121 | /*constructor() {
122 | if (!commons) {
123 | commons = this;
124 | }
125 | return commons
126 | }*/
127 | constructor() {
128 | }
129 | }
130 |
131 | export default Commons;
132 |
--------------------------------------------------------------------------------
/src/calculate.ts:
--------------------------------------------------------------------------------
1 | import Commons from './commons';
2 | import {FeaturesList} from "./interfaces";
3 | import * as _ from "underscore";
4 |
5 | const commons = new Commons();
6 |
7 | class Calculate {
8 |
9 | public commons;
10 |
11 | private uniq(a) {
12 | return a.sort().filter(function(item, pos, ary) {
13 | return !pos || item != ary[pos - 1];
14 | })
15 | };
16 |
17 | private orderBy(values: any[], orderType: any) {
18 | return values.sort((a, b) => {
19 | if (a[orderType] < b[orderType]) {
20 | return -1;
21 | }
22 | if (a[orderType] > b[orderType]) {
23 | return 1;
24 | }
25 | return 0
26 | });
27 | }
28 |
29 | public yxPoints(d) {
30 | this.commons.flagsHeight = 18;
31 | let h = d.y + this.commons.flagsHeight;
32 | let htail = d.y + (this.commons.flagsHeight / 2)
33 | let w = (this.commons.viewerOptions.margin.left - 15) - (20 * (d.flagLevel-1));
34 | let wtail = (this.commons.viewerOptions.margin.left - 7) - (20 * (d.flagLevel-1));
35 | let poligon = [5, (d.y - 3), (5), (h), (w), (h), (wtail), (htail), (w), (d.y - 3)].join(',')
36 | return poligon;
37 | //return "5,57,5,78,25,78,33,69,25,57";
38 | };
39 |
40 | public getTransf(el) {
41 | return [el.transform.baseVal.getItem(0).matrix.e, el.transform.baseVal.getItem(0).matrix.f]
42 | };
43 |
44 | public getMarginLeft() {
45 | let flagwidht = this.commons.yAxisSVG.select(".flagBackground").node()
46 | let marginleft = (flagwidht).getBoundingClientRect().width;
47 | return marginleft
48 | }
49 |
50 | public addNLines(array) {
51 |
52 | let dataLevels = [];
53 |
54 | // sort array
55 | array = this.orderBy(array, 'x');
56 | array.forEach((d) => {
57 |
58 | // init
59 | if (dataLevels.length === 0) {
60 |
61 | dataLevels[0] = [d];
62 | d.level = 0;
63 |
64 | } else {
65 |
66 | let pulled = false;
67 | for (let lv in dataLevels) {
68 | // check superimposition, compare with last
69 | let last = dataLevels[lv].length - 1;
70 | if (d.x > dataLevels[lv][last].y) {
71 | // same level
72 | dataLevels[lv].push(d);
73 | d.level = lv;
74 | pulled = true;
75 | break;
76 | }
77 | }
78 | if (!pulled) {
79 | let newlv = dataLevels.length
80 | dataLevels[newlv] = [d];
81 | d.level = newlv;
82 | };
83 |
84 | }
85 |
86 | });
87 | return dataLevels.length;
88 | }
89 |
90 | public getHeightRect(level) {
91 | return (level-1) * 20 + 15;
92 | };
93 |
94 | public searchTree(element, matchingId){
95 | if (element.id == matchingId) {
96 | return element;
97 | } else if (element.subfeatures) {
98 | var i;
99 | var result = null;
100 | for (i = 0; result == null && i < element.subfeatures.length; i++) {
101 | result = this.searchTree(element.subfeatures[i], matchingId);
102 | }
103 | return result;
104 | }
105 | return null;
106 | }
107 |
108 | public unflatten = function( array: FeaturesList, parent=null, processedIds=null, tree=null ){
109 |
110 | tree = tree !== null ? tree : [];
111 | parent = parent !== null ? parent : { id: 0 };
112 | processedIds = processedIds !== null ? processedIds : new Set();
113 |
114 | var children = _.filter( array, (child) => {
115 | if (child.parentId === undefined) {
116 | child.parentId = 0
117 | }
118 | if (child.parentId === parent.id) {
119 | processedIds.add(child.id)
120 | }
121 | return child.parentId == parent.id;
122 | });
123 |
124 | if( !_.isEmpty( children ) ){
125 | if( parent.id == 0 ){
126 | tree = children;
127 | }else{
128 | parent['subfeatures'] = children
129 | }
130 | _.each( children, ( child ) => { this.unflatten( array, child, processedIds ) } );
131 | }
132 |
133 | let res = {
134 | tree:tree,
135 | ids:processedIds
136 | }
137 |
138 | return res;
139 | }
140 |
141 | public flatten(features, flatted=[], parent=null) {
142 | for (let i in features) {
143 | let ft = features[i];
144 | if (!parent) { ft.parent = []; } else {
145 | if (ft.parent) {ft.parent.concat(parent)} else {ft.parent = parent}
146 | }
147 | flatted.push(ft);
148 | if (ft.subfeatures) {
149 | this.flatten(ft.subfeatures, flatted=flatted, parent=ft.parent.concat(ft.id))
150 | }
151 | }
152 | return flatted
153 | }
154 |
155 | public displaySequence (seq) {
156 | // checks if dotted sequence or letters
157 | return this.commons.viewerOptions.width / seq > 8; // regulate sequence letter distance
158 | };
159 |
160 | public updateSVGHeight(position) {
161 | this.commons.svg.attr("height", position + 60 + "px");
162 | this.commons.svg.select("clipPath rect").attr("height", position + 60 + "px");
163 | };
164 |
165 | constructor(commons: {}) {
166 | this.commons = commons;
167 | }
168 | }
169 |
170 | export default Calculate
171 |
--------------------------------------------------------------------------------
/src/transition.ts:
--------------------------------------------------------------------------------
1 | import ComputingFunctions from './helper';
2 |
3 | export class SubfeaturesTransition extends ComputingFunctions {
4 |
5 | public area(gElement, newY) {
6 | gElement
7 | .attr("transform", "translate(0," + newY +")")
8 | .transition().duration(500);
9 | }
10 | public position(gElement, parentElementRow) {
11 | gElement
12 | .attr("position", "element(#"+ parentElementRow +")");
13 | }
14 | public Xaxis(axis, newY) {
15 | axis
16 | .attr("transform", "translate(0," + newY +")")
17 | .transition().duration(500);
18 | }
19 | public containerH(container, newH) {
20 | container
21 | .attr("height", newH)
22 | }
23 |
24 | constructor(commons: {}) {
25 | super(commons);
26 | }
27 | }
28 |
29 | export class Transition extends ComputingFunctions {
30 |
31 | public basalLine(object) {
32 |
33 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
34 | container.selectAll(".line")
35 | .attr("d", this.commons.line);
36 |
37 | }
38 |
39 | public rectangle(object) {
40 |
41 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
42 | // line does not require transition
43 |
44 | let transit1, transit2;
45 | // group selection
46 | transit1 = container.selectAll("." + "rectfv" + "Group")
47 | transit2 = container.selectAll("." + "rectfv")
48 | // transition
49 | if (this.commons.animation) {
50 | transit1
51 | .transition()
52 | .duration(500);
53 | transit2
54 | .transition()
55 | .duration(500);
56 | }
57 | // transition
58 | transit1.attr("transform", (d) => {
59 | return "translate(" + this.rectX(d) + ",0)"
60 | });
61 | transit2
62 | .attr("width", this.rectWidth2);
63 |
64 | // transition to text
65 | container.selectAll("." + object.className + "Text")
66 | .attr("transform", (d) => {
67 | if (d.label && this.commons.scaling(d['x'])<0) {
68 | return "translate(" + -this.rectX(d) + ",0)"
69 | }
70 | })
71 | .style("visibility", (d) => {
72 | if (d.label && this.commons.scaling(d['x'])>0) {
73 | return (this.commons.scaling(d.y) - this.commons.scaling(d['x'])) > d.label.length * 8 && object.height > 11 ? "visible" : "hidden";
74 | } else return "hidden";
75 | });
76 | }
77 |
78 | public multiRec(object) {
79 |
80 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
81 | container.selectAll("." + "rectfv")
82 | .attr("x", (d) => {
83 | return this.commons.scaling(d['x'])
84 | })
85 | .attr("width", (d) => {
86 | return this.commons.scaling(d.y) - this.commons.scaling(d['x'])
87 | });
88 |
89 | }
90 |
91 | public unique(object) {
92 |
93 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
94 | // line does not require transition
95 |
96 | let transit;
97 | if (this.commons.animation) {
98 | transit = container.selectAll(".element")
99 | .transition()
100 | .duration(500);
101 | }
102 | else {
103 | transit = container.selectAll(".element");
104 | }
105 | transit
106 | .attr("x", (d) => {
107 | return this.commons.scaling(d['x'] - 0.4)
108 | })
109 | .attr("width", (d) => {
110 | if (this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4) < 2) return 2;
111 | else return this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4);
112 | });
113 |
114 | }
115 |
116 | public lollipop(object) {
117 |
118 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
119 | // line does not require transition
120 |
121 | let transit1, transit2;
122 | if (this.commons.animation) {
123 | transit1 = container.selectAll(".element")
124 | .transition()
125 | .duration(500);
126 | transit2 = container.selectAll(".lineElement")
127 | .transition()
128 | .duration(500);
129 | }
130 | else {
131 | transit1 = container.selectAll(".element");
132 | transit2 = container.selectAll(".lineElement");
133 | }
134 | transit1
135 | .attr("cx", (d) => {
136 | return this.commons.scaling(d.x)
137 | });
138 | transit2
139 | .attr("x1", (d) => {
140 | return this.commons.scaling(d.x)
141 | })
142 | .attr("x2", (d) => {
143 | return this.commons.scaling(d.x)
144 | })
145 | // .attr("y2", (d) => {
146 | // let w = this.commons.scaling(d.x + 0.4) - this.commons.scaling(d.x - 0.4);
147 | // if (this.commons.scaling(d.x + 0.4) - this.commons.scaling(d.x - 0.4) < 2) w = 2;
148 | // return w + 4;
149 | // });
150 |
151 | }
152 |
153 | public circle(object) {
154 |
155 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
156 | // line does not require transition
157 |
158 | let transit;
159 | if (this.commons.animation) {
160 | transit = container.selectAll(".element")
161 | .transition()
162 | .duration(500);
163 | }
164 | else {
165 | transit = container.selectAll(".element");
166 | }
167 | transit
168 | .attr("cx", (d) => {
169 | return this.commons.scaling(d['x'])
170 | })
171 | .attr("width", (d) => {
172 | if (this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4) < 2) return 2;
173 | else return this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4);
174 | });
175 |
176 | }
177 |
178 | public path(object) {
179 |
180 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
181 | container.selectAll(".line")
182 | .attr("d", this.commons.lineBond.x((d) => {
183 | return this.commons.scaling(d['x']);
184 | })
185 | .y( (d) => {
186 | return -d['y'] * 10 + object.height;
187 | })
188 | );
189 | let transit;
190 | if (this.commons.animation) {
191 | transit = container.selectAll("." + "pathfv")
192 | .transition()
193 | .duration(0);
194 | }
195 | else {
196 | transit = container.selectAll("." + "pathfv");
197 | }
198 | transit
199 | .attr("d", this.commons.lineBond.y((d) => {
200 | return -1 * d['y'] * 10 + object.height;
201 | }));
202 | }
203 |
204 | public lineTransition(object) {
205 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
206 | const yScores = object.data.map(o => o.y);
207 | const maxScore = Math.max(...yScores);
208 | const minScore = Math.min(...yScores);
209 | // keep height
210 | this.commons.lineYScale.domain([minScore, maxScore]).range([0, this.commons.step/11]);
211 | container.selectAll(".line " + object.className)
212 | .attr("d", (d) => {
213 | return this.commons.lineYScale(-d.y) * 10 + object.shift
214 | });
215 |
216 | // transit line
217 | let transit;
218 | if (this.commons.animation) {
219 | transit = container.selectAll("." + object.className)
220 | .transition()
221 | .duration(0);
222 | }
223 | else {
224 | transit = container.selectAll("." + object.className);
225 | }
226 |
227 | transit
228 | .attr("d", this.commons.lineGen.y((d) => {
229 | return this.commons.lineYScale(-d.y) * 10 + object.shift;
230 | })
231 | );
232 | }
233 |
234 | public text(object, start) {
235 |
236 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
237 | let transit;
238 | if (this.commons.animation) {
239 | transit = container.selectAll("." + object.className)
240 | .transition()
241 | .duration(500);
242 | }
243 | else {
244 | transit = container.selectAll("." + object.className);
245 | }
246 | transit
247 | .attr("x", (d, i) => {
248 | return this.commons.scaling(i + start)
249 | });
250 | }
251 |
252 | constructor(commons: {}) {
253 | super(commons);
254 | }
255 | };
256 |
--------------------------------------------------------------------------------
/example.ts:
--------------------------------------------------------------------------------
1 | // Import feature viewer
2 | import {FeatureViewer} from "./src/feature-viewer";
3 |
4 | // Import styles
5 | import './example.scss';
6 |
7 | // TODO Wait for page to load
8 | window.onload = () => {
9 | // Define sequence
10 | let sequence = "MDPGQQPPPQPAPQGQGQPPSQPPQGQGPPSGPGQPAPAATQAAPQAPPAGHQIVHVRGDSETDLEALFNAVMNPKTANVPQTVPMRLRKLPDSF" +
11 | "FKPPEPKSHSRQASTDAGTAGALTPQHVRAHSSPASLQLGAVSPGTLTPTGVVSGPAATPTAQHLRQSSFEIPDDVPLPAGWEMAKTSSGQRYFL" +
12 | "NHIDQTTTWQDPRKAMLSQMNVTAPTSPPVQQNMMNSASGPLPDGWEQAMTQDGEIYYINHKNKTTSWLDPRLDPRFAMNQRISQSAPVKQPPPL" +
13 | "APQSPQGGVMGGSNSNQQQQMRLQQLQMEKERLRLKQQELLRQAMRNINPSTANSPKCQELALRSQLPTLEQDGGTQNPVSSPGMSQELRTMTTN" +
14 | "SSDPFLNSGTYHSRDESTDSGLSMSSYSVPRTPDDFLNSVDEMDTGDTINQSTLPSQQNRFPDYLEAIPGTNVDLGTLEGDGMNIEGEELMPSLQ" +
15 | "EALSSDILNDMESVLAATKLDKESFLTWL";
16 | // Instantiate feature viewer
17 | let featureViewer = new FeatureViewer(sequence, '#feature-viewer',
18 | // Define optional settings
19 | {
20 | toolbar: true,
21 | toolbarPosition: 'left',
22 | brushActive: true,
23 | zoomMax: 10,
24 | flagColor: 'white',
25 | flagTrack: 170,
26 | flagTrackMobile: 150
27 | },
28 | // Define optional features
29 | [
30 | {
31 | type: 'curve',
32 | id: 'Curve1',
33 | label: 'Random values',
34 | color: 'red',
35 | data: Array.from(new Array(sequence.length), (x, i) => ({x: i + 1, y: Math.random()})),
36 | subfeatures: [
37 | {
38 | type: 'curve',
39 | id: 'Curve2',
40 | label: 'Random values',
41 | color: 'blue',
42 | height: 1,
43 | data: Array.from(new Array(sequence.length), (x, i) => ({x: i + 1, y: Math.random() /2 }))
44 | }
45 | ]
46 | },
47 | {
48 | type: 'rect',
49 | id: 'Degrons',
50 | label: 'Degrons',
51 | color:'grey',
52 | data: [{"x": 186, "y": 194, "color": "#006dc4", "tooltip": "186-194 xRxxLxx[LIVM]x", "stroke": "black"}, {"x": 348, "y": 356, "color": "#006dc4", "tooltip": "348-356 xRxxLxx[LIVM]x", "stroke": "black"}, {"x": 1, "y": 2, "color": "#c90076", "tooltip": "1-2 Mx", "stroke": "black"}, {"x": 1, "y": 3, "color": "#c90076", "tooltip": "1-3 M{0,1}([ED])x", "stroke": "black"}, {"x": 399, "y": 405, "color": "#006dc4", "tooltip": "399-405 D(S)Gx{2,3}([ST])", "stroke": "black"}, {"x": 180, "y": 184, "color": "#006dc4", "tooltip": "180-184 [AVP]x[ST][ST][ST]", "stroke": "black"}, {"x": 399, "y": 403, "color": "#006dc4", "tooltip": "399-403 DSGLS", "stroke": "black"}],
53 | },
54 | {
55 | type: 'rect',
56 | id: 'IDRs',
57 | label: 'IDRs',
58 | data: [{"x": 1, "y": 58, "color": "#9e7398", "stroke": "black"}, {"x": 60, "y": 61, "color": "#9e7398", "stroke": "black"}, {"x": 75, "y": 82, "color": "#9e7398", "stroke": "black"}, {"x": 101, "y": 170, "color": "#9e7398", "stroke": "black"}, {"x": 206, "y": 230, "color": "#9e7398", "stroke": "black"}, {"x": 264, "y": 300, "color": "#9e7398", "stroke": "black"}, {"x": 330, "y": 504, "color": "#9e7398", "stroke": "black"}],
59 | color:'grey'
60 | },
61 | {
62 | type: 'rect',
63 | id: 'Coils',
64 | label: 'Coils',
65 | data: [{"x": 1, "y": 49, "color": "#e3b9e5", "stroke": "black"}, {"x": 52, "y": 58, "color": "#e3b9e5", "stroke": "black"}, {"x": 74, "y": 74, "color": "#e3b9e5", "stroke": "black"}, {"x": 78, "y": 85, "color": "#e3b9e5", "stroke": "black"}, {"x": 91, "y": 92, "color": "#e3b9e5", "stroke": "black"}, {"x": 98, "y": 108, "color": "#e3b9e5", "stroke": "black"}, {"x": 110, "y": 168, "color": "#e3b9e5", "stroke": "black"}, {"x": 172, "y": 174, "color": "#e3b9e5", "stroke": "black"}, {"x": 182, "y": 182, "color": "#e3b9e5", "stroke": "black"}, {"x": 185, "y": 186, "color": "#e3b9e5", "stroke": "black"}, {"x": 201, "y": 201, "color": "#e3b9e5", "stroke": "black"}, {"x": 212, "y": 213, "color": "#e3b9e5", "stroke": "black"}, {"x": 215, "y": 220, "color": "#e3b9e5", "stroke": "black"}, {"x": 223, "y": 224, "color": "#e3b9e5", "stroke": "black"}, {"x": 226, "y": 228, "color": "#e3b9e5", "stroke": "black"}, {"x": 231, "y": 233, "color": "#e3b9e5", "stroke": "black"}, {"x": 241, "y": 241, "color": "#e3b9e5", "stroke": "black"}, {"x": 245, "y": 245, "color": "#e3b9e5", "stroke": "black"}, {"x": 260, "y": 260, "color": "#e3b9e5", "stroke": "black"}, {"x": 276, "y": 297, "color": "#e3b9e5", "stroke": "black"}, {"x": 334, "y": 334, "color": "#e3b9e5", "stroke": "black"}, {"x": 340, "y": 340, "color": "#e3b9e5", "stroke": "black"}, {"x": 353, "y": 383, "color": "#e3b9e5", "stroke": "black"}, {"x": 386, "y": 415, "color": "#e3b9e5", "stroke": "black"}, {"x": 417, "y": 418, "color": "#e3b9e5", "stroke": "black"}, {"x": 420, "y": 443, "color": "#e3b9e5", "stroke": "black"}, {"x": 447, "y": 474, "color": "#e3b9e5", "stroke": "black"}, {"x": 494, "y": 494, "color": "#e3b9e5", "stroke": "black"}, {"x": 496, "y": 496, "color": "#e3b9e5", "stroke": "black"}, {"x": 503, "y": 504, "color": "#e3b9e5", "stroke": "black"}],
66 | color:'grey'
67 | },
68 | {
69 | type: 'rect',
70 | id: 'Buried',
71 | label: 'Buried residues',
72 | data: [{"x": 166, "y": 166, "color": "#D3D3D3", "stroke": "black"}, {"x": 179, "y": 179, "color": "#D3D3D3", "stroke": "black"}, {"x": 188, "y": 188, "color": "#D3D3D3", "stroke": "black"}, {"x": 190, "y": 190, "color": "#D3D3D3", "stroke": "black"}, {"x": 200, "y": 202, "color": "#D3D3D3", "stroke": "black"}, {"x": 232, "y": 232, "color": "#D3D3D3", "stroke": "black"}, {"x": 235, "y": 236, "color": "#D3D3D3", "stroke": "black"}, {"x": 238, "y": 238, "color": "#D3D3D3", "stroke": "black"}, {"x": 247, "y": 249, "color": "#D3D3D3", "stroke": "black"}, {"x": 259, "y": 261, "color": "#D3D3D3", "stroke": "black"}],
73 | color:'grey'
74 | },
75 | {
76 | type: 'lollipop',
77 | id: 'Ubiquitination',
78 | label: 'Ubiquitination',
79 | color:'grey',
80 | data: [{"x": 497, "y": 497, "color": "#ffe800", "tooltip": "497K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 181, "y": 181, "color": "#ffe800", "tooltip": "181K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 102, "y": 102, "color": "#ffe800", "tooltip": "102K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 97, "y": 97, "color": "#ffe800", "tooltip": "97K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 90, "y": 90, "color": "#ffe800", "tooltip": "90K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 280, "y": 280, "color": "#ffe800", "tooltip": "280K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 315, "y": 315, "color": "#ffe800", "tooltip": "315K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 321, "y": 321, "color": "#ffe800", "tooltip": "321K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 342, "y": 342, "color": "#ffe800", "tooltip": "342K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}, {"x": 254, "y": 254, "color": "#ffe800", "tooltip": "254K Ubiquitination(PhosphoSitePlus)", "stroke": "black"}],
81 | },
82 | {
83 | type: 'lollipop',
84 | id: 'Phosphorylation',
85 | label: 'Phosphorylation',
86 | color:'grey',
87 | data: [{"x": 473, "y": 473, "color": "#ffba01", "tooltip": "473S Phosphorylation(iPTMNet)", "stroke": "black"}, {"x": 405, "y": 405, "color": "#ffba01", "tooltip": "405S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 407, "y": 407, "color": "#ffba01", "tooltip": "407Y Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 109, "y": 109, "color": "#ffba01", "tooltip": "109S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 419, "y": 419, "color": "#ffba01", "tooltip": "419S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 436, "y": 436, "color": "#ffba01", "tooltip": "436S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 499, "y": 499, "color": "#ffba01", "tooltip": "499S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 412, "y": 412, "color": "#ffba01", "tooltip": "412T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 403, "y": 403, "color": "#ffba01", "tooltip": "403S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 366, "y": 366, "color": "#ffba01", "tooltip": "366S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 398, "y": 398, "color": "#ffba01", "tooltip": "398T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 164, "y": 164, "color": "#ffba01", "tooltip": "164S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 188, "y": 188, "color": "#ffba01", "tooltip": "188Y Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 217, "y": 217, "color": "#ffba01", "tooltip": "217S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 227, "y": 227, "color": "#ffba01", "tooltip": "227S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 105, "y": 105, "color": "#ffba01", "tooltip": "105S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 274, "y": 274, "color": "#ffba01", "tooltip": "274S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 103, "y": 103, "color": "#ffba01", "tooltip": "103S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 163, "y": 163, "color": "#ffba01", "tooltip": "163S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 276, "y": 276, "color": "#ffba01", "tooltip": "276S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 300, "y": 300, "color": "#ffba01", "tooltip": "300S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 340, "y": 340, "color": "#ffba01", "tooltip": "340S Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 400, "y": 400, "color": "#ffba01", "tooltip": "400S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 94, "y": 94, "color": "#ffba01", "tooltip": "94S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 83, "y": 83, "color": "#ffba01", "tooltip": "83T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 354, "y": 354, "color": "#ffba01", "tooltip": "354T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 361, "y": 361, "color": "#ffba01", "tooltip": "361T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 77, "y": 77, "color": "#ffba01", "tooltip": "77T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 289, "y": 289, "color": "#ffba01", "tooltip": "289S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 63, "y": 63, "color": "#ffba01", "tooltip": "63T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 156, "y": 156, "color": "#ffba01", "tooltip": "156T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 110, "y": 110, "color": "#ffba01", "tooltip": "110T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 131, "y": 131, "color": "#ffba01", "tooltip": "131S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 141, "y": 141, "color": "#ffba01", "tooltip": "141T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 143, "y": 143, "color": "#ffba01", "tooltip": "143T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 128, "y": 128, "color": "#ffba01", "tooltip": "128S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 127, "y": 127, "color": "#ffba01", "tooltip": "127S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 119, "y": 119, "color": "#ffba01", "tooltip": "119T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 114, "y": 114, "color": "#ffba01", "tooltip": "114T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 149, "y": 149, "color": "#ffba01", "tooltip": "149S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 154, "y": 154, "color": "#ffba01", "tooltip": "154T Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 145, "y": 145, "color": "#ffba01", "tooltip": "145T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 138, "y": 138, "color": "#ffba01", "tooltip": "138S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 41, "y": 41, "color": "#ffba01", "tooltip": "41T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 367, "y": 367, "color": "#ffba01", "tooltip": "367S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 381, "y": 381, "color": "#ffba01", "tooltip": "381S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 382, "y": 382, "color": "#ffba01", "tooltip": "382S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 371, "y": 371, "color": "#ffba01", "tooltip": "371S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 61, "y": 61, "color": "#ffba01", "tooltip": "61S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 390, "y": 390, "color": "#ffba01", "tooltip": "390T Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 391, "y": 391, "color": "#ffba01", "tooltip": "391Y Phosphorylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 397, "y": 397, "color": "#ffba01", "tooltip": "397S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}, {"x": 388, "y": 388, "color": "#ffba01", "tooltip": "388S Phosphorylation(PhosphoSitePlus/iPTMNet)", "stroke": "black"}],
88 | },
89 | {
90 | type: 'lollipop',
91 | id: 'Other',
92 | label: 'Other PTMs',
93 | color:'grey',
94 | data: [{"x": 109, "y": 109, "color": "#F4B5C7", "tooltip": "109S O-glycosylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 241, "y": 241, "color": "#F4B5C7", "tooltip": "241T O-glycosylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 497, "y": 497, "color": "#FF6961", "tooltip": "497K Methylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 494, "y": 494, "color": "#FF6961", "tooltip": "494K Methylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 97, "y": 97, "color": "#e83484", "tooltip": "97K Sumoylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 280, "y": 280, "color": "#86CBED", "tooltip": "280K Sumoylation(PhosphoSitePlus)", "stroke": "black"}, {"x": 315, "y": 315, "color": "#A7E99C", "tooltip": "315K Acetylation(PhosphoSitePlus)", "stroke": "black"}],
95 | },
96 | {
97 | type: 'circle',
98 | id: 'Missense',
99 | label: 'Missense mutations',
100 | color:'grey',
101 | data: [{"x": 132, "y": 0.1, "color": "#00008b", "tooltip": "L132R", "stroke": "black"}, {"x": 180, "y": 0.1, "color": "#00008b", "tooltip": "A180T", "stroke": "black"}, {"x": 354, "y": 0.1, "color": "#00008b", "tooltip": "T354A", "stroke": "black"}, {"x": 456, "y": 0.1, "color": "#00008b", "tooltip": "G456E", "stroke": "black"}, {"x": 119, "y": 0.1, "color": "#00008b", "tooltip": "T119S", "stroke": "black"}, {"x": 133, "y": 0.1, "color": "#00008b", "tooltip": "Q133H", "stroke": "black"}, {"x": 501, "y": 0.1, "color": "#00008b", "tooltip": "L501I", "stroke": "black"}, {"x": 209, "y": 0.2, "color": "#00008b", "tooltip": "Q209L Q209H", "stroke": "black"}, {"x": 390, "y": 0.1, "color": "#00008b", "tooltip": "T390I", "stroke": "black"}, {"x": 436, "y": 0.1, "color": "#00008b", "tooltip": "S436T", "stroke": "black"}, {"x": 383, "y": 0.2, "color": "#00008b", "tooltip": "D383H D383G", "stroke": "black"}, {"x": 279, "y": 0.1, "color": "#00008b", "tooltip": "V279L", "stroke": "black"}, {"x": 127, "y": 0.1, "color": "#00008b", "tooltip": "S127F", "stroke": "black"}, {"x": 396, "y": 0.1, "color": "#00008b", "tooltip": "E396K", "stroke": "black"}, {"x": 478, "y": 0.1, "color": "#00008b", "tooltip": "L478F", "stroke": "black"}, {"x": 459, "y": 0.1, "color": "#00008b", "tooltip": "E459K", "stroke": "black"}, {"x": 399, "y": 0.2, "color": "#00008b", "tooltip": "D399G D399H", "stroke": "black"}, {"x": 488, "y": 0.1, "color": "#00008b", "tooltip": "S488Y", "stroke": "black"}, {"x": 124, "y": 0.2, "color": "#00008b", "tooltip": "R124P R124Q", "stroke": "black"}, {"x": 371, "y": 0.1, "color": "#00008b", "tooltip": "S371F", "stroke": "black"}, {"x": 145, "y": 0.1, "color": "#00008b", "tooltip": "T145S", "stroke": "black"}, {"x": 106, "y": 0.1, "color": "#00008b", "tooltip": "R106G", "stroke": "black"}, {"x": 225, "y": 0.1, "color": "#00008b", "tooltip": "M225I", "stroke": "black"}, {"x": 151, "y": 0.1, "color": "#00008b", "tooltip": "P151A", "stroke": "black"}, {"x": 61, "y": 0.1, "color": "#00008b", "tooltip": "S61W", "stroke": "black"}, {"x": 231, "y": 0.1, "color": "#00008b", "tooltip": "P231S", "stroke": "black"}, {"x": 367, "y": 0.1, "color": "#00008b", "tooltip": "S367F", "stroke": "black"}, {"x": 429, "y": 0.1, "color": "#00008b", "tooltip": "I429L", "stroke": "black"}, {"x": 167, "y": 0.1, "color": "#00008b", "tooltip": "I167T", "stroke": "black"}, {"x": 306, "y": 0.1, "color": "#00008b", "tooltip": "M306I", "stroke": "black"}, {"x": 427, "y": 0.1, "color": "#00008b", "tooltip": "D427H", "stroke": "black"}, {"x": 210, "y": 0.1, "color": "#00008b", "tooltip": "M210I", "stroke": "black"}, {"x": 73, "y": 0.1, "color": "#00008b", "tooltip": "M73I", "stroke": "black"}, {"x": 460, "y": 0.1, "color": "#00008b", "tooltip": "G460E", "stroke": "black"}, {"x": 481, "y": 0.1, "color": "#00008b", "tooltip": "D481H", "stroke": "black"}, {"x": 234, "y": 0.1, "color": "#00008b", "tooltip": "D234H", "stroke": "black"}, {"x": 319, "y": 0.1, "color": "#00008b", "tooltip": "R319Q", "stroke": "black"}, {"x": 162, "y": 0.1, "color": "#00008b", "tooltip": "Q162R", "stroke": "black"}, {"x": 125, "y": 0.1, "color": "#00008b", "tooltip": "A125G", "stroke": "black"}, {"x": 266, "y": 0.1, "color": "#00008b", "tooltip": "R266C", "stroke": "black"}, {"x": 166, "y": 0.1, "color": "#00008b", "tooltip": "E166G", "stroke": "black"}, {"x": 246, "y": 0.1, "color": "#00008b", "tooltip": "I246M", "stroke": "black"}],
102 | },
103 | ]);
104 | };
105 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015, SIB Swiss Institute of Bioinformatics
2 |
3 | This program is free software; you can redistribute it and/or modify it under
4 | the terms of the GNU General Public License as published by the Free Software Foundation;
5 | either version 2 of the License, or (at your option) any later version.
6 |
7 |
8 | GNU GENERAL PUBLIC LICENSE
9 | Version 2, June 1991
10 |
11 |
12 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
13 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
14 | Everyone is permitted to copy and distribute verbatim copies
15 | of this license document, but changing it is not allowed.
16 |
17 | Preamble
18 |
19 | The licenses for most software are designed to take away your
20 | freedom to share and change it. By contrast, the GNU General Public
21 | License is intended to guarantee your freedom to share and change free
22 | software--to make sure the software is free for all its users. This
23 | General Public License applies to most of the Free Software
24 | Foundation's software and to any other program whose authors commit to
25 | using it. (Some other Free Software Foundation software is covered by
26 | the GNU Lesser General Public License instead.) You can apply it to
27 | your programs, too.
28 |
29 | When we speak of free software, we are referring to freedom, not
30 | price. Our General Public Licenses are designed to make sure that you
31 | have the freedom to distribute copies of free software (and charge for
32 | this service if you wish), that you receive source code or can get it
33 | if you want it, that you can change the software or use pieces of it
34 | in new free programs; and that you know you can do these things.
35 |
36 | To protect your rights, we need to make restrictions that forbid
37 | anyone to deny you these rights or to ask you to surrender the rights.
38 | These restrictions translate to certain responsibilities for you if you
39 | distribute copies of the software, or if you modify it.
40 |
41 | For example, if you distribute copies of such a program, whether
42 | gratis or for a fee, you must give the recipients all the rights that
43 | you have. You must make sure that they, too, receive or can get the
44 | source code. And you must show them these terms so they know their
45 | rights.
46 |
47 | We protect your rights with two steps: (1) copyright the software, and
48 | (2) offer you this license which gives you legal permission to copy,
49 | distribute and/or modify the software.
50 |
51 | Also, for each author's protection and ours, we want to make certain
52 | that everyone understands that there is no warranty for this free
53 | software. If the software is modified by someone else and passed on, we
54 | want its recipients to know that what they have is not the original, so
55 | that any problems introduced by others will not reflect on the original
56 | authors' reputations.
57 |
58 | Finally, any free program is threatened constantly by software
59 | patents. We wish to avoid the danger that redistributors of a free
60 | program will individually obtain patent licenses, in effect making the
61 | program proprietary. To prevent this, we have made it clear that any
62 | patent must be licensed for everyone's free use or not licensed at all.
63 |
64 | The precise terms and conditions for copying, distribution and
65 | modification follow.
66 |
67 | GNU GENERAL PUBLIC LICENSE
68 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
69 |
70 | 0. This License applies to any program or other work which contains
71 | a notice placed by the copyright holder saying it may be distributed
72 | under the terms of this General Public License. The "Program", below,
73 | refers to any such program or work, and a "work based on the Program"
74 | means either the Program or any derivative work under copyright law:
75 | that is to say, a work containing the Program or a portion of it,
76 | either verbatim or with modifications and/or translated into another
77 | language. (Hereinafter, translation is included without limitation in
78 | the term "modification".) Each licensee is addressed as "you".
79 |
80 | Activities other than copying, distribution and modification are not
81 | covered by this License; they are outside its scope. The act of
82 | running the Program is not restricted, and the output from the Program
83 | is covered only if its contents constitute a work based on the
84 | Program (independent of having been made by running the Program).
85 | Whether that is true depends on what the Program does.
86 |
87 | 1. You may copy and distribute verbatim copies of the Program's
88 | source code as you receive it, in any medium, provided that you
89 | conspicuously and appropriately publish on each copy an appropriate
90 | copyright notice and disclaimer of warranty; keep intact all the
91 | notices that refer to this License and to the absence of any warranty;
92 | and give any other recipients of the Program a copy of this License
93 | along with the Program.
94 |
95 | You may charge a fee for the physical act of transferring a copy, and
96 | you may at your option offer warranty protection in exchange for a fee.
97 |
98 | 2. You may modify your copy or copies of the Program or any portion
99 | of it, thus forming a work based on the Program, and copy and
100 | distribute such modifications or work under the terms of Section 1
101 | above, provided that you also meet all of these conditions:
102 |
103 | a) You must cause the modified files to carry prominent notices
104 | stating that you changed the files and the date of any change.
105 |
106 | b) You must cause any work that you distribute or publish, that in
107 | whole or in part contains or is derived from the Program or any
108 | part thereof, to be licensed as a whole at no charge to all third
109 | parties under the terms of this License.
110 |
111 | c) If the modified program normally reads commands interactively
112 | when run, you must cause it, when started running for such
113 | interactive use in the most ordinary way, to print or display an
114 | announcement including an appropriate copyright notice and a
115 | notice that there is no warranty (or else, saying that you provide
116 | a warranty) and that users may redistribute the program under
117 | these conditions, and telling the user how to view a copy of this
118 | License. (Exception: if the Program itself is interactive but
119 | does not normally print such an announcement, your work based on
120 | the Program is not required to print an announcement.)
121 |
122 | These requirements apply to the modified work as a whole. If
123 | identifiable sections of that work are not derived from the Program,
124 | and can be reasonably considered independent and separate works in
125 | themselves, then this License, and its terms, do not apply to those
126 | sections when you distribute them as separate works. But when you
127 | distribute the same sections as part of a whole which is a work based
128 | on the Program, the distribution of the whole must be on the terms of
129 | this License, whose permissions for other licensees extend to the
130 | entire whole, and thus to each and every part regardless of who wrote it.
131 |
132 | Thus, it is not the intent of this section to claim rights or contest
133 | your rights to work written entirely by you; rather, the intent is to
134 | exercise the right to control the distribution of derivative or
135 | collective works based on the Program.
136 |
137 | In addition, mere aggregation of another work not based on the Program
138 | with the Program (or with a work based on the Program) on a volume of
139 | a storage or distribution medium does not bring the other work under
140 | the scope of this License.
141 |
142 | 3. You may copy and distribute the Program (or a work based on it,
143 | under Section 2) in object code or executable form under the terms of
144 | Sections 1 and 2 above provided that you also do one of the following:
145 |
146 | a) Accompany it with the complete corresponding machine-readable
147 | source code, which must be distributed under the terms of Sections
148 | 1 and 2 above on a medium customarily used for software interchange; or,
149 |
150 | b) Accompany it with a written offer, valid for at least three
151 | years, to give any third party, for a charge no more than your
152 | cost of physically performing source distribution, a complete
153 | machine-readable copy of the corresponding source code, to be
154 | distributed under the terms of Sections 1 and 2 above on a medium
155 | customarily used for software interchange; or,
156 |
157 | c) Accompany it with the information you received as to the offer
158 | to distribute corresponding source code. (This alternative is
159 | allowed only for noncommercial distribution and only if you
160 | received the program in object code or executable form with such
161 | an offer, in accord with Subsection b above.)
162 |
163 | The source code for a work means the preferred form of the work for
164 | making modifications to it. For an executable work, complete source
165 | code means all the source code for all modules it contains, plus any
166 | associated interface definition files, plus the scripts used to
167 | control compilation and installation of the executable. However, as a
168 | special exception, the source code distributed need not include
169 | anything that is normally distributed (in either source or binary
170 | form) with the major components (compiler, kernel, and so on) of the
171 | operating system on which the executable runs, unless that component
172 | itself accompanies the executable.
173 |
174 | If distribution of executable or object code is made by offering
175 | access to copy from a designated place, then offering equivalent
176 | access to copy the source code from the same place counts as
177 | distribution of the source code, even though third parties are not
178 | compelled to copy the source along with the object code.
179 |
180 | 4. You may not copy, modify, sublicense, or distribute the Program
181 | except as expressly provided under this License. Any attempt
182 | otherwise to copy, modify, sublicense or distribute the Program is
183 | void, and will automatically terminate your rights under this License.
184 | However, parties who have received copies, or rights, from you under
185 | this License will not have their licenses terminated so long as such
186 | parties remain in full compliance.
187 |
188 | 5. You are not required to accept this License, since you have not
189 | signed it. However, nothing else grants you permission to modify or
190 | distribute the Program or its derivative works. These actions are
191 | prohibited by law if you do not accept this License. Therefore, by
192 | modifying or distributing the Program (or any work based on the
193 | Program), you indicate your acceptance of this License to do so, and
194 | all its terms and conditions for copying, distributing or modifying
195 | the Program or works based on it.
196 |
197 | 6. Each time you redistribute the Program (or any work based on the
198 | Program), the recipient automatically receives a license from the
199 | original licensor to copy, distribute or modify the Program subject to
200 | these terms and conditions. You may not impose any further
201 | restrictions on the recipients' exercise of the rights granted herein.
202 | You are not responsible for enforcing compliance by third parties to
203 | this License.
204 |
205 | 7. If, as a consequence of a court judgment or allegation of patent
206 | infringement or for any other reason (not limited to patent issues),
207 | conditions are imposed on you (whether by court order, agreement or
208 | otherwise) that contradict the conditions of this License, they do not
209 | excuse you from the conditions of this License. If you cannot
210 | distribute so as to satisfy simultaneously your obligations under this
211 | License and any other pertinent obligations, then as a consequence you
212 | may not distribute the Program at all. For example, if a patent
213 | license would not permit royalty-free redistribution of the Program by
214 | all those who receive copies directly or indirectly through you, then
215 | the only way you could satisfy both it and this License would be to
216 | refrain entirely from distribution of the Program.
217 |
218 | If any portion of this section is held invalid or unenforceable under
219 | any particular circumstance, the balance of the section is intended to
220 | apply and the section as a whole is intended to apply in other
221 | circumstances.
222 |
223 | It is not the purpose of this section to induce you to infringe any
224 | patents or other property right claims or to contest validity of any
225 | such claims; this section has the sole purpose of protecting the
226 | integrity of the free software distribution system, which is
227 | implemented by public license practices. Many people have made
228 | generous contributions to the wide range of software distributed
229 | through that system in reliance on consistent application of that
230 | system; it is up to the author/donor to decide if he or she is willing
231 | to distribute software through any other system and a licensee cannot
232 | impose that choice.
233 |
234 | This section is intended to make thoroughly clear what is believed to
235 | be a consequence of the rest of this License.
236 |
237 | 8. If the distribution and/or use of the Program is restricted in
238 | certain countries either by patents or by copyrighted interfaces, the
239 | original copyright holder who places the Program under this License
240 | may add an explicit geographical distribution limitation excluding
241 | those countries, so that distribution is permitted only in or among
242 | countries not thus excluded. In such case, this License incorporates
243 | the limitation as if written in the body of this License.
244 |
245 | 9. The Free Software Foundation may publish revised and/or new versions
246 | of the General Public License from time to time. Such new versions will
247 | be similar in spirit to the present version, but may differ in detail to
248 | address new problems or concerns.
249 |
250 | Each version is given a distinguishing version number. If the Program
251 | specifies a version number of this License which applies to it and "any
252 | later version", you have the option of following the terms and conditions
253 | either of that version or of any later version published by the Free
254 | Software Foundation. If the Program does not specify a version number of
255 | this License, you may choose any version ever published by the Free Software
256 | Foundation.
257 |
258 | 10. If you wish to incorporate parts of the Program into other free
259 | programs whose distribution conditions are different, write to the author
260 | to ask for permission. For software which is copyrighted by the Free
261 | Software Foundation, write to the Free Software Foundation; we sometimes
262 | make exceptions for this. Our decision will be guided by the two goals
263 | of preserving the free status of all derivatives of our free software and
264 | of promoting the sharing and reuse of software generally.
265 |
266 | NO WARRANTY
267 |
268 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
269 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
270 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
271 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
272 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
273 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
274 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
275 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
276 | REPAIR OR CORRECTION.
277 |
278 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
279 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
280 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
281 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
282 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
283 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
284 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
285 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
286 | POSSIBILITY OF SUCH DAMAGES.
287 |
288 | END OF TERMS AND CONDITIONS
289 |
290 | How to Apply These Terms to Your New Programs
291 |
292 | If you develop a new program, and you want it to be of the greatest
293 | possible use to the public, the best way to achieve this is to make it
294 | free software which everyone can redistribute and change under these terms.
295 |
296 | To do so, attach the following notices to the program. It is safest
297 | to attach them to the start of each source file to most effectively
298 | convey the exclusion of warranty; and each file should have at least
299 | the "copyright" line and a pointer to where the full notice is found.
300 |
301 | {description}
302 | Copyright (C) {year} {fullname}
303 |
304 | This program is free software; you can redistribute it and/or modify
305 | it under the terms of the GNU General Public License as published by
306 | the Free Software Foundation; either version 2 of the License, or
307 | (at your option) any later version.
308 |
309 | This program is distributed in the hope that it will be useful,
310 | but WITHOUT ANY WARRANTY; without even the implied warranty of
311 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
312 | GNU General Public License for more details.
313 |
314 | You should have received a copy of the GNU General Public License along
315 | with this program; if not, write to the Free Software Foundation, Inc.,
316 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
317 |
318 | Also add information on how to contact you by electronic and paper mail.
319 |
320 | If the program is interactive, make it output a short notice like this
321 | when it starts in an interactive mode:
322 |
323 | Gnomovision version 69, Copyright (C) year name of author
324 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
325 | This is free software, and you are welcome to redistribute it
326 | under certain conditions; type `show c' for details.
327 |
328 | The hypothetical commands `show w' and `show c' should show the appropriate
329 | parts of the General Public License. Of course, the commands you use may
330 | be called something other than `show w' and `show c'; they could even be
331 | mouse-clicks or menu items--whatever suits your program.
332 |
333 | You should also get your employer (if you work as a programmer) or your
334 | school, if any, to sign a "copyright disclaimer" for the program, if
335 | necessary. Here is a sample; alter the names:
336 |
337 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program
338 | `Gnomovision' (which makes passes at compilers) written by James Hacker.
339 |
340 | {signature of Ty Coon}, 1 April 1989
341 | Ty Coon, President of Vice
342 |
343 | This General Public License does not permit incorporating your program into
344 | proprietary programs. If your program is a subroutine library, you may
345 | consider it more useful to permit linking proprietary applications with the
346 | library. If this is what you want to do, use the GNU Lesser General
347 | Public License instead of this License.
348 |
--------------------------------------------------------------------------------
/src/tooltip.ts:
--------------------------------------------------------------------------------
1 |
2 | import Calculate from "./calculate";
3 | import * as d3 from './custom-d3';
4 |
5 | class Tool extends Calculate {
6 |
7 | private calculate: Calculate;
8 |
9 | public colorSelectedFeat(feat, object, divId) {
10 | // remove previous selected features
11 | if (this.commons.featureSelected) {
12 | d3.select(`#${divId}`).select(`#${this.commons.featureSelected}`).style("fill-opacity", "0.6");
13 | }
14 | // color selected rectangle
15 | if (object.type !== "path" && object.type !== "curve" && feat) {
16 |
17 | this.commons.featureSelected = feat;
18 | let thisfeat = d3.select(`#${divId}`).select(`#${feat}`);
19 | thisfeat.style("fill-opacity", "1");
20 |
21 | if (object.type !== 'unique') {
22 | // color the background
23 | let currentContainer = this.commons.svgContainer.node().getBoundingClientRect();
24 |
25 | let selectRect;
26 | d3.select(`#${divId}`).selectAll(".selectionRect").remove();
27 | selectRect = this.commons.svgContainer
28 | .select(".brush")
29 | .append("rect")
30 | .attr("class", "selectionRect box-shadow")
31 | // add shadow?
32 | .attr("height", currentContainer.height)
33 | let thisy = this.getTransf((thisfeat.node()).parentElement)[0];
34 | let myd3node = thisfeat.node();
35 | let bcr = (myd3node).getBoundingClientRect().width;
36 | selectRect
37 | .style("display", "block") // remove display none
38 | .attr("width", bcr) // - shift from the beginning
39 | .attr("transform", () => {
40 | return "translate(" + thisy + ",0)"
41 | })
42 | }
43 | }
44 | };
45 |
46 | public colorSelectedCoordinates(start, end, divId) {
47 |
48 | }
49 |
50 | private updateLineTooltip(mouse, pD, scalingFunction, labelTrackWidth) {
51 | let xP = mouse - labelTrackWidth;
52 | let elemHover = "";
53 | for (let l = 1; l < pD.length; l++) {
54 | let scalingFirst = scalingFunction(pD[l - 1].x);
55 | let scalingSecond = scalingFunction(pD[l].x);
56 | let halfway = (scalingSecond-scalingFirst)/2;
57 | if (scalingFirst+halfway < xP && scalingSecond+halfway > xP) {
58 | elemHover = pD[l];
59 | break;
60 | }
61 | }
62 | return elemHover;
63 | };
64 |
65 | private clickTagFunction(d) {
66 | // trigger tag_selected event: buttons clicked
67 | if (CustomEvent) {
68 | let event = new CustomEvent(this.commons.events.TAG_SELECTED_EVENT, {
69 | detail: d
70 | });
71 | this.commons.svgElement.dispatchEvent(event);
72 | } else {
73 | console.warn("CustomEvent is not defined....");
74 | }
75 | if (this.commons.trigger) this.commons.trigger(this.commons.events.TAG_SELECTED_EVENT, event);
76 | };
77 |
78 | public initTooltip(div, divId) {
79 |
80 | let getMessage = (thing, type='default') => {
81 |
82 | // first line
83 | let tooltip_message = '';
84 |
85 | // case of flags
86 | if (thing.hasOwnProperty('title')) {
87 | tooltip_message += '