index.html 6.42 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>
Matija Obreza's avatar
Matija Obreza committed
32 33 34
              </ul>
            </li>
          </ul>
Matija Obreza's avatar
Matija Obreza committed
35
        </div>
Matija Obreza's avatar
Matija Obreza committed
36 37 38 39 40 41
        <div class="top-bar-right">
          <ul class="menu">
            <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
42 43
        </div>
      </div>
Matija Obreza's avatar
Matija Obreza committed
44 45 46 47 48
    </div>
    <div class="maincontent">
      <div id="tree-container"></div>
    </div>
  </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
49

Matija Obreza's avatar
Matija Obreza committed
50
  <div id="RenameNodeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Maxym Borodenko's avatar
Maxym Borodenko committed
51 52
    <h2 id="modalTitle">Rename Node</h2>
    <form id="RenameNodeForm">
Matija Obreza's avatar
Matija Obreza committed
53 54
      <div class="row">
        <div class="large-12 columns">
Matija Obreza's avatar
Matija Obreza committed
55 56 57 58
          <label>
              Node name
              <input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
          </label>
Maxym Borodenko's avatar
Maxym Borodenko committed
59
        </div>
Matija Obreza's avatar
Matija Obreza committed
60 61 62 63
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
Adam Feuer's avatar
Adam Feuer committed
64
        </div>
Matija Obreza's avatar
Matija Obreza committed
65
        <div class="large-4 columns">
Matija Obreza's avatar
Matija Obreza committed
66
          <a href="#" data-close class="button info closeModal">Cancel</a>
67
          <button type="submit" class="button success">Rename</button>
Matija Obreza's avatar
Matija Obreza committed
68 69
        </div>
      </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
70
    </form>
Matija Obreza's avatar
Matija Obreza committed
71
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
72
  </div>
Adam Feuer's avatar
Adam Feuer committed
73

Matija Obreza's avatar
Matija Obreza committed
74
  <div id="CreateNodeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Maxym Borodenko's avatar
Maxym Borodenko committed
75 76
    <h2 id="modalTitle">Create Node</h2>
    <form id="CreateNodeForm">
Matija Obreza's avatar
Matija Obreza committed
77 78 79
      <div class="row">
        <div class="large-12 columns">
          <label>Node name
Maxym Borodenko's avatar
Maxym Borodenko committed
80
                    <input type="text" class="inputName" id='CreateNodeName' placeholder="node name"/>
Adam Feuer's avatar
Adam Feuer committed
81
                </label>
Maxym Borodenko's avatar
Maxym Borodenko committed
82
        </div>
Matija Obreza's avatar
Matija Obreza committed
83 84 85 86 87 88
      </div>
      <div class="row">
        <div class="large-8 columns">
          &nbsp;
        </div>
        <div class="large-4 columns">
Matija Obreza's avatar
Matija Obreza committed
89
          <a href="#" data-close class="button info closeModal">Cancel</a>
90
          <button type="submit" class="button success">Create</button>
Adam Feuer's avatar
Adam Feuer committed
91
        </div>
Matija Obreza's avatar
Matija Obreza committed
92
      </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
93
    </form>
Matija Obreza's avatar
Matija Obreza committed
94
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
95
  </div>
Adam Feuer's avatar
Adam Feuer committed
96

Matija Obreza's avatar
Matija Obreza committed
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126

  <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>
      <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>
127
          <button type="submit" class="button success">Load tree</button>
Matija Obreza's avatar
Matija Obreza committed
128 129 130 131 132 133
        </div>
      </div>
    </form>
    <a class="close-button" data-close aria-label="Close">&#215;</a>
  </div>

Matija Obreza's avatar
Matija Obreza committed
134
  <div id="InstructionsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
Matija Obreza's avatar
Matija Obreza committed
135
    <h2 id="modalTitle">How to use the interactive tree editor</h2>
Matija Obreza's avatar
Matija Obreza committed
136
    <div class="text">
Matija Obreza's avatar
Matija Obreza committed
137 138 139 140 141
      <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>

Matija Obreza's avatar
Matija Obreza committed
142
      <h3>Uploading the tree</h2>
Matija Obreza's avatar
Matija Obreza committed
143
      <p>
Matija Obreza's avatar
Matija Obreza committed
144 145
        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
146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
      </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
176 177
      </p>
    </div>
Matija Obreza's avatar
Matija Obreza committed
178
    <a class="close-button" data-close aria-label="Close">&#215;</a>
Matija Obreza's avatar
Matija Obreza committed
179 180
  </div>

Adam Feuer's avatar
Adam Feuer committed
181
</body>
Matija Obreza's avatar
Matija Obreza committed
182

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