https://github.com/mmiv-center/spectramosaic-public
Tip revision: aa147cb93f6ffe8a9ddbad063c80e80e9963cf39 authored by Laura Garrison on 29 June 2020, 08:53:40 UTC
add representative screenshot
add representative screenshot
Tip revision: aa147cb
index.html
<html>
<head>
<meta charset="utf-8">
<title>SpectraMosaic - visual analysis of MRS metabolite concentration ratios </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/jquery.gridster.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<!-- <script src="scripts/nifti-reader.js"></script> -->
<script src="scripts/pngjs-master/PNG_build.js"></script>
<script src="scripts/pngjs-master/PNGReader_build.js"></script>
<script src="scripts/gridster/jquery.gridster.js"></script>
<script type="text/javascript" src="scripts/bootstrap-progressbar/bootstrap-progressbar.js"></script>
</head>
<body>
<div id="app-header">
<div id="app-header-content">
<h3>SpectraMosaic</h3>
<!-- <div id="help-text-link"><a href="help.html">SpectraMosaic starter guide</a></div> -->
</div>
</div>
<div class="gridster" id="main-div">
<ul>
<!-- HEADING ROW -->
<li data-row="1" data-col="1" data-sizex="3" data-sizey="1">
<div v-if="loading_data" class="row justify-content-center">
<p>Loading...</p>
</div>
<div v-else id="drop_zone" class="row over justify-content-center" draggable="true">
<div class="col-md-12 align-self-center" style="font-size: 8"> DROP FILES </div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="10" data-sizey="1" style="text-align: left">
<button type="button" class="btn btn-secondary btn-sm disabled" id="spatial-tab-btn">Spatial Voxel Overview</button>
<button type="button" class="btn btn-secondary btn-sm" id="selection-tab-btn">Voxel Group Overview</button>
</li>
<li data-row="1" data-col="14" data-sizex="4" data-sizey="1" style="text-align: center">
<span style="vertical-align: middle"><p>Metabolites</p></span>
</li>
<li data-row="1" data-col="18" data-sizex="15" data-sizey="1" style="text-align: center">
<p>Spectral Ratios</p>
</li>
<li data-row="1" data-col="29" data-sizex="2" data-sizey="1" style="text-align: center">
<p>Legend</p>
</li>
<!-- FIRST CONTENT ROW -->
<li data-row="2" data-col="1" data-sizex="13" data-sizey="17" id="grid_viewL">
<div class="row justify-content-left" id="left-view-row">
<!-- Spatial Voxel Overview Panel stuff -->
<div id="viewL"></div>
<!-- Voxel Group Overview Panel stuff -->
<div class="col hidden-div show-border" id="viewL-select">
<br>
<!-- Options to build groups from presets
-- Dynamically rendered using Vue.js functionality, see vue_main.js
-->
<group-edit-component :voxel_groups="voxel_groups"></group-edit-component>
</div>
</div>
</li>
<!-- Right view -- needs to be drawn first so that it doesn't occlude the dropdown menu in the middle -->
<li data-row="2" data-col="18" data-sizex="15" data-sizey="14" id="grid_viewR">
<div id="viewR" class=""></div>
</li>
<!-- Middle metabolite selection panel -->
<li data-row="2" data-col="14" data-sizex="4" data-sizey="13" id="grid_metabolites">
<!-- Dynamically rendered using Vue.js functionality, see vue_main.js -->
<metab-selection-elem :voxel_groups="voxel_groups"></metab-selection-elem>
</li>
<!-- Legend Panel-->
<li data-row="2" data-col="30" data-sizex="2" data-sizey="13" id="legend">
<div class="row justify-content-center" style="margin-top:3%">
<div class="col-3">Ratio Value</div>
<div class="col-9">Icons</div>
</div>
<div class="row justify-content-center">
<div class="col-5">
<div id="viewR_legend"></div>
</div>
<div class="col-6">
<p class="legend-text">Spatial voxel</p>
<div class="row justify-content-center">
<div class="col-10">
<object data="icons/spatial_voxel.svg" type="image/svg+xml" margin-right=3px> </object>
</div>
</div>
<p class="legend-text">Patient: single state</p>
<div class="row justify-content-center">
<p class="legend-text2"> 1 time pt</p>
<div class="col-12">
<object data="icons/patient_single.svg" type="image/svg+xml"> </object>
</div>
</div>
<p class="legend-text">Patient: single state</p>
<div class="row justify-content-center">
<p class="legend-text2"> >2 time pts</p>
<div class="col-12">
<object data="icons/patient_multiple.svg" type="image/svg+xml"> </object>
</div>
</div>
<p class="legend-text">Patient: dual state</p>
<div class="row justify-content-center">
<p class="legend-text2"> 1 time pt</p>
<div class="col-12">
<object data="icons/pt_dual_single.svg" type="image/svg+xml"> </object>
</div>
</div>
<p class="legend-text">Patient: dual state</p>
<div class="row justify-content-center">
<p class="legend-text2"> >2 time pts</p>
<div class="col-12">
<object data="icons/pt_dual_multiple.svg" type="image/svg+xml"> </object>
</div>
</div>
</div>
</div>
<div></div>
<div></div>
</li>
<!-- SECOND CONTENT ROW -->
<li data-row="16" data-col="18" data-sizex="15" data-sizey="4">
<!-- <div id="right-data-table">
<table id="right_data_table">
<tr id="table-head">
<th>Voxel ID</th>
<th>Patient</th>
<th>State</th>
<th>Time</th>
<th>Gender</th>
<th>Age</th>
<th>TE</th>
<th>Location</th>
<th class="groups-table-col">Groups</th>
</tr>
</table>
</div>-->
<data-table :all_voxels="all_voxels"></data-table>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="scripts/gridster_main.js"></script>
<script src="scripts/vue_main.js"></script>
<script src="scripts/data_handler.js"></script>
<script src="scripts/voxel_groups.js"></script>
<script src="scripts/file_reader_master.js"></script>
<script src="scripts/file_reader_csv.js"></script>
<script src="scripts/spatial_view.js"></script>
<script src="scripts/metabolite_selection.js"></script>
<script src="scripts/heatmap.js"></script>
<script src="scripts/heatmap_legend.js"></script>
</body>
</html>