Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Docs and add new Samples #75

Merged
merged 4 commits into from
Nov 18, 2022
Merged

Update Docs and add new Samples #75

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91177cb
Merge branch 'exp/dev' of https://github.com/calipho-sib/feature-view…
chaliya96 Nov 10, 2022
08f40f9
Updated docs and add new samples
chaliya96 Nov 18, 2022
87c24a0
Merge branch 'exp/dev' of https://github.com/calipho-sib/feature-view…
chaliya96 Nov 18, 2022
fa0fa40
Merge branch 'release/1.3.0-beta.5' of https://github.com/calipho-sib…
chaliya96 Nov 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 137 additions & 5 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,15 +139,29 @@ <h4 class="text-center">Step 2 - Add some features</h4>
</li>
<li><strong>height</strong> <em>(int)</em> : height of the feature (default: 12)</li>
<li><strong>color</strong> <em>(string)</em> : The color of the features</li>
<li><strong>type</strong> <em>("rect","path", "line")</em> : The type of feature,
<li><strong>type</strong> <em>("rect","path", "line", "bar")</em> : The type of feature,
for a
specific rendering
</li>
<li><strong>interpolation</strong> <em>("basis","step","monotone",..)</em> : Customize the layout of a the line <br><em style="font-weight:600">(Only for the "line" feature)</em>
</li>
<li><strong>highlight</strong> <em>(array of object)</em> : Customize the layout of a the line <br><em style="font-weight:600">(Only for the "multipleRect" type)</em>
<dl class="dl-horizontal" style="margin-bottom:5px;">
<dt>x <em style="font-weight:500">(int)</em> :</dt><dd>first position</dd>
<dt>y <em style="font-weight:500">(int)</em> :</dt><dd>last position</dd>
<dt>highlightText <em style="font-weight:500">(string)</em> :</dt><dd> Highlight Text(This text will replace the already provided description in data) </dd>
<dt>color <em style="font-weight:500">(string)</em> :</dt><dd> highlight color</dd>
</dl>
</li>
<li><strong>summaryView</strong> <em>boolean</em> To enable summary view <br><em style="font-weight:600">(Only for the "bar" and "rect" type)</em></li>
<li><strong>summaryViewProperties</strong> <em>object</em> Customer properties for summary view<br><em style="font-weight:600">(Only required when summaryView is enabled)</em></li>

</ul>
<p><strong>Note 1 :</strong> In case of <em>"line"</em> feature, you can add 2 arrays of data within an array (e.g. <em style="font-family:Courier;font-weight:500">data:[dataArray1,dataArray2]</em>), and 2 colors for each data within an array (e.g. <em style="font-family:Courier;font-weight:500">color:["#C50063","#005572"]</em>)</p>
<p><strong>Note 2 :</strong> Be carefull to specify different className for each type of feature</p>
<p><strong>Note 3 :</strong> For further information about summary view, please refer the "Summary View - On demand loading data" section below </p>


</div>
<form>
<textarea id="code2" name="code2" style="width:500px;max-height:200px;overflow:auto;font-size:11px;">
Expand Down Expand Up @@ -213,15 +227,25 @@ <h4 class="text-center">Step 2 - Add some features</h4>
height: "5"
});

ft2.addFeature({
data: dataDemo,
name: "test feature 6",
className: "test5",
color: "#03b1fc",
type: "bar",
filter: "type2",
height: "5"
});

//Beside positions of each element, you can also give a specific description, which will appears in the tooltip when mouse hover, and a specific ID, for example to link a click event on the feature with something else in your project.
ft2.addFeature({
data: [{x:120,y:154,description:"aaaaa",id:"a1"},{x:22,y:163,description:"bbbbb",id:"b1"},
{x:90,y:108,description:"ccccc",id:"c1"},{x:10,y:25,description:"ddddd",id:"d1"},
{x:193,y:210,description:"eeeee",id:"e1"},{x:78,y:85,description:"fffff",id:"f1"},
{x:96,y:143,description:"ggggg",id:"g1"},{x:14,y:65,description:"hhhhh",id:"h1", color:"#12E09D"},
{x:56,y:167,description:"jjjjj",id:"j1"}],
name: "test feature 6",
className: "test6",
name: "test feature 7",
className: "test7",
color: "#81BEAA",
type: "rect",
filter: "type2"
Expand Down Expand Up @@ -339,6 +363,114 @@ <h4 class="text-center">Events</h4>
<div id="div3"></div>
</div>
</div>
<div class="row" style="margin-top: 30px;border-bottom:1px solid #E7EAEC;">
<div class="col-md-5 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">Summary View - On demand loading data</h4>
</div>
<div class="panel-body">
<p>You can now load the large data to feature viewer on request (Currently only available for bar and rect types) :</p>
<ul>
<li><strong>loadSummaryFeature</strong> This method is used to load the data to FV from your immediate upper layer</li>
</ul>
<p>Initially to enable this, you need to define summaryView property and summaryViewProperties(optional) property in the addFeature function.
Then using the loadSummaryFeature method you can load the data to the relevant feature. </p>
<ul>
<li><strong>summaryViewProperties</strong> <em>(Object)</em> : An object containing :
<dl class="dl-horizontal" style="margin-bottom:5px;">
<dt>position<em style="font-weight:500">("left", "right", "center")</em> :</dt><dd>Position of the data loading button</dd>
<dt>buttonLabel <em style="font-weight:500">(string)</em> :</dt><dd> custom text for button label <em style="font-weight:600">(Optionnal)</em></dd>
<dt>buttonColor<em style="font-weight:500">(string)</em> :</dt><dd> a custom color for button <em style="font-weight:600">(Optionnal)</em></dd>
<dt>buttonTextColor<em style="font-weight:500">(string)</em> :</dt><dd> a custom color for button text <em style="font-weight:600">(Optionnal)</em></dd>
</dl>
</li>
</ul>
</div>
<form>
<textarea id="code4" name="code4" style="width:500px;max-height:200px;overflow:auto;font-size:11px;">
//Create a new Feature Viewer and add some rendering options
var ft6 = new FeatureViewer.createFeature("FDSJKLFJDSFKLJDFHADJKLFHDSJKLFHDAFJKLDHFJKLDASFHDJKLFHDSAJKLFHDAKLFJDHSAFKLDLSNCDJ"+
"KLFENFIUPERWDJKPCNVDFPIEHFDCFJDKOWFPDJWFKLXSJFDW9FIPUAENDCXAMSFNDUAFIDJFDLKSAFJDSAKFLJDSADJFDW9FIPUAENDCXAMSFNDAAAAAAAAAAAFJDSAKFL","#div4", {
showAxis: true,
showSequence: true,
brushActive: true,
toolbar:true,
bubbleHelp:true,
zoomMax:20
});

//Add some features
ft6.addFeature({
data: [{x:20,y:32},{x:46,y:100},{x:123,y:167}],
name: "test feature 1",
className: "test1",
color: "#968D73",
type: "rect"
});
ft6.addFeature({
data: [{x:52,y:52},{x:92,y:92}],
name: "test feature 2",
className: "test2",
color: "#4F4C41",
type: "rect"
});
ft6.addFeature({
data: [{x:130,y:184},{x:40,y:142},{x:80,y:110}],
name: "test feature 3",
className: "test3",
color: "#667580",
type: "path"
});
var dataDemo = [];
for (var i=1;i<100;i++) {
var count = Math.floor((Math.random() * 20) + 1);
dataDemo.push({
x: i*2,
y:count
})
}
ft6.addFeature({
data: dataDemo,
name: "test feature 4",
className: "test4",
color: "#667580",
type: "line",
filter: "type2",
height: "5"
});

ft6.addFeature({
data: [{x:120,y:154},{x:22,y:163},{x:90,y:108},{x:10,y:25},{x:193,y:210},{x:78,y:85},{x:96,y:143},{x:14,y:65},{x:56,y:167}],
name: "test feature 5",
className: "test5",
color: "#5C832F",
height: 8,
type: "rect"
});

//Get and print in the browser console the position of the feature selected
ft6.onFeatureSelected(function (d) {
console.log(d.detail);
});

//Get and print in the browser console the zoom level and coordinates
ft6.onZoom(function (d) {
console.log(d.detail);
});

</textarea>
</form>
<button type="button" class="btn btn-default center-block" style="margin-bottom:20px;"
onclick=executeCode("#div4",eventCode)>Execute
</button>
</div>
</div>
<div class="col-md-6 col-md-offset-1 col-xs-12"
style="height:250px;vertical-align:top;margin-top:15px;">
<div id="div4"></div>
</div>
</div>
<div class="row" style="margin-top: 30px;border-bottom:1px solid #E7EAEC;">
<div class="col-md-5 col-xs-12">
<div class="panel panel-default">
Expand All @@ -354,7 +486,7 @@ <h4 class="text-center">Zoom</h4>
</ul>
</div>
<form>
<textarea id="code4" name="code4" style="width:500px;max-height:200px;overflow:auto;font-size:11px;">
<textarea id="code5" name="code5" style="width:500px;max-height:200px;overflow:auto;font-size:11px;">
//Create a new Feature Viewer and add some rendering options
var ft4 = new FeatureViewer.createFeature("FDSJKLFJDSFKLJDFHADJKLFHDSJKLFHDAFJKLDHFJKLDASFHDJKLFHDSAJKLFHDAKLFJDHSAFKLDLSNCDJKLFENFIUPERWDJKPCNVDFPIEHFDCFJDKOWFPDJWFKLXSJFDW9FIPUAENDCXAMSFNDUAFIDJFDLKSAFJDSAKFLJDSADJFDW9FIPUAENDCXAMSFNDAAAAAAAAAAAFJDSAKFL","#div4", {
showAxis: true,
Expand Down Expand Up @@ -470,7 +602,7 @@ <h4 class="text-center" style="color:#C50063;font-family:'Helvetica Neue';">Use
</ul>
</div>
<form>
<textarea id="code5" name="code5" style="width:500px;max-height:200px;overflow:auto;font-size:11px;">
<textarea id="code6" name="code6" style="width:500px;max-height:200px;overflow:auto;font-size:11px;">

//initalize nextprot Client
//please provide a name for your application
Expand Down