Skip to content

Commit

Permalink
Merge branch 'UI'
Browse files Browse the repository at this point in the history
  • Loading branch information
@olga24912
olga24912 committed Oct 19, 2018
2 parents a22a73c + 8996273 commit 563530b
Show file tree
Hide file tree
Showing 11 changed files with 803 additions and 442 deletions.
6 changes: 4 additions & 2 deletions CMakeLists.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ add_subdirectory(src)
install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/rna_scaffolder.py"
DESTINATION bin
COMPONENT runtime)
install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/visualize_scaffold_graph.py"
install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/sgtk.py"
DESTINATION bin
COMPONENT runtime)
install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/resources/test_dataset/ref.fasta"
Expand Down Expand Up @@ -124,7 +124,9 @@ install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/UI/scripts/handleAmbiguous.js"
install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/UI/scripts/freeLayout.js"
DESTINATION bin/scripts/
COMPONENT runtime)

install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/UI/scripts/chromFindVertexRank.js"
DESTINATION bin/scripts/
COMPONENT runtime)

install(PROGRAMS "${CMAKE_CURRENT_SOURCE_DIR}/UI/scripts/Icon.png"
DESTINATION bin/scripts/
Expand Down
299 changes: 154 additions & 145 deletions UI/mainPage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,82 +11,82 @@
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="top">
<img src="scripts/Icon.png" alt="icon" hspace="10">
<span class="SGTK">SGTK</span>
<span class="titel_text" id="titel_text"></span>
<div class="top">
<img src="scripts/Icon.png" alt="icon" hspace="10">
<span class="SGTK">SGTK</span>
<span class="titel_text" id="titel_text"></span>

<div class="search-container">
<form action="JavaScript:search()" class="form_search">
<input type="text" class="search_text" id="search_text" placeholder="Search.." name="search" autocomplete="off">
<button type="submit" class="search_button"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="search-container">
<form action="JavaScript:search()" class="form_search">
<input type="text" class="search_text" id="search_text" placeholder="Search.." name="search" autocomplete="off">
<button type="submit" class="search_button"><i class="fa fa-search"></i></button>
</form>
</div>

<div class="zoomInputBox" id="zoomInputBox">
<div class="zoom_one_line_block">
<div class="zoomInputBox" id="zoomInputBox">
<div class="zoom_one_line_block">
<div class="zoomInput" id="zoomInput" contenteditable="true" style="font-size: 14px">
100%
</div>
</div>
<div class="zoom_one_line_block">
<button class="zoomSelect" id="zoomSelect" onclick="zoomDropDown()">
<div class="arrow_down"></div>
</button>
</div>
</div>
<div class="zoom_one_line_block">
<button class="zoomSelect" id="zoomSelect" onclick="zoomDropDown()">
<div class="arrow_down"></div>
</button>
</div>
</div>
</div>

<div id="zoomDropdown" class="dropdown-content">
<p onclick="zoomPlus()">Zoom +1.5x (Alt=)</p>
<p onclick="zoomMinus()">Zoom -1.5x (Alt-)</p>
</div>
<div id="zoomDropdown" class="dropdown-content">
<p onclick="zoomPlus()">Zoom +1.5x (Alt=)</p>
<p onclick="zoomMinus()">Zoom -1.5x (Alt-)</p>
</div>

<div class="filter_panel">
<div class="centerblock">
<div class="block_with_line">
<div class="block" id="extra_info" style="height: 80px">
</div>
<div class="filter_panel">
<div class="centerblock">
<div class="block_with_line">
<div class="block" id="extra_info" style="height: 80px">
</div>
</div>

<div class="block_with_line">
<div class="block">
<h2 class="section_name">
Layout:
</h2>
<div class="styled-select">
<select id="select_layout">
<option value="free_layout">Free layout</option>
<option value="genome_browser">Genome browser</option>
</select>
</div>
<div class="block_with_line">
<div class="block">
<h2 class="section_name">
Layout:
</h2>
<div class="styled-select">
<select id="select_layout">
<option value="free_layout">Free layout</option>
<option value="genome_browser">Genome browser</option>
</select>
</div>
</div>
</div>


<div class="block_with_line" id = "filtration">
<div class="block">
<div class="block_with_line" id = "filtration">
<div class="block">
<h2 class="section_name">
Filtration:
Filtration:
</h2>
<div class="styled-select">
<select id="select_show_type">
<option value="full graph">Full graph</option>
<option value="scaffolds"> Scaffolds</option>
<option value="diff in libs">Difference in libs</option>
<option value="ambiguous">Ambiguous</option>
<option value="vertices_local_area">Vertices local area</option>
<option value="edges_local_area">Edges local area</option>
</select>
</div>
<select id="select_show_type">
<option value="full graph">Full graph</option>
<option value="scaffolds"> Scaffolds</option>
<option value="diff in libs">Difference in libs</option>
<option value="ambiguous">Ambiguous</option>
<option value="vertices_local_area">Vertices local area</option>
<option value="edges_local_area">Edges local area</option>
</select>
</div>
</div>
</div>

<div class="block_with_line" id = "change_block">
</div>
<div class="block_with_line" id = "change_block">
</div>

<div class="block_with_line">
<div class="block">
<div class="block_with_line">
<div class="block">
<h2 class="section_name">
Edge types:
</h2>
Expand All @@ -98,11 +98,11 @@ <h2 class="section_name">
<th> Min Edge Weight </th>
</tr>
</table>
</div>
</div>
</div>

<div class="block_with_line">
<div class="block">
<div class="block_with_line">
<div class="block">
<h2 class="section_name">
Vertices:
</h2>
Expand Down Expand Up @@ -146,119 +146,128 @@ <h2 class="section_name">
Min contig len:
<input type="number" min="0" id="min_contig_len" value=500>
</p>
</div>
</div>
</div>

<div class="block">
<h2 class="section_name">
Edges:
</h2>
<div class="block">
<h2 class="section_name">
Edges:
</h2>

<div class="one_line_block">
<label class="container">
<p>ID
<div class="one_line_block">
<label class="container">
<p>ID
<input type="checkbox" value="ID" id="edge_checkbox_id" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
<div class="one_line_block">
<label class="container" >
<p>Name
</p>
</label>
</div>
<div class="one_line_block">
<label class="container" >
<p>Name
<input type="checkbox" value="Name" id="edge_checkbox_name" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Weight
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Weight
<input type="checkbox" value="Weight" id="edge_checkbox_weight" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Alignment
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Alignment
<input type="checkbox" value="Alignment" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Type
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Type
<input type="checkbox" value="Type" id="edge_checkbox_type" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Len
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Len
<input type="checkbox" value="Len" id="edge_checkbox_len" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Info
</p>
</label>
</div>
<div class="one_line_block">
<label class="container">
<p>Info
<input type="checkbox" value="Info" id="edge_checkbox_info" onclick="updateText()">
<span class="checkmark"></span>
</p>
</label>
</div>
</p>
</label>
</div>
</div>
<button class="button" id="filter_button">
<span class="button_label">DRAW</span>
</button>
</div>
<button class="button" id="filter_button">
<span class="button_label">DRAW</span>
</button>
</div>

<div class="main_panel" id="mainpanel"></div>
<div class="main_panel" id="mainpanel"></div>

<div class="show-panel">
<div class="cnt_page_block">
<div class="cnt_page" id = "cnt_page">
<input type="number" min="0" max="0" id = "choose_page">
of 0
</div>
</div>
<div class="overflowdiva" id="show_block">
<div id="UpdateGraph" class="AlertBox">
<span class="helper"></span>
<div>
<p>Update the graph?</p>
<button class="updateGrpahButton" id="updateGrpahButton">Update</button>
</div>
</div>

<div class="show-panel">
<div class="cnt_page_block">
<div class="cnt_page" id = "cnt_page">
<input type="number" min="0" max="0" id = "choose_page">
of 0
</div>
</div>
<div class="overflowdiva" id="show_block">
</div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="scripts/scaffoldgraph.js"></script>
<script src="scripts/search.js"></script>
<script src="scripts/data.js"></script>
<!-script src="data/genealignmentb.js"></script->
<!-script src="data/genescaffoldgraphb.js"></script->
<script src="scripts/defaultWeight.js"></script>
<script src="scripts/showListScript.js"></script>
<script src="scripts/findAreaScript.js"></script>
<script src="scripts/zoomChoose.js"></script>
<script src="scripts/freeLayout.js"></script>
<script src="scripts/script.js"></script>
<script src="scripts/external/cytoscape.js"></script>
<script src="scripts/external/dagre.js"></script>
<script src="scripts/external/cytoscape-dagre.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="scripts/scaffoldgraph.js"></script>
<script src="scripts/search.js"></script>
<script src="scripts/data.js"></script>
<!-script src="scripts/data/genealignmentb.js"></script->
<!-script src="scripts/data/genescaffoldgraphb.js"></script->
<script src="scripts/chromFindVertexRank.js"></script>
<script src="scripts/defaultWeight.js"></script>
<script src="scripts/showListScript.js"></script>
<script src="scripts/findAreaScript.js"></script>
<script src="scripts/zoomChoose.js"></script>
<script src="scripts/handleScaffolds.js"></script>
<script src="scripts/freeLayout.js"></script>
<script src="scripts/script.js"></script>
<script src="scripts/external/cytoscape.js"></script>
<script src="scripts/external/dagre.js"></script>
<script src="scripts/external/cytoscape-dagre.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js"></script>
<script src="scripts/external/cytoscape-qtip.js"></script>
<script src="scripts/external/cytoscape.js-navigator/cytoscape-navigator.js"></script>
<script src="scripts/external/FileSaver.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.min.js"></script>
<script src="scripts/external/cytoscape.js-svg/cytoscape-svg-convertor.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.js"></script>
<script src="scripts/external/cytoscape-qtip.js"></script>
<script src="scripts/external/cytoscape.js-navigator/cytoscape-navigator.js"></script>
<script src="scripts/external/FileSaver.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/svg.js/2.4.0/svg.min.js"></script>
<script src="scripts/external/cytoscape.js-svg/cytoscape-svg-convertor.js"></script>

<script src="scripts/handleAlongChromosomes.js"></script>
<script src="scripts/handleScaffolds.js"></script>
<script src="scripts/handleDiffInLibs.js"></script>
<script src="scripts/handleAmbiguous.js"></script>
<script src="scripts/handleAlongChromosomes.js"></script>
<script src="scripts/handleDiffInLibs.js"></script>
<script src="scripts/handleAmbiguous.js"></script>
</body>
</html>
</html>
Loading

0 comments on commit 563530b

Please sign in to comment.