index.html 10.3 KB
Newer Older
Adam Feuer's avatar
Adam Feuer committed
1
<!DOCTYPE html>
Matija Obreza's avatar
Matija Obreza committed
2

Adam Feuer's avatar
Adam Feuer committed
3
<head>
Maxym Borodenko's avatar
Webpack  
Maxym Borodenko committed
4
  <meta charset="utf-8">
Adam Feuer's avatar
Adam Feuer committed
5
</head>
Maxym Borodenko's avatar
Maxym Borodenko committed
6

Matija Obreza's avatar
Matija Obreza committed
7 8 9
<body>
  <div class="flexcontainer">
    <div class="menubar">
Matija Obreza's avatar
Matija Obreza committed
10 11 12 13 14 15 16
      <div class="top-bar">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Diversity Trees</li>
            <li>
              <a href="#">Load tree</a>
              <ul class="menu vertical" id="existing-trees">
17 18
                <!-- Filled -->
                <!-- <li><a href="#" class="load-tree" x-url="wheat.json">Wheat #1</a></li>
Matija Obreza's avatar
Matija Obreza committed
19
                <li><a href="#" class="load-tree">TBD</a></li>
20
                <li><a href="#" class="load-tree">TBD</a></li> -->
Matija Obreza's avatar
Matija Obreza committed
21 22 23 24 25 26 27 28 29 30
              </ul>
            </li>
            <li>
              <a href="#">Current tree</a>
              <ul class="menu vertical">
                <li><a href="#" id="resetBtn">New tree / Clear</a></li>
                <li>
                  <a href="#" id="downloadJsonBtn">Download tree</a>
                  <a id="downloadAnchorElem" style="display:none"></a>
                </li>
Matija Obreza's avatar
Matija Obreza committed
31
                <li><a href="#" id="importJsonBtn">Upload tree</a></li>
Maxym Borodenko's avatar
Maxym Borodenko committed
32
                <li><a href="#" id="editContributorsBtn">Contributors</a></li>
Matija Obreza's avatar
Matija Obreza committed
33 34 35
              </ul>
            </li>
          </ul>
Matija Obreza's avatar
Matija Obreza committed
36
        </div>
Matija Obreza's avatar
Matija Obreza committed
37 38
        <div class="top-bar-right">
          <ul class="menu">
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
39
            <li><a href="#" id="creditsBtn">Credits</a></li>
Matija Obreza's avatar
Matija Obreza committed
40 41 42 43
            <li><a href="#" id="instructionsBtn">Help</a></li>
            <!-- <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li> -->
          </ul>
Matija Obreza's avatar
Matija Obreza committed
44 45
        </div>
      </div>
Matija Obreza's avatar
Matija Obreza committed
46 47 48 49 50
    </div>
    <div class="maincontent">
      <div id="tree-container"></div>
    </div>
  </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
51

52 53 54 55
  <div id="NodePropertiesModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Node properties</h2>
    <form id="NodePropertiesForm">
      <input type="hidden" id="NodeAction" value="create" />
Matija Obreza's avatar
Matija Obreza committed
56 57
      <div class="row">
        <div class="large-12 columns">
Matija Obreza's avatar
Matija Obreza committed
58 59
          <label>
              Node name
60
              <input type="text" class="inputName" id='NodeName' placeholder="Node name" />
Matija Obreza's avatar
Matija Obreza committed
61
          </label>
Maxym Borodenko's avatar
Maxym Borodenko committed
62
        </div>
Matija Obreza's avatar
Matija Obreza committed
63 64 65
      </div>
      <div class="row">
        <div class="large-12 columns">
66 67 68 69
          <label>
              Relative weight <em>[0 &mdash; 100]</em>
              <input type="text" class="inputName" id='NodeWeight' placeholder="100" />
          </label>
Maxym Borodenko's avatar
Maxym Borodenko committed
70
        </div>
Matija Obreza's avatar
Matija Obreza committed
71 72 73 74 75 76
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
        </div>
        <div class="large-4 columns">
Matija Obreza's avatar
Matija Obreza committed
77
          <a href="#" data-close class="button info closeModal">Cancel</a>
78
          <button type="submit" class="button success">Confirm</button>
Adam Feuer's avatar
Adam Feuer committed
79
        </div>
Matija Obreza's avatar
Matija Obreza committed
80
      </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
81
    </form>
Matija Obreza's avatar
Matija Obreza committed
82
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
83
  </div>
Adam Feuer's avatar
Adam Feuer committed
84

Matija Obreza's avatar
Matija Obreza committed
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
  <div id="ImportTreeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Upload tree data</h2>
    <form>
      <div class="row">
        <div class="large-12 columns">
          <label>JSON File
              <input type="file" id="selectFiles" value="Import" accept=".json" />
          </label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <label>or paste <b>valid</b> tree JSON:
              <textarea id="treeJsonText" placeholder="Copy-paste JSON here..."></textarea>
          </label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <div class="error errorMessage" />
        </div>
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
        </div>
        <div class="large-4 columns">
          <a href="#" data-close class="button info closeModal">Cancel</a>
113
          <button type="submit" class="button success">Load tree</button>
Matija Obreza's avatar
Matija Obreza committed
114 115 116 117 118 119
        </div>
      </div>
    </form>
    <a class="close-button" data-close aria-label="Close">&#215;</a>
  </div>

Maxym Borodenko's avatar
Maxym Borodenko committed
120 121 122 123 124 125
  <div id="EditContributorsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Contributors</h2>
    <form>
      <div class="row">
        <div class="large-12 columns">
          <label>Edit the contributors list:
126
            <textarea id="contributorsText" placeholder="Contributor 1 \nContributor 2 \n..." rows="3"></textarea>
Maxym Borodenko's avatar
Maxym Borodenko committed
127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
          </label>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <div class="error errorMessage" />
        </div>
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
        </div>
        <div class="large-4 columns">
          <a href="#" data-close class="button info closeModal">Cancel</a>
          <button type="submit" class="button success">Save</button>
        </div>
       </div>
    </form>
    <a class="close-button" data-close aria-label="Close">&#215;</a>
  </div>

Matija Obreza's avatar
Matija Obreza committed
148
  <div id="InstructionsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Matija Obreza's avatar
Matija Obreza committed
149
    <h2 id="modalTitle">How to use the interactive tree editor</h2>
Matija Obreza's avatar
Matija Obreza committed
150
    <div class="text">
Matija Obreza's avatar
Matija Obreza committed
151 152 153 154 155
      <h3>Loading existing tree</h3>
      <p>
        Go to <b>Load tree</b> drop-down menu and select one of the available tree definitions from the menu.
      </p>

Maxym Borodenko's avatar
Maxym Borodenko committed
156
      <h3>Uploading the tree</h3>
Matija Obreza's avatar
Matija Obreza committed
157
      <p>
Matija Obreza's avatar
Matija Obreza committed
158 159
        Go to <b>Current tree</b> drop-down menu, select <b>Upload tree</b> and enither choose a JSON file with tree stucture that you want to upload or copy-paste the JSON tree definiton into the text field.<br />
        Click on <b>Load tree</b> and the tree should appear on the screen, you may have to zoom in or out to see it better.
Matija Obreza's avatar
Matija Obreza committed
160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
      </p>

      <h3>Saving your tree</h3>
      <p>
        Once you finished editing the tree you can save your work by clicking on the download tree button on the <b>Current tree</b> drop-down menu. If you are working on a large tree we recommend to save your tree few times while you are working on it.
      </p>

      <h3>Navigation and actions</h3>
      <p>
        <b>Right-click on a tree node</b> to get the menu for renaming the node, deleting the node and creating children nodes.
      </p>

      <p>
        <b>Dragging</b> can be performed on any node other than root. Dropping can be done on any node.
      </p>

      <p>
        <b>Panning</b> can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.
      </p>

      <p>
        <b>Zooming</b> is performed by either double clicking on an empty part of the SVG or by scrolling the mouse-wheel. To Zoom out hold shift when double-clicking.
      </p>

      <p>
        <b>Expanding and collapsing of nodes</b> is achieved by clicking on the desired node.
      </p>

      <p>
        <b>Do not refresh the page while you are editing the tree to avoid that the current tree is cleared.</b>
Matija Obreza's avatar
Matija Obreza committed
190 191
      </p>
    </div>
Matija Obreza's avatar
Matija Obreza committed
192
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
193 194
  </div>

Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221
  <div id="CreditsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">CREDITS</h2>
    <div class="text">
      <p>Credits for contributing to the development of the Diversity Trees (in alphabetical order and to be updated in the future, as this work is still in progress):</p>
    </div>

    <h3>Project leader:</h3>
    <ul>
      <li>Lusty, Charlotte (Global Crop Diversity Trust)</li>
    </ul>

    <h3>Banana Diversity Tree:</h3>
    <ul>
      <li>Daniels, Jeff (Queensland Department of Agriculture and Fisheries)</li>
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
      <li>Janssens, Steven (Botanic Garden Meise)</li>
      <li>Rouard, Mathieu (Bioversity)</li>
      <li>Roux, Nicolas (Bioversity)</li>
      <li>Ruas, Max (Bioversity)</li>
      <li>Sardos, Julie (Bioversity)</li>
      <li>Swennen, Rory (KU Leuven)</li>
      <li>Van de Houwe, Inez (KU Leuven)</li>
      <li>Van Hintum, Theo (CGN, Wageningen Plant Research)</li>
    </ul>

    <h3>Barley Diversity Tree:</h3>
    <ul>
Peter Giovannini's avatar
Peter Giovannini committed
222
      <li>Capettini, Flavio (Alberta, Agriculture and Forestry)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
223
      <li>Kilian, Benjamin (Global Crop Diversity Trust)</li>
Peter Giovannini's avatar
Peter Giovannini committed
224
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
225 226 227 228 229 230
      <li>Van Hintum, Theo (CGN, Wageningen Plant Research)</li>
    </ul>

    <h3>Bean (Phaseolus bean) Diversity Tree:</h3>
    <ul>
      <li>Debouck, Daniel (CIAT)</li>
Peter Giovannini's avatar
Peter Giovannini committed
231 232 233 234 235 236 237
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
    </ul>
    
    <h3>Maize Diversity Tree:</h3>
    <ul>
      <li>Costich, Denise (CIMMYT)</li>
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
238 239 240 241 242 243 244 245 246 247 248 249 250 251
    </ul>

    <h3>Potato Diversity Tree:</h3>
    <ul>
      <li>Anglin, Noelle (CIP)</li>
      <li>Chavez, Oswaldo (CIP)</li>
      <li>Ellis, David (CIP)</li>
      <li>Hoekstra, Roel (CGN, Wageningen Plant Research)</li>
      <li>Gomez, Rene (CIP)</li>
      <li>Van Hintum, Theo (CGN, Wageningen Plant Research)</li>
    </ul>

    <h3>Rice Diversity Tree:</h3>
    <ul>
Peter Giovannini's avatar
Peter Giovannini committed
252
      <li>Ndjiondjop, Marie-Noelle (Africa Rice Center)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
253 254
      <li>McCouch, Susan (Cornell University)</li>
      <li>Sackville Hamilton, Ruaraidh (IRRI)</li>
Peter Giovannini's avatar
Peter Giovannini committed
255
      <li>Semagn, Kassa (University of Alberta)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
256 257 258 259 260
      <li>Van Hintum, Theo (CGN, Wageningen Plant Research)</li>
    </ul>

    <h3>Wheat Diversity Tree:</h3>
    <ul>
Peter Giovannini's avatar
Peter Giovannini committed
261
      <li>Bassi, Filippo (ICARDA)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
262
      <li>Kilian, Benjamin (Global Crop Diversity Trust)</li>
Peter Giovannini's avatar
Peter Giovannini committed
263
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
264 265 266 267 268
      <li>Payne, Thomas (CIMMYT)</li>
      <li>Van Slageren, Michiel (RBG Kew)</li>
      <li>Van Hintum, Theo (CGN, Wageningen Plant Research)</li>
    </ul>

Peter Giovannini's avatar
Peter Giovannini committed
269 270 271 272 273 274 275
    <h3>Sorghum Diversity Tree:</h3>
    <ul>
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
      <li>Upadhyaya, Hari (Icrisat)</li>
    </ul>


Maxym Borodenko's avatar
Credits  
Maxym Borodenko committed
276 277 278 279 280 281 282 283 284 285 286 287 288
    <h3>Tree editor:</h3>
    <ul>
      <li>Obreza, Matija</li>
      <li>AimProSoft, <a href="https://www.aimprosoft.com/" target="_blank" rel="nofollow">www.aimprosoft.com</a></li>
    </ul>

    <h3>Project implementation:</h3>
    <ul>
      <li>Giovannini, Peter (Consultant for the Global Crop Diversity Trust)</li>
    </ul>
    <a class="close-button" data-close aria-label="Close">&#215;</a>
  </div>

Adam Feuer's avatar
Adam Feuer committed
289
</body>
Matija Obreza's avatar
Matija Obreza committed
290

Adam Feuer's avatar
Adam Feuer committed
291
</html>