Skip to content

M
memiescape
Commit dfc7af32 authored by Quentin Lobbé's avatar Quentin Lobbé
Browse files
Options

Initial commit

parents
Pipeline #158 canceled with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 572 additions and 0 deletions
      index.html 0 → 100644
      View file @ dfc7af32
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- lib CSS -->
      <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://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="./lib/css/qlobbe.css">
      <link rel="stylesheet" type="text/css" href="./lib/css/awesome-bootstrap-checkbox.css">
      <!-- lib Font -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:600|Open+Sans">
      <!-- lib JS -->
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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://d3js.org/d3.v5.min.js"></script>
      <script type="text/javascript" src="./lib/js/utils.js"></script>
      <title>Mèmiescape</title>
      </head>
      <body>
      <div class="container-fluid h-100" id="main_view">
      <div class="row h-100">
      <div class="col-2" id="left_view">
      <h5 class="title">
      MÈMIESCAPE <small class="text-muted">v0.1</small>
      </h5>
      <hr>
      <form>
      <div class="form-group">
      <div class="custom-file" id="#btn_file">
      <input type="file" class="custom-file-input" id="get_file">
      <label class="custom-file-label" for="get_file">Load a phylomemy ...</label>
      </div>
      </div>
      <button type="button" class="btn btn-draw btn-block" id="btn_draw" desabled>Draw</button>
      </form>
      <div id="options" style="display:none;">
      <hr>
      <div id="layer-group">
      <a href="#" id="layer-btn" class="drop-down-menu" onclick="toggleDiv('layer-radio',200);"><i class="fa fa-caret-right rotate"></i> layer</a>
      <ul id="layer-radio">
      <li>
      <div class="radio">
      <input type="radio" name="radio1" id="radio1" value="option1" checked="">
      <label for="radio1">inline</label>
      </div>
      </li>
      <li>
      <div class="radio">
      <input type="radio" name="radio1" id="radio2" value="option2">
      <label for="radio2">grid</label>
      </div>
      </li>
      </ul>
      </div>
      </div>
      </div>
      <div class="col-10" id="right_view">
      <div class="alert alert-info" id="processing">
      <p class="text-center alert-label"><i class="fa fa-spinner fa-pulse fa-fw"></i> Processing the phylomemy ... </p>
      </div>
      </div>
      </div>
      </div>
      <script type="text/javascript">
      /*
      * Draw functions
      */
      function draw(phyloData) {
      // set up margin
      var margin = {t:0, r:30, b:15, l:0};
      var w = document.getElementById("right_view").offsetWidth - margin.l - margin.r,
      h = $(window).height() - margin.t - margin.b;
      // draw svg view
      var svg = d3.select("#right_view").append("svg")
      .attr("width",w)
      .attr("height",h);
      var g = svg.append("g").attr("id","svg-view");
      // draw phylomemy from file
      var cptBranches = 0;
      var cptNodes = 0;
      var cptEdges = 0;
      d3.xml(phyloData).then(data => {
      var newNodes = document.importNode(data.documentElement,true);
      svg.attr("viewBox", newNodes.getAttribute("viewBox"));
      g.each(function(){
      this.appendChild(newNodes);
      })
      svg.call(zoom)
      d3.select("#right_view")
      .append('button')
      .attr("type","button")
      .attr("id","btn_reset")
      .attr("class","btn btn-light")
      .append('i')
      .attr("class","fas fa-expand-arrows-alt");
      d3.select("#btn_reset").on("click", reset);
      toggleDiv("processing",0)
      })
      // set up d3 zoom
      var transform = d3.zoomIdentity;
      zoom = d3.zoom()
      .scaleExtent([1, 50])
      .on("zoom", zoomed);
      function zoomed() {
      g.attr("transform", d3.event.transform);
      }
      function reset() {
      console.log("coucou")
      svg.transition().call(zoom.transform, d3.zoomIdentity);
      }
      }
      /*
      * Control functions
      */
      window.onload = function() {
      document.getElementById("btn_draw").disabled = true;
      if ($('#get_file').val() != "C:\\fakepath\\") {
      processInput($('#get_file'))
      }
      };
      $('#btn_draw').on('click',function(){
      clean()
      toggleDiv("processing",0)
      readFile(draw)
      })
      $('#get_file').on('change',function(){
      processInput($(this))
      })
      $(".drop-down-menu").click(function () {
      $(".rotate").toggleClass("down");
      })
      </script>
      </body>
      </html>
      \ No newline at end of file
      lib/css/awesome-bootstrap-checkbox.css 0 → 100644
      View file @ dfc7af32
      .checkbox {
      padding-left: 20px; }
      .checkbox label {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      padding-left: 5px; }
      .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
      .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
      .checkbox input[type="checkbox"],
      .checkbox input[type="radio"] {
      opacity: 0;
      z-index: 1;
      cursor: pointer;
      }
      .checkbox input[type="checkbox"]:focus + label::before,
      .checkbox input[type="radio"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
      .checkbox input[type="checkbox"]:checked + label::after,
      .checkbox input[type="radio"]:checked + label::after {
      font-family: "FontAwesome";
      content: "\f00c";}
      .checkbox input[type="checkbox"]:indeterminate + label::after,
      .checkbox input[type="radio"]:indeterminate + label::after {
      display: block;
      content: "";
      width: 10px;
      height: 3px;
      background-color: #555555;
      border-radius: 2px;
      margin-left: -16.5px;
      margin-top: 7px;
      }
      .checkbox input[type="checkbox"]:disabled,
      .checkbox input[type="radio"]:disabled {
      cursor: not-allowed;
      }
      .checkbox input[type="checkbox"]:disabled + label,
      .checkbox input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before,
      .checkbox input[type="radio"]:disabled + label::before {
      background-color: #eeeeee;
      cursor: not-allowed; }
      .checkbox.checkbox-circle label::before {
      border-radius: 50%; }
      .checkbox.checkbox-inline {
      margin-top: 0; }
      .checkbox-primary input[type="checkbox"]:checked + label::before,
      .checkbox-primary input[type="radio"]:checked + label::before {
      background-color: #337ab7;
      border-color: #337ab7; }
      .checkbox-primary input[type="checkbox"]:checked + label::after,
      .checkbox-primary input[type="radio"]:checked + label::after {
      color: #fff; }
      .checkbox-danger input[type="checkbox"]:checked + label::before,
      .checkbox-danger input[type="radio"]:checked + label::before {
      background-color: #d9534f;
      border-color: #d9534f; }
      .checkbox-danger input[type="checkbox"]:checked + label::after,
      .checkbox-danger input[type="radio"]:checked + label::after {
      color: #fff; }
      .checkbox-info input[type="checkbox"]:checked + label::before,
      .checkbox-info input[type="radio"]:checked + label::before {
      background-color: #5bc0de;
      border-color: #5bc0de; }
      .checkbox-info input[type="checkbox"]:checked + label::after,
      .checkbox-info input[type="radio"]:checked + label::after {
      color: #fff; }
      .checkbox-warning input[type="checkbox"]:checked + label::before,
      .checkbox-warning input[type="radio"]:checked + label::before {
      background-color: #f0ad4e;
      border-color: #f0ad4e; }
      .checkbox-warning input[type="checkbox"]:checked + label::after,
      .checkbox-warning input[type="radio"]:checked + label::after {
      color: #fff; }
      .checkbox-success input[type="checkbox"]:checked + label::before,
      .checkbox-success input[type="radio"]:checked + label::before {
      background-color: #5cb85c;
      border-color: #5cb85c; }
      .checkbox-success input[type="checkbox"]:checked + label::after,
      .checkbox-success input[type="radio"]:checked + label::after {
      color: #fff;}
      .checkbox-primary input[type="checkbox"]:indeterminate + label::before,
      .checkbox-primary input[type="radio"]:indeterminate + label::before {
      background-color: #337ab7;
      border-color: #337ab7;
      }
      .checkbox-primary input[type="checkbox"]:indeterminate + label::after,
      .checkbox-primary input[type="radio"]:indeterminate + label::after {
      background-color: #fff;
      }
      .checkbox-danger input[type="checkbox"]:indeterminate + label::before,
      .checkbox-danger input[type="radio"]:indeterminate + label::before {
      background-color: #d9534f;
      border-color: #d9534f;
      }
      .checkbox-danger input[type="checkbox"]:indeterminate + label::after,
      .checkbox-danger input[type="radio"]:indeterminate + label::after {
      background-color: #fff;
      }
      .checkbox-info input[type="checkbox"]:indeterminate + label::before,
      .checkbox-info input[type="radio"]:indeterminate + label::before {
      background-color: #5bc0de;
      border-color: #5bc0de;
      }
      .checkbox-info input[type="checkbox"]:indeterminate + label::after,
      .checkbox-info input[type="radio"]:indeterminate + label::after {
      background-color: #fff;
      }
      .checkbox-warning input[type="checkbox"]:indeterminate + label::before,
      .checkbox-warning input[type="radio"]:indeterminate + label::before {
      background-color: #f0ad4e;
      border-color: #f0ad4e;
      }
      .checkbox-warning input[type="checkbox"]:indeterminate + label::after,
      .checkbox-warning input[type="radio"]:indeterminate + label::after {
      background-color: #fff;
      }
      .checkbox-success input[type="checkbox"]:indeterminate + label::before,
      .checkbox-success input[type="radio"]:indeterminate + label::before {
      background-color: #5cb85c;
      border-color: #5cb85c;
      }
      .checkbox-success input[type="checkbox"]:indeterminate + label::after,
      .checkbox-success input[type="radio"]:indeterminate + label::after {
      background-color: #fff;
      }
      .radio {
      padding-left: 20px; }
      .radio label {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      padding-left: 5px; }
      .radio label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 50%;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
      .radio label::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 3px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: #555555;
      -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      transform: scale(0, 0);
      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
      .radio input[type="radio"] {
      opacity: 0;
      z-index: 1;
      cursor: pointer;
      }
      .radio input[type="radio"]:focus + label::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
      .radio input[type="radio"]:checked + label::after {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
      .radio input[type="radio"]:disabled {
      cursor: not-allowed;
      }
      .radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .radio input[type="radio"]:disabled + label::before {
      cursor: not-allowed; }
      .radio.radio-inline {
      margin-top: 0; }
      .radio-primary input[type="radio"] + label::after {
      background-color: #337ab7; }
      .radio-primary input[type="radio"]:checked + label::before {
      border-color: #337ab7; }
      .radio-primary input[type="radio"]:checked + label::after {
      background-color: #337ab7; }
      .radio-danger input[type="radio"] + label::after {
      background-color: #f8381f; }
      .radio-danger input[type="radio"]:checked + label::before {
      border-color: #f8381f; }
      .radio-danger input[type="radio"]:checked + label::after {
      background-color: #f8381f; }
      .radio-info input[type="radio"] + label::after {
      background-color: #5bc0de; }
      .radio-info input[type="radio"]:checked + label::before {
      border-color: #5bc0de; }
      .radio-info input[type="radio"]:checked + label::after {
      background-color: #5bc0de; }
      .radio-warning input[type="radio"] + label::after {
      background-color: #f0ad4e; }
      .radio-warning input[type="radio"]:checked + label::before {
      border-color: #f0ad4e; }
      .radio-warning input[type="radio"]:checked + label::after {
      background-color: #f0ad4e; }
      .radio-success input[type="radio"] + label::after {
      background-color: #5cb85c; }
      .radio-success input[type="radio"]:checked + label::before {
      border-color: #5cb85c; }
      .radio-success input[type="radio"]:checked + label::after {
      background-color: #5cb85c; }
      input[type="checkbox"].styled:checked + label:after,
      input[type="radio"].styled:checked + label:after {
      font-family: 'FontAwesome';
      content: "\f00c"; }
      input[type="checkbox"] .styled:checked + label::before,
      input[type="radio"] .styled:checked + label::before {
      color: #fff; }
      input[type="checkbox"] .styled:checked + label::after,
      input[type="radio"] .styled:checked + label::after {
      color: #fff; }
      \ No newline at end of file
      lib/css/qlobbe.css 0 → 100644
      View file @ dfc7af32
      html,body {
      height: 100%;
      }
      hr {
      border-color: #555555;
      }
      .alert-label {
      margin-bottom: 0px;
      }
      .custom-file-label {
      overflow: hidden;
      border-color: rgb(101, 101, 127);
      }
      .drop-down-menu, .drop-down-menu:hover, .drop-down-menu:active, .drop-down-menu:focus {
      color: #0d1824;
      outline: 0;
      }
      .rotate {
      -moz-transition: all .15s linear;
      -webkit-transition: all .15s linear;
      transition: all .15s linear;
      }
      .rotate.down {
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg);
      transform:rotate(90deg);
      }
      .title {
      color: #0d1824;
      font-family: 'Montserrat', sans-serif;
      text-rendering: optimizeLegibility;
      font-weight: 600;
      font-style: normal;
      }
      #btn_draw {
      background-color: #63c4e2;
      border-color: rgb(101, 101, 127);
      }
      #btn_reset {
      position: absolute;
      left: 15px;
      top: 15px;
      border-color: #555555;
      }
      #layer-radio {
      display: none;
      list-style-type: none;
      padding-left: 5px;
      padding-top: 10px;
      }
      #left_view {
      padding-top: 15px;
      background-color: rgb(240, 240, 243);
      border-right: 1px solid #555555;
      color: #0d1824;
      font-family: 'Open Sans', sans-serif;
      text-rendering: optimizeLegibility;
      }
      #processing {
      color: #0d1824;
      background-color: rgb(240, 240, 243);
      border-color: rgb(101, 101, 127);
      display: none;
      }
      #right_view {
      padding-top: 15px;
      background-color: #FFF;
      position: relative;
      }
      lib/js/utils.js 0 → 100644
      View file @ dfc7af32
      /*
      * Utils functions
      */
      /* Normalize the value of the input file element */
      function processInput(ele) {
      var fileName = ele.val();
      fileName = fileName.replace("C:\\fakepath\\", "");
      ele.next('.custom-file-label').html(fileName);
      document.getElementById("btn_draw").disabled = false;
      }
      /* Read an svg file from the input element */
      function readFile(callback) {
      var file = document.getElementById("get_file").files[0];
      var reader = new FileReader();
      reader.onload = (function(theFile) {
      return function(e) {
      callback(e.target.result)
      };
      })(file);
      reader.readAsDataURL(file);
      }
      /* Toggle a div after a click */
      function toggleDiv(id,to) {
      var e = document.getElementById(id);
      if(e.style.display == 'block')
      e.style.display = 'none';
      else
      setTimeout(function (){
      e.style.display = 'block';
      }, to);
      }
      /* Clean the view each time you load a new phylomemy */
      function clean() {
      d3.select("svg").remove();
      d3.select("#btn_reset").remove();
      }
      \ No newline at end of file
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment