Add dialog to be used for edge filtering #232

fedarko · Jul 15, 2017 · b466cbc · b466cbc
1 parent 57a0ae5
commit b466cbc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/viewer/index.html b/viewer/index.html
@@ -366,8 +366,8 @@ <h4>Display Options</h4>
 
                 <p>
                 <button class='btn btn-default btn-sm disabled'
-                    disabled="disabled" id='edgeWeightPrefsBtn'
-                    onclick='openEdgeWeightDialog();'>
+                    disabled="disabled" id='filterEdgesButton'
+                    onclick='openEdgeFilteringDialog();'>
                     <span class="glyphicon glyphicon-filter"></span> &nbsp;
                     <span>Filter edges by weight</span>
                 </button>
@@ -959,6 +959,29 @@ <h4 class="modal-title">Initialization Settings</h4>
                 </div> <!-- end modal-content div -->
             </div> <!-- end modal-dialog div -->
         </div> <!-- end modal div -->
+        <!-- Edge filtering dialog -->
+        <div class="modal fade" tabindex="-1" role="dialog"
+            id='edgeFilteringDialog'>
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close"
+                            data-dismiss="modal" aria-label="Close dialog">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                        <h4 class="modal-title">Edge filtering</h4>
+                    </div> <!-- end modal-header div -->
+                    <div class="modal-body">
+                        (fancy stuff goes here)
+                    </div> <!-- end modal-body div -->
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default"
+                            data-dismiss="modal">Close
+                        </button>
+                    </div> <!-- end modal-footer div -->
+                </div> <!-- end modal-content div -->
+            </div> <!-- end modal-dialog div -->
+        </div> <!-- end modal div -->
         <!-- Assembly info dialog -->
         <div class="modal fade" tabindex="-1" role="dialog" id='infoDialog'>
             <div class="modal-dialog" role="document">

diff --git a/viewer/js/xdot2cy.js b/viewer/js/xdot2cy.js
@@ -1271,6 +1271,7 @@ function disableVolatileControls() {
     $("#cullEdgesInput").prop("disabled", true);
     $("#cullEdgesInput").val("0"); // reset to avoid confusion
     disableButton("cullEdgesButton");
+    disableButton("filterEdgesButton");
     disableButton("reduceEdgesButton");
     disableButton("layoutButton");
     disableButton("scaffoldFileselectButton");
@@ -1901,6 +1902,7 @@ function finishDrawComponent(cmpRank, componentNodeCount, componentEdgeCount,
             // weights (multiplicity or bundle size)
             $("#cullEdgesInput").prop("disabled", false);
             enableButton("cullEdgesButton");
+            enableButton("filterEdgesButton");
         }
         if (componentEdgeCount > 0) {
             enableButton("reduceEdgesButton");
@@ -2175,6 +2177,15 @@ function exportGraphView() {
     }
 }
 
+/* Opens the dialog for filtering edges. */ 
+function openEdgeFilteringDialog() {
+    $("#edgeFilteringDialog").modal();
+    // TODOs:
+    // -move edge filtering textbox to dialog
+    // -add d3 chart stuff
+    // -etc
+}
+
 /* Hides edges below a minimum edge weight (multiplicity or bundle size,
  * depending on the assembly graph that has been loaded).
  * This should only be called if the assembly graph that has been loaded has