arangodb/js/apps/system/aardvark/frontend/js/templates/graphView.ejs

<%
var ds = [], es = [],
sortF = function(e) {
  return e.toLowerCase();
};
col.each(function(m) {
  switch (m.get("type")) {
    case "document":
      ds.push(m.get("name"));
      break;
    case "edge":
      es.push(m.get("name"));
      break;
  }
});
ds = _.sortBy(ds, sortF);
es = _.sortBy(es, sortF);
gs = _.sortBy(gs, sortF);
%>
<div id="background">
  <ul class="thumbnails2">
    <div class="headerBar">
      <a class="arangoHeader">Graph Viewer Configuration</a>
    </div>
  </ul>

  <div class="content">
    <form action="javascript:void(0);" autocomplete="on" class="form-horizontal" id="creationDialog">
      <fieldset>
        <div class="control-group">
          
          <fieldset id="datasoure">
            <legend class="gv_inner">Datasource:</legend>
          
            <div class="controls">
              <label class="radio">
                <input type="radio" name="loadtype" id="useCollections" checked>
                Select existing collections
              </label>
            </div>
          
            <div id="collection_config">
              <label for="nodeCollection" class="control-label">Vertex collection</label>
              <div class="controls">
                <select id="nodeCollection" name="nodeCollection">
                <%_.each(ds, function(d) {%>
                  <option value="<%= d %>"><%= d %></option>
                <%}); %>
                </select>
              </div>
              <label for="edgeCollection" class="control-label">Edge collection</label>
              <div class="controls">
                <select id="edgeCollection" name="edgeCollection">
                <%_.each(es, function(e) {%>
                  <option value="<%= e %>"><%= e %></option>
                <%}); %>
                </select>
              </div>
            </div>

            <div class="controls">
              <label class="radio">
                <input type="radio" name="loadtype" id="useGraphs">
                Select an existing graph
              </label>
            </div>
          
            <div id="graph_config" style="display:none">
              <label for="graph" class="control-label">Graph-Name</label>
              <div class="controls">
                <select id="graphSelected" name="graph">
                <%_.each(gs, function(g) {%>
                  <option value="<%= g %>"><%= g %></option>
                <%}); %>
                </select>
              </div>
            </div>
            <div class="controls gv_manageButtonContainer">
              <button type="submit" class="btn btn-primary" id="manageGraphs">Manage Graphs</button>
            </div>
          </div>

        </fieldset>
              
        <div class="accordion" id="advancedGraphOptions">

          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#advancedGraphOptions" href="#advancedOptions">
                Advanced
              </a>
            </div>

            <div id="advancedOptions" class="accordion-body collapse out">
              <div class="accordion-inner">
                
                <div class="control-group">
                  <label for="undirected" class="control-label">Treat graph as undirected</label>
                  <div class="controls">
                    <input id="undirected" type="checkbox" name="undirected" class="input-xlarge" checked>
                  </div>
                </div>
                
                <div class="control-group">
                  <label for="randomStart" class="control-label">Display random vertex at start</label>
                  <div class="controls">
                    <input id="randomStart" type="checkbox" name="randomStart" class="input-xlarge" checked>
                  </div>
                </div>
                
                
                <fieldset id="label_list">
                  <legend class="gv_inner">Labeling of vertices:</legend>
                  <div class="control-group">
                    <label for="label_1" class="control-label">Attribute 1</label>
                    <div class="controls">
                      <input id="label_1" type="text" name="label_1" placeholder="Attribute" maxlength="75" class="input-xlarge" value="_key">
                      <button id="add_label" class="graphViewer-icon-button gv-icon-small add">
                      </button>
                    </div>
                  </div>
                </fieldset>              
 
                <div class="control-group">
                  <label class="radio">
                    <input id="samecolour" type="radio" name="colour" class="gv_radio_button" checked>
                    Use this attribute for colouring, too
                  </label>
                  <label class="radio">
                    <input id="differentcolour" type="radio" name="colour" class="gv_radio_button">
                    Use different attribute for colouring
                  </label>
                  <div class="control-group" style="display:none" id="colourAttribute_config">
                    <fieldset id="colour_list">
                      <legend class="gv_inner">Colouring of vertices:</legend>
                      <div class="control-group">
                        <label for="colour_1" class="control-label">Attribute 1</label>
                        <div class="controls">
                          <input id="colour_1" type="text" name="colour_1" placeholder="Attribute" maxlength="75" class="input-xlarge" value="_key">
                          <button id="add_colour" class="graphViewer-icon-button gv-icon-small add">
                          </button>
                        </div>
                      </div>
                    </fieldset>              
                  </div>
                </div>
                
                
                <fieldset id="group_by_list">
                  <legend class="gv_inner">Grouping of vertices:</legend>
                  
                  <div class="control-group">
                    <label for="group_by_1" class="control-label">Attribute 1</label>
                    <div class="controls">
                      <input id="group_by_1" type="text" name="group_by_1" placeholder="Attribute" maxlength="75" class="input-xlarge">
                      <button id="add_group_by" class="graphViewer-icon-button gv-icon-small add">
                      </button>
                    </div>
                  </div>
                  
                </fieldset>              
              </div>
            </div>
          </div>
        </div>
      
         
        <div class="control-group">
          <div class="controls">
            <button type="submit" class="btn btn-primary" id="createViewer" >Start</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>