Skip to content

Commit d62a345

Browse files
author
martina
committed
change name
0 parents  commit d62a345

31 files changed

Lines changed: 3629 additions & 0 deletions

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea/
2+
node_modules/
3+
/dist/lib

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
src
2+
tsconfig.json

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
lts/erbium

‎LICENSE‎

Lines changed: 340 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# TypeScript Sequence Viewer
2+
3+
Represent biological data with the sequence viewer library! Used in [MobiDB](http://mobidb.bio.unipd.it/),
4+
[DisProt](http://www.disprot.org/) and [RepeatsDB](http://repeatsdb.bio.unipd.it/).
5+
6+
This is a code repository for the BioComputingUP Sequence Viewer project.
7+
Full documentation is available at: [sequence-viewer-typescript](https://biocomputingup.github.io/sequence-viewer-documentation/).
8+
9+
This version is based on [Typescript](https://www.typescriptlang.org/) and compatible with [Angular 2+](https://angular.io/) framework.
10+
A Javascript version of the package is also available (see the documentation at [sequence-viewer-typescript](https://biocomputingup.github.io/sequence-viewer-documentation/) for more info).
11+
12+
[comment]: <> (demo image)
13+
[comment]: <> (![Sequence Viewer]&#40;https://github.com/mb925/sequence-viewer-typescript/blob/master/src/assets/sqvDemo.png&#41;)
14+
15+
## Getting started
16+
17+
### Javascript installation
18+
1. Download the sequence viewer stylesheet
19+
You can find the <i>sqv.css</i> file in the src/assets folder on this Github repo.
20+
21+
2. Download the library code
22+
You can find the <i>sqv-bundle.js</i> file in the dist folder on this Github repo.
23+
24+
3. In your index.html:
25+
``` html
26+
<head>
27+
<link rel="stylesheet" type="text/css" href="sqv.css">
28+
</head>
29+
<body>
30+
31+
32+
<div id="sqv"></div>
33+
34+
<script src="sqv-bundle.js"></script>
35+
<script>
36+
37+
const seqs = [
38+
{sequence: 'MVLSPADKVGAH--RMFLSFPTTKTYF--LS', id: 1, label: 'sp|P69905|HBA_HUMAN'}
39+
];
40+
// Create an instance of the sequence viewer in javascript
41+
const sequenceviewer = new SequenceViewer('sqv');
42+
sequenceviewer.draw(sequence);
43+
44+
</script>
45+
46+
</body>
47+
```
48+
### Angular installation
49+
50+
1 Install the library using npm
51+
```
52+
npm install sequence-viewer-typescript
53+
```
54+
55+
2 Import the sequence viewer in javascript or your angular component
56+
```typescript
57+
import {SequenceViewer} from 'sequence-viewer-typescript/dist';
58+
```
59+
60+
3 Load the feature viewer stylesheet in your angular.json "styles".
61+
```json
62+
styles: [
63+
"./node_modules/sequence-viewer-typescript/dist/assets/sqv.css"
64+
]
65+
```
66+
67+
4 Place the sequence viewer in your html
68+
```html
69+
<div id="sqv"></div>
70+
```
71+
72+
5 Create an instance of the sequence viewer in your component, add inputs and execute
73+
```typescript
74+
const seqs = [
75+
{sequence: 'MVLSPADKTNVGAH--RMFLSFPTTKTYF--LSHGG', id: 1, label: 'sp|P69905|HBA_HUMAN'}
76+
];
77+
const sequenceviewer = new SequenceViewer('sqv');
78+
sequenceviewer.draw(sequence);
79+
```
80+
81+
82+
## Compiler
83+
84+
This package ECMAScript target version is: es2015.
85+
86+
## Dependencies
87+
88+
* [Typescript](https://www.typescriptlang.org/)
89+
90+
91+
## Development
92+
93+
`git clone https://github.com/BioComputingUP/sequence-viewer-typescript.git`
94+
95+
`npm install` (will install the development dependencies)
96+
97+
...make your changes and modifications...
98+
99+
`npm run build` (will create the bundle js files)
100+
101+
`npm run postbuild` (will move assets files in dist/)
102+
103+
`npm run wp` (will create the sqv-bundle.js file in dist/)
104+
105+
`npm run post wp` (will edit the bundle file to make it work)
106+
107+
This commands can be found in package.json
108+
109+
## Support
110+
111+
If you have any problem or suggestion please open an issue.
112+
113+
## License
114+
115+
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public
116+
License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later
117+
version.

‎dist/assets/.gitkeep‎

Whitespace-only changes.

‎dist/assets/sqv.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.root{
2+
font-family: monospace, monospace;
3+
}
4+
5+
.container {
6+
margin-left: 0;
7+
}
8+
9+
.cnk {
10+
position: relative;
11+
white-space: nowrap;
12+
display: inline-block;
13+
vertical-align: top;
14+
margin-bottom: 10px;
15+
}
16+
.idx {
17+
position: relative;
18+
display: inline-block;
19+
vertical-align: top;
20+
-moz-user-select: none;
21+
-ms-user-select: none;
22+
-webkit-user-select: none;
23+
-webkit-touch-callout: none;
24+
}
25+
26+
.hidden {
27+
display: none;
28+
}
29+
30+
.lblContainer {
31+
margin-right: 10px;
32+
direction: rtl;
33+
}
34+
35+
.lbl-hidden {
36+
padding-left: 2px;
37+
padding-right: 5px;
38+
-webkit-user-select: none;
39+
display:block;
40+
height:1em;
41+
line-height:1em;
42+
margin-bottom: 1.5em;
43+
font-style: italic;
44+
justify-content: flex-end;
45+
flex-direction: column;
46+
margin-left: 10px;
47+
}
48+
49+
.lbl {
50+
font-size: 0.6em;
51+
}
52+
53+
.cell{
54+
margin-bottom: 1.5em;
55+
height: 1em;
56+
display: inline-block;
57+
}
58+
59+
.highlight {
60+
background-color: #EBD270!important;;
61+
}
62+
63+
/* 'card' name is not available because used by bootstrap */
64+
.crd {
65+
position: relative;
66+
display: inline-block;
67+
}
68+
69+
.crds {
70+
display: inline-block;
71+
-webkit-user-select: none;
72+
}
73+
74+
.tooltipText {
75+
visibility: hidden;
76+
position: absolute;
77+
z-index: 1;
78+
}
79+
80+
.lbl:hover .tooltipText {
81+
visibility: visible;
82+
}

‎dist/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { SequenceViewer } from './lib/sequence.viewer';

‎dist/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
Object.defineProperty(exports, "__esModule", { value: true });
3+
exports.SequenceViewer = void 0;
4+
var sequence_viewer_1 = require("./lib/sequence.viewer");
5+
Object.defineProperty(exports, "SequenceViewer", { enumerable: true, get: function () { return sequence_viewer_1.SequenceViewer; } });

‎index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>SvqServiceNew</title>
6+
<base href="/">
7+
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="icon" type="image/x-icon" href="favicon.ico">
10+
</head>
11+
<body>
12+
<app-root></app-root>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)