From 96fa8af5c06407e9a5ff7495ff0b2dc0788be976 Mon Sep 17 00:00:00 2001
From: Olaotan Lawal <olaotan104@gmail.com>
Date: Sun, 22 Oct 2023 23:34:48 +0100
Subject: [PATCH] #797 Introduced Doc for geneTable filtering.

---
 .../html/featureDocs/gene-table-filter.md     | 105 ++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 client-base/src/main/webapp/html/featureDocs/gene-table-filter.md

diff --git a/client-base/src/main/webapp/html/featureDocs/gene-table-filter.md b/client-base/src/main/webapp/html/featureDocs/gene-table-filter.md
new file mode 100644
index 000000000..ba65dd9ef
--- /dev/null
+++ b/client-base/src/main/webapp/html/featureDocs/gene-table-filter.md
@@ -0,0 +1,105 @@
+
+# Genetable filter doc
+
+This documentation aim is to work you through how Knetminer genetable filters works. It showcase the code structure in `gene-table-filter.js`. 
+
+## Genes-table-filtering.js 
+This file contains the JavaScript scripts that handles the knetscore and graph distance filters present in knetminer's geneview. It houses three Objects knetscoreFilter, graphDistanceFilter and geneTableFilterMgr and it can found [here][10]
+
+KnetScoreFilter object house methods that handles the functionalities associated with knetminer geneview knetscore filters, within the knetScoreFilter
+```
+// Detects min and max knetscore values from genetable data.
+detectRange (tableData)
+{
+    ...
+}
+
+// Sets min & max range values after both values are detected in detectRange() above.
+setRangeValue(value, rangeType)
+{
+    ...
+}
+
+// Handles onchange event triggered when left thumb of geneview slider is triggered
+// Takes min input HTML object as paramter
+handleLeftThumb(minElement)
+{
+    ...
+}
+
+// Handles onchange event triggered when right thumb of geneview slider is triggered
+handleRightThumb(maxElement)
+{
+    ...
+}
+
+//CSS style helper function takes input value and direction parameter to signify wether min or max is being triggered.
+setScorePosition (inputValue, direction)
+{
+    ...
+}
+
+// renders knetscore slider to knetminer UI
+renderUi()
+{
+    ...
+};
+```
+
+graphDistanceFilter object houses methods handling functionalities associated with geneview graph distance filter.
+```
+    // MaxNumber property used for comparism reasons to check for maximum distance within genetable data.
+    maxNumber : -Infinity
+
+    // Sets the maximum graph distance value from genetable data.
+    detectRange(tableData)
+    {
+        ...
+    }
+    // Creates HTML select element based maximum graph distance.
+    createSelectElement(){
+        ...
+    }
+    // Renders graph distance drop-down element to knetminer UI.
+    renderUi()
+    {
+        ...
+    }
+
+```
+
+geneTableFilterMgr object handles management of graphdistance and knetscore filters 
+```
+// TableData property used to store the genetable data
+tableData:[]
+
+// Saves tableData
+setup(data)
+{
+    ...
+}
+// Method renders graphdistance and knetscore filters to UI and called in setup() above.
+renderFiltersToUi()
+{
+    ...
+}
+
+//Method called to handle events triggered by graph distance and kentscore value changes
+filterByDistanceAndScore(event)
+{
+    ...
+}
+
+// Method renders filtered table, called above
+renderFilteredTable(table)
+{
+    ...
+}
+// Toggle visibility of geneview table bodybased on length filtered table 
+// When filtered table length is less than one, the table body is not visible.
+// Called in filterByDistanceAndScore().
+toggleTableState(dataLength)
+```
+
+[10]: https://github.com/Rothamsted/knetminer/blob/master/client-base/src/main/webapp/html/javascript/genes-table-filtering.js#L133
+