Add UI skeleton of diff cmp selection methods

For #16.

Next, need to make selecting an option:

1. change the text shown in the main button of the dropdown
2. update the UI elements available in the Drawing section --
   each should have a unique configuration, as described in #16.

metagenomescope/support_files/index.html

@@ -143,6 +143,72 @@ <h4 style="margin-top: 26px;">About</h4>
             <div id="connectedComponentControls">
                 <h4>Drawing</h4>
 
+                <div class="input-group input-group-sm">
+                    <div class="input-group-btn">
+                        <!-- https://getbootstrap.com/docs/3.3/components/#dropdowns,
+                             and also based on the other ID/Label dropdown stuff
+                             below for node searching
+                        -->
+                        <button
+                            class="btn btn-default btn-sm disabled persistentCtrl dropdown-toggle"
+                            type="button"
+                            id="cmpSelectionMethodDropdown"
+                            data-toggle="dropdown"
+                            disabled="disabled"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                        >
+                            <span
+                                class="glyphicon glyphicon-star"
+                                aria-hidden="true"
+                            ></span
+                            >&nbsp; Draw a single component
+                            <span class="caret"></span>
+                        </button>
+                        <ul
+                            class="dropdown-menu"
+                            aria-labelledby="cmpSelectionMethodDropdown"
+                        >
+                            <li>
+                                <a class="btn-sm"
+                                    ><span
+                                        class="glyphicon glyphicon-star"
+                                        aria-hidden="true"
+                                    ></span
+                                    >&nbsp; Draw a single component</a
+                                >
+                            </li>
+                            <li>
+                                <a class="btn-sm"
+                                    ><span
+                                        class="glyphicon glyphicon-pushpin"
+                                        aria-hidden="true"
+                                    ></span
+                                    >&nbsp; Draw component containing a node</a
+                                >
+                            </li>
+                            <li>
+                                <a class="btn-sm"
+                                    ><span
+                                        class="glyphicon glyphicon-sort-by-attributes"
+                                        aria-hidden="true"
+                                    ></span
+                                    >&nbsp; Draw range of components</a
+                                >
+                            </li>
+                            <li>
+                                <a class="btn-sm"
+                                    ><span
+                                        class="glyphicon glyphicon-globe"
+                                        aria-hidden="true"
+                                    ></span
+                                    >&nbsp; Draw all available components</a
+                                >
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
                 <div class="input-group input-group-sm">
                     <span class="input-group-btn">
                         <button
@@ -193,7 +259,7 @@ <h4>Drawing</h4>
                         class="glyphicon glyphicon-pencil"
                         aria-hidden="true"
                     ></span>
-                    &nbsp; Draw connected component
+                    &nbsp; Draw
                 </button>
                 <hr />
             </div>

metagenomescope/support_files/js/app-manager.js

@@ -112,6 +112,7 @@ define(["jquery", "cytoscape", "utils", "dom-utils"], function (
 
         draw() {
             var componentsToDraw = this.getComponentsToDraw();
+            console.log("Drawing components " + componentsToDraw);
             // TODO: (This is just replicating drawComponent().)
             // -disable volatile controls
             // -if cy !== null, destroy graph