From 7c58e22aa8df7270378e22fd77a5f90f68b01340 Mon Sep 17 00:00:00 2001
From: Trent Palmer <trenttdually@gmail.com>
Date: Sat, 14 Aug 2021 17:42:01 -0700
Subject: [PATCH] make columns selectable

---
 rank_hugo_themes.py                           |   2 +-
 templates/base.html                           |   6 +-
 templates/js/buildPage.js                     |  89 +++----
 templates/js/buildSelectionInputs.js          |  47 ++++
 templates/js/buildSelectionMenu.js            | 222 ++++++------------
 templates/js/buildSortByDiv.js                |   1 +
 .../js/buildTagAndFeatureSelectionDivs.js     |  67 ++++++
 .../buildTagAndFeatureSelectionHeadingRows.js | 105 +++++++++
 .../js/buildTagAndFeatureSelectionInputs.js   |  68 ------
 templates/js/buildThemeTableRow.js            |  96 +++++---
 templates/js/getAvailableTagsAndFeatures.js   |   2 +
 templates/js/selectionMenuCollapse.js         |  28 ++-
 12 files changed, 427 insertions(+), 306 deletions(-)
 create mode 100644 templates/js/buildSelectionInputs.js
 create mode 100644 templates/js/buildTagAndFeatureSelectionDivs.js
 create mode 100644 templates/js/buildTagAndFeatureSelectionHeadingRows.js
 delete mode 100644 templates/js/buildTagAndFeatureSelectionInputs.js

diff --git a/rank_hugo_themes.py b/rank_hugo_themes.py
index 8c4a242..001a9f4 100755
--- a/rank_hugo_themes.py
+++ b/rank_hugo_themes.py
@@ -472,7 +472,7 @@ if __name__ == "__main__":
     '''
     or test with
     `
-    python -c'import rank_hugo_themes; rank_hugo_themes.parse_themes_toml_for_each_hugo_themes() ; rank_hugo_themes.generate_report()''
+    python3 -c'import rank_hugo_themes; rank_hugo_themes.parse_themes_toml_for_each_hugo_themes() ; rank_hugo_themes.generate_report()'
     `
     '''
     get_hugo_themes_list()
diff --git a/templates/base.html b/templates/base.html
index 835f9c9..1aae139 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -21,16 +21,18 @@
       <button type="button" id="button-for-filter-by-features">Filter By Features</button>
       <button type="button" id="button-for-filter-by-tags-and-features">Filter By Tags &amp; Features</button>
     </div>
-    <div id="selection-menu">
+    <div id="selection-menu" style="margin-bottom: 1rem;">
     </div>
     <div id="results">
     </div>
     <script>
 var themes = {{ themes }};
 {% include 'js/buildButton.js' %}
-{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
+{% include 'js/buildSelectionInputs.js' %}
 {% include 'js/getAvailableTagsAndFeatures.js' %}
 {% include 'js/buildSortByDiv.js' %}
+{% include 'js/buildTagAndFeatureSelectionHeadingRows.js' %}
+{% include 'js/buildTagAndFeatureSelectionDivs.js' %}
 {% include 'js/buildSelectionMenu.js' %}
 {% include 'js/buildThemeTableRow.js' %}
 {% include 'js/buildPage.js' %}
diff --git a/templates/js/buildPage.js b/templates/js/buildPage.js
index 1ad518e..4f6321f 100644
--- a/templates/js/buildPage.js
+++ b/templates/js/buildPage.js
@@ -7,26 +7,6 @@ function getSortBy() {
   }
 }
 
-function getTagSortBy() {
-  let tagSortByNumThemes = document.getElementById("tagSortByNumThemes");
-  if (tagSortByNumThemes === null) {
-    return "numThemes";
-  } else {
-    return tagSortByNumThemes.checked ? "numThemes" : "name";
-  }
-}
-
-function getFeatureSortBy() {
-  let featureSortByNumThemes = document.getElementById(
-    "featureSortByNumThemes"
-  );
-  if (featureSortByNumThemes === null) {
-    return "numThemes";
-  } else {
-    return featureSortByNumThemes.checked ? "numThemes" : "name";
-  }
-}
-
 function getSortedThemes(themeList, sortedBy) {
   if (sortedBy === "date") {
     return themeList.sort((a, b) => b.date_in_seconds - a.date_in_seconds);
@@ -44,6 +24,22 @@ function getSelectedTags() {
   }
 }
 
+function getSelectedColumns() {
+  let columnSelectionInputs = document.getElementsByClassName(
+    "columnSelectionInput"
+  );
+  if (columnSelectionInputs.length > 0) {
+    let checked = [...columnSelectionInputs].filter((x) => x.checked);
+    if (checked.length > 0) {
+      return checked.map((y) => y.id.slice(0, -23));
+    } else {
+      return ["cname", "date", "num_stars", "commit"];
+    }
+  } else {
+    return ["cname", "date", "num_stars", "commit"];
+  }
+}
+
 function getSelectedFeatures() {
   let featureSelectionInputs = document.getElementsByClassName(
     "featureSelectionInput"
@@ -76,6 +72,8 @@ function getDiplayState() {
   let dState = {};
   [
     "sortByRow",
+    "columnSelectionHeadingRow",
+    "columnSelectionRow",
     "tagSelectionHeadingRow",
     "tagSelectionRow",
     "featureSelectionHeadingRow",
@@ -84,6 +82,18 @@ function getDiplayState() {
   return dState;
 }
 
+let tableColumns = [
+  { headingName: "cname", headingText: "theme" },
+  { headingName: "date", headingText: "date" },
+  { headingName: "num_stars", headingText: "stars" },
+  { headingName: "commit", headingText: "commit" },
+  { headingName: "min_ver", headingText: "minVer" },
+  { headingName: "license", headingText: "license" },
+  { headingName: "desc", headingText: "desc" },
+  { headingName: "tags", headingText: "tags" },
+  { headingName: "features", headingText: "features" },
+];
+
 function buildResults() {
   let resultsDiv = document.getElementById("results");
   resultsDiv.innerHTML = "";
@@ -95,38 +105,31 @@ function buildResults() {
   let resultsTableHeadRow = document.createElement("tr");
   resultsDiv.appendChild(resultsTable);
   resultsTable.appendChild(resultsTableHeadRow);
+  let selectedColumns = getSelectedColumns();
 
-  let tableHeadingVals = [
-    {'headingName': 'cname', 'headingText': 'theme'},
-    {'headingName': 'date', 'headingText': 'date'},
-    {'headingName': 'num_stars', 'headingText': 'stars'},
-    {'headingName': 'commit', 'headingText': 'commit'},
-    {'headingName': 'min_ver', 'headingText': 'minVer'},
-    {'headingName': 'license', 'headingText': 'license'},
-    {'headingName': 'desc', 'headingText': 'desc'},
-    {'headingName': 'tags', 'headingText': 'tags'},
-    {'headingName': 'features', 'headingText': 'features'},
-  ];
-
-  tableHeadingVals.forEach((x) => {
-    let xTH = document.createElement("th");
-    xTH.innerHTML = x.headingText;
-    resultsTableHeadRow.appendChild(xTH);
-  });
+  tableColumns
+    .filter((y) => selectedColumns.includes(y.headingName))
+    .forEach((x) => {
+      let xTH = document.createElement("th");
+      xTH.innerHTML = x.headingText;
+      resultsTableHeadRow.appendChild(xTH);
+    });
 
   let selectedTags = getSelectedTags();
   let selectedFeatures = getSelectedFeatures();
   let sortedBy = getSortBy();
   let filtered_themes = getFilteredThemes(selectedTags, selectedFeatures);
   let sorted_themes = getSortedThemes(filtered_themes, sortedBy);
-  sorted_themes.forEach((theme) => addThemeTableRow(theme));
+  sorted_themes.forEach((theme) => addThemeTableRow(theme, selectedColumns));
 
+  // from buildSelectionMenu.js
   buildSelectionMenu(
-    sorted_themes,
-    sortedBy,
-    selectedTags,
-    selectedFeatures,
-    getDiplayState()
+    (sorted_themes = sorted_themes),
+    (sortedBy = sortedBy),
+    (selectedTags = selectedTags),
+    (selectedFeatures = selectedFeatures),
+    (selectedColumns = selectedColumns),
+    (dState = getDiplayState())
   );
 }
 
diff --git a/templates/js/buildSelectionInputs.js b/templates/js/buildSelectionInputs.js
new file mode 100644
index 0000000..cff600e
--- /dev/null
+++ b/templates/js/buildSelectionInputs.js
@@ -0,0 +1,47 @@
+// called from buildTagAndFeatureSelectionDivs.js
+function buildInput(item, selected, inpParent) {
+  let inputSelectionButton = document.createElement("button");
+  inputSelectionButton.style.maxWidth = "calc(50% - 2rem)";
+  inputSelectionButton.style.margin = ".5rem";
+  inputSelectionButton.style.display = "flex";
+  inputSelectionButton.style.alignItems = "center";
+
+  let selectionInput = document.createElement("input");
+  selectionInput.style.marginRight = "1rem";
+  selectionInput.type = "checkbox";
+  selectionInput.checked = selected ? true : false;
+  selectionInput.onclick = function () {
+    buildResults();
+  };
+  inputSelectionButton.appendChild(selectionInput);
+
+  let selectionInputLabel = document.createElement("label");
+  selectionInputLabel.style.textAlign = "left";
+  inputSelectionButton.appendChild(selectionInputLabel);
+  inputSelectionButton.onclick = function () {
+    selectionInput.checked = !selectionInput.checked;
+    buildResults();
+  };
+
+  if ("feature" in item) {
+    selectionInput.value = item.feature;
+    inputSelectionButton.style.width = "15rem";
+    selectionInputLabel.innerHTML = `${item.feature} (${item.num_themes})`;
+    selectionInput.classList.add("featureSelectionInput");
+  } else if ("tag" in item) {
+    selectionInput.value = item.tag;
+    inputSelectionButton.style.width = "12rem";
+    selectionInputLabel.innerHTML = `${item.tag} (${item.num_themes})`;
+    selectionInput.classList.add("tagSelectionInput");
+  } else if ("headingName" in item) {
+    selectionInput.value = `${item.headingName}-column`;
+    selectionInputLabel.innerHTML = item.headingText;
+    selectionInput.classList.add("columnSelectionInput");
+  }
+
+  selectionInput.id = `${selectionInput.value}-selection-input`;
+  selectionInput.name = `${selectionInput.id}`;
+  selectionInputLabel.for = `${selectionInput.id}`;
+
+  inpParent.appendChild(inputSelectionButton);
+}
diff --git a/templates/js/buildSelectionMenu.js b/templates/js/buildSelectionMenu.js
index 30a944e..f43b4ce 100644
--- a/templates/js/buildSelectionMenu.js
+++ b/templates/js/buildSelectionMenu.js
@@ -1,183 +1,101 @@
-function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy, dState) {
-  let tagSelectionHeadingRow = document.createElement("div");
-  tagSelectionHeadingRow.id = "tagSelectionHeadingRow";
-  tagSelectionHeadingRow.style.maxWidth = "100%";
-  tagSelectionHeadingRow.style.display = dState.tagSelectionHeadingRow;
-  tagSelectionHeadingRow.style.justifyContent = "space-around";
-  tagSelectionHeadingRow.style.alignItems = "center";
-
-  let tagSelectionHeading = document.createElement("h2");
-  tagSelectionHeading.innerHTML = "Select Tags";
-
-  let tagSortByNameInputButton = buildRadioButton(
-    (inputID = "tagSortByName"),
-    (inputName = "tagSortBy"),
-    (inputValue = "tagSortByName"),
-    (sortedBy = tagSortBy),
-    (sortedBySelector = "name"),
-    (labelText = "Name")
-  );
-
-  let tagSortByNumThemesInputButton = buildRadioButton(
-    (inputID = "tagSortByNumThemes"),
-    (inputName = "tagSortBy"),
-    (inputValue = "tagSortByNumThemes"),
-    (sortedBy = tagSortBy),
-    (sortedBySelector = "numThemes"),
-    (labelText = "nThemes")
-  );
-
-  tagSelectionHeadingRow.appendChild(tagSelectionHeading);
-  tagSelectionHeadingRow.appendChild(tagSortByNameInputButton);
-  tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputButton);
-  selectionMenuDiv.appendChild(tagSelectionHeadingRow);
-
-  let tagSortByNameInput = document.getElementById("tagSortByName");
-  tagSortByNameInputButton.onclick = function () {
-    if (!tagSortByNameInput.checked) {
-      tagSortByNameInput.checked = true;
-      buildResults();
-    }
-  };
-
-  let tagSortByNumThemesInput = document.getElementById("tagSortByNumThemes");
-  tagSortByNumThemesInputButton.onclick = function () {
-    if (!tagSortByNumThemesInput.checked) {
-      tagSortByNumThemesInput.checked = true;
-      buildResults();
-    }
-  };
+function getTagSortBy() {
+  let tagSortByNumThemes = document.getElementById("tagSortByNumThemes");
+  if (tagSortByNumThemes === null) {
+    return "numThemes";
+  } else {
+    return tagSortByNumThemes.checked ? "numThemes" : "name";
+  }
 }
 
-function buildFeatureSelectionHeadingRow(
-  selectionMenuDiv,
-  featureSortBy,
-  dState
-) {
-  let featureSelectionHeadingRow = document.createElement("div");
-  featureSelectionHeadingRow.id = "featureSelectionHeadingRow";
-  featureSelectionHeadingRow.style.maxWidth = "100%";
-  featureSelectionHeadingRow.style.display = dState.featureSelectionHeadingRow;
-  featureSelectionHeadingRow.style.justifyContent = "space-around";
-  featureSelectionHeadingRow.style.alignItems = "center";
-
-  let featureSelectionHeading = document.createElement("h2");
-  featureSelectionHeading.innerHTML = "Select Features";
-
-  let featureSortByNameInputButton = buildRadioButton(
-    (inputID = "featureSortByName"),
-    (inputName = "featureSortBy"),
-    (inputValue = "featureSortByName"),
-    (sortedBy = featureSortBy),
-    (sortedBySelector = "name"),
-    (labelText = "Name")
-  );
-
-  let featureSortByNumThemesInputButton = buildRadioButton(
-    (inputID = "featureSortByNumThemes"),
-    (inputName = "featureSortBy"),
-    (inputValue = "featureSortByNumThemes"),
-    (sortedBy = featureSortBy),
-    (sortedBySelector = "numThemes"),
-    (labelText = "nThemes")
-  );
-
-  featureSelectionHeadingRow.appendChild(featureSelectionHeading);
-  featureSelectionHeadingRow.appendChild(featureSortByNameInputButton);
-  featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputButton);
-  selectionMenuDiv.appendChild(featureSelectionHeadingRow);
-
-  let featureSortByNameInput = document.getElementById("featureSortByName");
-  featureSortByNameInputButton.onclick = function () {
-    if (!featureSortByNameInput.checked) {
-      featureSortByNameInput.checked = true;
-      buildResults();
-    }
-  };
-
-  let featureSortByNumThemesInput = document.getElementById(
+function getFeatureSortBy() {
+  let featureSortByNumThemes = document.getElementById(
     "featureSortByNumThemes"
   );
-  featureSortByNumThemesInputButton.onclick = function () {
-    if (!featureSortByNumThemesInput.checked) {
-      featureSortByNumThemesInput.checked = true;
-      buildResults();
-    }
-  };
+  if (featureSortByNumThemes === null) {
+    return "numThemes";
+  } else {
+    return featureSortByNumThemes.checked ? "numThemes" : "name";
+  }
 }
 
-function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState) {
-  let selectionMenuDiv = document.getElementById("selection-menu");
-  buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy, dState);
+function buildColumnSelectionHeadingRow(eParent, dState) {
+  let columnSelectionHeadingRow = document.createElement("div");
+  columnSelectionHeadingRow.id = "columnSelectionHeadingRow";
+  columnSelectionHeadingRow.style.maxWidth = "100%";
+  columnSelectionHeadingRow.style.display = dState.columnSelectionHeadingRow;
+  columnSelectionHeadingRow.style.alignItems = "center";
 
-  let tagSelectionRow = document.createElement("div");
-  tagSelectionRow.id = "tagSelectionRow";
-  tagSelectionRow.style.display = dState.tagSelectionRow;
-  tagSelectionRow.style.flexWrap = "wrap";
-  tagSelectionRow.style.justifyContent = "space-around";
+  let columnSelectionHeading = document.createElement("h2");
+  columnSelectionHeading.innerHTML = "Select Columns";
+  columnSelectionHeadingRow.appendChild(columnSelectionHeading);
+  eParent.appendChild(columnSelectionHeadingRow);
+}
 
-  selectionMenuDiv.appendChild(tagSelectionRow);
+function buildColumnSelectionDiv(selectedColumns, dState, eParent) {
+  buildColumnSelectionHeadingRow(eParent, dState);
 
-  availableTags
-    .filter((x) => selectedTags.includes(x.tag))
+  let columnSelectionRow = document.createElement("div");
+  columnSelectionRow.id = "columnSelectionRow";
+  columnSelectionRow.style.display = dState.columnSelectionRow;
+  columnSelectionRow.style.flexWrap = "wrap";
+  columnSelectionRow.style.justifyContent = "space-around";
+  eParent.appendChild(columnSelectionRow);
+
+  tableColumns
+    .filter((x) => selectedColumns.includes(x.headingName))
     .forEach((y) => {
-      buildTagSelectionInput(y, true, tagSelectionRow);
+      buildInput(y, true, columnSelectionRow);
     });
 
-  availableTags
-    .filter((x) => !selectedTags.includes(x.tag))
+  tableColumns
+    .filter((x) => !selectedColumns.includes(x.headingName))
     .forEach((y) => {
-      buildTagSelectionInput(y, false, tagSelectionRow);
-    });
-}
-
-function buildFeatureSelectionDiv(
-  selectedFeatures,
-  availableFeatures,
-  featureSortBy,
-  dState
-) {
-  let selectionMenuDiv = document.getElementById("selection-menu");
-  buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy, dState);
-
-  let featureSelectionRow = document.createElement("div");
-  featureSelectionRow.id = "featureSelectionRow";
-  featureSelectionRow.style.display = dState.featureSelectionRow;
-  featureSelectionRow.style.flexWrap = "wrap";
-  featureSelectionRow.style.justifyContent = "space-around";
-
-  selectionMenuDiv.appendChild(featureSelectionRow);
-
-  availableFeatures
-    .filter((x) => selectedFeatures.includes(x.feature))
-    .forEach((y) => {
-      buildFeatureSelectionInput(y, true, featureSelectionRow);
-    });
-
-  availableFeatures
-    .filter((x) => !selectedFeatures.includes(x.feature))
-    .forEach((y) => {
-      buildFeatureSelectionInput(y, false, featureSelectionRow);
+      buildInput(y, false, columnSelectionRow);
     });
 }
 
+// called from buildPage.js
 function buildSelectionMenu(
   sorted_themes,
   sortedBy,
   selectedTags,
   selectedFeatures,
+  selectedColumns,
   dState
 ) {
   let tagSortBy = getTagSortBy();
   let featureSortBy = getFeatureSortBy();
+  let selectionMenuDiv = document.getElementById("selection-menu");
+
+  // from getAvailableTagsAndFeatures.js
   let availableTags = getAvailableTags(sorted_themes, tagSortBy);
+  // from getAvailableTagsAndFeatures.js
   let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
+
+  // from buildSortByDiv.js
   buildSortByDiv(sortedBy, dState.sortByRow);
-  buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState);
+
+  buildColumnSelectionDiv(
+    (selectedColumns = selectedColumns),
+    (dState = dState),
+    (eParent = selectionMenuDiv)
+  );
+
+  // from buildTagAndFeatureSelectionDivs.js
+  buildTagSelectionDiv(
+    (selectedTags = selectedTags),
+    (availableTags = availableTags),
+    (tagSortBy = tagSortBy),
+    (dState = dState),
+    (eParent = selectionMenuDiv)
+  );
+
+  // from buildTagAndFeatureSelectionDivs.js
   buildFeatureSelectionDiv(
-    selectedFeatures,
-    availableFeatures,
-    featureSortBy,
-    dState
+    (selectedFeatures = selectedFeatures),
+    (availableFeatures = availableFeatures),
+    (featureSortBy = featureSortBy),
+    (dState = dState),
+    (eParent = selectionMenuDiv)
   );
 }
diff --git a/templates/js/buildSortByDiv.js b/templates/js/buildSortByDiv.js
index 243ab68..5b3e316 100644
--- a/templates/js/buildSortByDiv.js
+++ b/templates/js/buildSortByDiv.js
@@ -1,3 +1,4 @@
+// called from buildSelectionMenu.js
 function buildSortByDiv(sortedBy, sortByRowDisplay) {
   let menuDiv = document.getElementById("selection-menu");
   menuDiv.innerHTML = "";
diff --git a/templates/js/buildTagAndFeatureSelectionDivs.js b/templates/js/buildTagAndFeatureSelectionDivs.js
new file mode 100644
index 0000000..51e8352
--- /dev/null
+++ b/templates/js/buildTagAndFeatureSelectionDivs.js
@@ -0,0 +1,67 @@
+// called from buildSelectionMenu.js
+function buildTagSelectionDiv(
+  selectedTags,
+  availableTags,
+  tagSortBy,
+  dState,
+  eParent
+) {
+  // from buildTagAndFeatureSelectionHeadingRows.js
+  buildTagSelectionHeadingRow(eParent, tagSortBy, dState);
+
+  let tagSelectionRow = document.createElement("div");
+  tagSelectionRow.id = "tagSelectionRow";
+  tagSelectionRow.style.display = dState.tagSelectionRow;
+  tagSelectionRow.style.flexWrap = "wrap";
+  tagSelectionRow.style.justifyContent = "space-around";
+
+  eParent.appendChild(tagSelectionRow);
+
+  availableTags
+    .filter((x) => selectedTags.includes(x.tag))
+    .forEach((y) => {
+      // from buildSelectionInputs.js
+      buildInput(y, true, tagSelectionRow);
+    });
+
+  availableTags
+    .filter((x) => !selectedTags.includes(x.tag))
+    .forEach((y) => {
+      // from buildSelectionInputs.js
+      buildInput(y, false, tagSelectionRow);
+    });
+}
+
+// called from buildSelectionMenu.js
+function buildFeatureSelectionDiv(
+  selectedFeatures,
+  availableFeatures,
+  featureSortBy,
+  dState,
+  eParent
+) {
+  // from buildTagAndFeatureSelectionHeadingRows.js
+  buildFeatureSelectionHeadingRow(eParent, featureSortBy, dState);
+
+  let featureSelectionRow = document.createElement("div");
+  featureSelectionRow.id = "featureSelectionRow";
+  featureSelectionRow.style.display = dState.featureSelectionRow;
+  featureSelectionRow.style.flexWrap = "wrap";
+  featureSelectionRow.style.justifyContent = "space-around";
+
+  eParent.appendChild(featureSelectionRow);
+
+  availableFeatures
+    .filter((x) => selectedFeatures.includes(x.feature))
+    .forEach((y) => {
+      // from buildSelectionInputs.js
+      buildInput(y, true, featureSelectionRow);
+    });
+
+  availableFeatures
+    .filter((x) => !selectedFeatures.includes(x.feature))
+    .forEach((y) => {
+      // from buildSelectionInputs.js
+      buildInput(y, false, featureSelectionRow);
+    });
+}
diff --git a/templates/js/buildTagAndFeatureSelectionHeadingRows.js b/templates/js/buildTagAndFeatureSelectionHeadingRows.js
new file mode 100644
index 0000000..45642fd
--- /dev/null
+++ b/templates/js/buildTagAndFeatureSelectionHeadingRows.js
@@ -0,0 +1,105 @@
+// called from buildTagAndFeatureSelectionDivs.js
+function buildTagSelectionHeadingRow(eParent, tagSortBy, dState) {
+  let tagSelectionHeadingRow = document.createElement("div");
+  tagSelectionHeadingRow.id = "tagSelectionHeadingRow";
+  tagSelectionHeadingRow.style.maxWidth = "100%";
+  tagSelectionHeadingRow.style.display = dState.tagSelectionHeadingRow;
+  tagSelectionHeadingRow.style.justifyContent = "space-around";
+  tagSelectionHeadingRow.style.alignItems = "center";
+
+  let tagSelectionHeading = document.createElement("h2");
+  tagSelectionHeading.innerHTML = "Select Tags";
+
+  let tagSortByNameInputButton = buildRadioButton(
+    (inputID = "tagSortByName"),
+    (inputName = "tagSortBy"),
+    (inputValue = "tagSortByName"),
+    (sortedBy = tagSortBy),
+    (sortedBySelector = "name"),
+    (labelText = "Name")
+  );
+
+  let tagSortByNumThemesInputButton = buildRadioButton(
+    (inputID = "tagSortByNumThemes"),
+    (inputName = "tagSortBy"),
+    (inputValue = "tagSortByNumThemes"),
+    (sortedBy = tagSortBy),
+    (sortedBySelector = "numThemes"),
+    (labelText = "nThemes")
+  );
+
+  tagSelectionHeadingRow.appendChild(tagSelectionHeading);
+  tagSelectionHeadingRow.appendChild(tagSortByNameInputButton);
+  tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputButton);
+  eParent.appendChild(tagSelectionHeadingRow);
+
+  let tagSortByNameInput = document.getElementById("tagSortByName");
+  tagSortByNameInputButton.onclick = function () {
+    if (!tagSortByNameInput.checked) {
+      tagSortByNameInput.checked = true;
+      buildResults();
+    }
+  };
+
+  let tagSortByNumThemesInput = document.getElementById("tagSortByNumThemes");
+  tagSortByNumThemesInputButton.onclick = function () {
+    if (!tagSortByNumThemesInput.checked) {
+      tagSortByNumThemesInput.checked = true;
+      buildResults();
+    }
+  };
+}
+
+// called from buildTagAndFeatureSelectionDivs.js
+function buildFeatureSelectionHeadingRow(eParent, featureSortBy, dState) {
+  let featureSelectionHeadingRow = document.createElement("div");
+  featureSelectionHeadingRow.id = "featureSelectionHeadingRow";
+  featureSelectionHeadingRow.style.maxWidth = "100%";
+  featureSelectionHeadingRow.style.display = dState.featureSelectionHeadingRow;
+  featureSelectionHeadingRow.style.justifyContent = "space-around";
+  featureSelectionHeadingRow.style.alignItems = "center";
+
+  let featureSelectionHeading = document.createElement("h2");
+  featureSelectionHeading.innerHTML = "Select Features";
+
+  let featureSortByNameInputButton = buildRadioButton(
+    (inputID = "featureSortByName"),
+    (inputName = "featureSortBy"),
+    (inputValue = "featureSortByName"),
+    (sortedBy = featureSortBy),
+    (sortedBySelector = "name"),
+    (labelText = "Name")
+  );
+
+  let featureSortByNumThemesInputButton = buildRadioButton(
+    (inputID = "featureSortByNumThemes"),
+    (inputName = "featureSortBy"),
+    (inputValue = "featureSortByNumThemes"),
+    (sortedBy = featureSortBy),
+    (sortedBySelector = "numThemes"),
+    (labelText = "nThemes")
+  );
+
+  featureSelectionHeadingRow.appendChild(featureSelectionHeading);
+  featureSelectionHeadingRow.appendChild(featureSortByNameInputButton);
+  featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputButton);
+  eParent.appendChild(featureSelectionHeadingRow);
+
+  let featureSortByNameInput = document.getElementById("featureSortByName");
+  featureSortByNameInputButton.onclick = function () {
+    if (!featureSortByNameInput.checked) {
+      featureSortByNameInput.checked = true;
+      buildResults();
+    }
+  };
+
+  let featureSortByNumThemesInput = document.getElementById(
+    "featureSortByNumThemes"
+  );
+  featureSortByNumThemesInputButton.onclick = function () {
+    if (!featureSortByNumThemesInput.checked) {
+      featureSortByNumThemesInput.checked = true;
+      buildResults();
+    }
+  };
+}
diff --git a/templates/js/buildTagAndFeatureSelectionInputs.js b/templates/js/buildTagAndFeatureSelectionInputs.js
deleted file mode 100644
index 0d92462..0000000
--- a/templates/js/buildTagAndFeatureSelectionInputs.js
+++ /dev/null
@@ -1,68 +0,0 @@
-function buildTagSelectionInput(tag, selected, tagSelectionRow) {
-  let tagSelectionInputButton = document.createElement("button");
-  tagSelectionInputButton.style.width = "12rem";
-  tagSelectionInputButton.style.maxWidth = "calc(50% - 2rem)";
-  tagSelectionInputButton.style.margin = ".5rem";
-  tagSelectionInputButton.style.display = "flex";
-  tagSelectionInputButton.style.alignItems = "center";
-
-  let tagSelectionInput = document.createElement("input");
-  tagSelectionInput.style.marginRight = "1rem";
-  tagSelectionInput.type = "checkbox";
-  tagSelectionInput.id = tag.tag + "-selection-input";
-  tagSelectionInput.name = tag.tag + "-selection-input";
-  tagSelectionInput.value = tag.tag;
-  tagSelectionInput.checked = selected ? true : false;
-  tagSelectionInput.classList.add("tagSelectionInput");
-  tagSelectionInput.onclick = function () {
-    buildResults();
-  };
-  tagSelectionInputButton.appendChild(tagSelectionInput);
-
-  let tagSelectionInputLabel = document.createElement("label");
-  tagSelectionInputLabel.style.textAlign = "left";
-  tagSelectionInputLabel.for = tag.tag + "-selection-input";
-  tagSelectionInputLabel.innerHTML = tag.tag + " (" + tag.num_themes + ")";
-  tagSelectionInputButton.appendChild(tagSelectionInputLabel);
-  tagSelectionInputButton.onclick = function () {
-    tagSelectionInput.checked = !tagSelectionInput.checked;
-    buildResults();
-  };
-
-  tagSelectionRow.appendChild(tagSelectionInputButton);
-}
-
-function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
-  let featureSelectionInputButton = document.createElement("button");
-  featureSelectionInputButton.style.width = "15rem";
-  featureSelectionInputButton.style.maxWidth = "calc(50% - 2rem)";
-  featureSelectionInputButton.style.margin = ".5rem";
-  featureSelectionInputButton.style.display = "flex";
-  featureSelectionInputButton.style.alignItems = "center";
-
-  let featureSelectionInput = document.createElement("input");
-  featureSelectionInput.style.marginRight = "1rem";
-  featureSelectionInput.type = "checkbox";
-  featureSelectionInput.id = feature.feature + "-selection-input";
-  featureSelectionInput.name = feature.feature + "-selection-input";
-  featureSelectionInput.value = feature.feature;
-  featureSelectionInput.checked = selected ? true : false;
-  featureSelectionInput.classList.add("featureSelectionInput");
-  featureSelectionInput.onclick = function () {
-    buildResults();
-  };
-  featureSelectionInputButton.appendChild(featureSelectionInput);
-
-  let featureSelectionInputLabel = document.createElement("label");
-  featureSelectionInputLabel.style.textAlign = "left";
-  featureSelectionInputLabel.for = feature.feature + "-selection-input";
-  featureSelectionInputLabel.innerHTML =
-    feature.feature + " (" + feature.num_themes + ")";
-  featureSelectionInputButton.appendChild(featureSelectionInputLabel);
-  featureSelectionInputButton.onclick = function () {
-    featureSelectionInput.checked = !featureSelectionInput.checked;
-    buildResults();
-  };
-
-  featureSelectionRow.appendChild(featureSelectionInputButton);
-}
diff --git a/templates/js/buildThemeTableRow.js b/templates/js/buildThemeTableRow.js
index 1470785..95b6734 100644
--- a/templates/js/buildThemeTableRow.js
+++ b/templates/js/buildThemeTableRow.js
@@ -1,53 +1,71 @@
-function addThemeTableRow(theme) {
+function addThemeTableRow(theme, selectedColumns) {
   let resultsTable = document.getElementById("resultsTable");
   let resultsTableRow = document.createElement("tr");
 
-  let themeTD = document.createElement("td");
-  themeTD.innerHTML =
-    '<a href="' + theme.url + '" target="_blank">' + theme.cname + "</a>";
-  themeTD.style.minWidth = `${theme.cname.length / 6}rem`;
-  resultsTableRow.appendChild(themeTD);
+  if (selectedColumns.includes("cname")) {
+    let themeTD = document.createElement("td");
+    themeTD.innerHTML =
+      '<a href="' + theme.url + '" target="_blank">' + theme.cname + "</a>";
+    themeTD.style.minWidth = `${theme.cname.length / 6}rem`;
+    resultsTableRow.appendChild(themeTD);
+  }
 
-  let dateTD = document.createElement("td");
-  dateTD.innerHTML = theme.date;
-  dateTD.style.minWidth = "5rem";
-  resultsTableRow.appendChild(dateTD);
+  if (selectedColumns.includes("date")) {
+    let dateTD = document.createElement("td");
+    dateTD.innerHTML = theme.date;
+    dateTD.style.minWidth = "5rem";
+    resultsTableRow.appendChild(dateTD);
+  }
 
-  let starsTD = document.createElement("td");
-  starsTD.innerHTML = theme.num_stars;
-  resultsTableRow.appendChild(starsTD);
+  if (selectedColumns.includes("num_stars")) {
+    let starsTD = document.createElement("td");
+    starsTD.innerHTML = theme.num_stars;
+    resultsTableRow.appendChild(starsTD);
+  }
 
-  let commitTD = document.createElement("td");
-  commitTD.innerHTML = theme.commit;
-  resultsTableRow.appendChild(commitTD);
+  if (selectedColumns.includes("commit")) {
+    let commitTD = document.createElement("td");
+    commitTD.innerHTML = theme.commit;
+    resultsTableRow.appendChild(commitTD);
+  }
 
-  let minVerTD = document.createElement("td");
-  minVerTD.innerHTML = theme.min_ver;
-  resultsTableRow.appendChild(minVerTD);
+  if (selectedColumns.includes("min_ver")) {
+    let minVerTD = document.createElement("td");
+    minVerTD.innerHTML = theme.min_ver;
+    resultsTableRow.appendChild(minVerTD);
+  }
 
-  let licenseTD = document.createElement("td");
-  licenseTD.innerHTML = theme.license;
-  licenseTD.style.minWidth = `${theme.license.length / 7}rem`;
-  resultsTableRow.appendChild(licenseTD);
+  if (selectedColumns.includes("license")) {
+    let licenseTD = document.createElement("td");
+    licenseTD.innerHTML = theme.license;
+    licenseTD.style.minWidth = `${theme.license.length / 7}rem`;
+    resultsTableRow.appendChild(licenseTD);
+  }
 
-  let descTD = document.createElement("td");
-  descTD.innerHTML = theme.desc;
-  descTD.style.minWidth = `${theme.desc.length / 7}rem`;
-  resultsTableRow.appendChild(descTD);
+  if (selectedColumns.includes("desc")) {
+    let descTD = document.createElement("td");
+    descTD.innerHTML = theme.desc;
+    descTD.style.minWidth = `${theme.desc.length / 7}rem`;
+    resultsTableRow.appendChild(descTD);
+  }
 
-  let tagsTD = document.createElement("td");
-  let tL = theme.tags.length - 1;
-  tL += theme.tags.map((x) => x.length).reduce((a, b) => a + b, 0);
-  tagsTD.innerHTML = theme.tags;
-  tagsTD.style.minWidth = `${tL / 7}rem`;
-  resultsTableRow.appendChild(tagsTD);
+  if (selectedColumns.includes("tags")) {
+    let tagsTD = document.createElement("td");
+    let tL = theme.tags.length - 1;
+    tL += theme.tags.map((x) => x.length).reduce((a, b) => a + b, 0);
+    tagsTD.innerHTML = theme.tags;
+    tagsTD.style.minWidth = `${tL / 7}rem`;
+    resultsTableRow.appendChild(tagsTD);
+  }
 
-  let featuresTD = document.createElement("td");
-  let fL = theme.features.length - 1;
-  fL += theme.features.map((x) => x.length).reduce((a, b) => a + b, 0);
-  featuresTD.innerHTML = theme.features;
-  featuresTD.style.minWidth = `${fL / 7}rem`;
-  resultsTableRow.appendChild(featuresTD);
+  if (selectedColumns.includes("features")) {
+    let featuresTD = document.createElement("td");
+    let fL = theme.features.length - 1;
+    fL += theme.features.map((x) => x.length).reduce((a, b) => a + b, 0);
+    featuresTD.innerHTML = theme.features;
+    featuresTD.style.minWidth = `${fL / 7}rem`;
+    resultsTableRow.appendChild(featuresTD);
+  }
 
   resultsTable.appendChild(resultsTableRow);
 }
diff --git a/templates/js/getAvailableTagsAndFeatures.js b/templates/js/getAvailableTagsAndFeatures.js
index 5145262..0e09ee7 100644
--- a/templates/js/getAvailableTagsAndFeatures.js
+++ b/templates/js/getAvailableTagsAndFeatures.js
@@ -1,3 +1,4 @@
+// called from buildSelectionMenu.js
 function getAvailableFeatures(sorted_themes, featureSortBy) {
   let result = [];
   sorted_themes.forEach((x) => {
@@ -27,6 +28,7 @@ function getAvailableFeatures(sorted_themes, featureSortBy) {
   }
 }
 
+// called from buildSelectionMenu.js
 function getAvailableTags(sorted_themes, tagSortBy) {
   let result = [];
   sorted_themes.forEach((x) => {
diff --git a/templates/js/selectionMenuCollapse.js b/templates/js/selectionMenuCollapse.js
index e8b7faf..dc73bb1 100644
--- a/templates/js/selectionMenuCollapse.js
+++ b/templates/js/selectionMenuCollapse.js
@@ -1,5 +1,17 @@
+function showSelectionOptionsButtons() {
+  [
+    "button-for-showing-sort-option",
+    "button-for-showing-columns",
+    "button-for-filter-by-tags",
+    "button-for-filter-by-features",
+    "button-for-filter-by-tags-and-features",
+  ].forEach((x) => (document.getElementById(x).style.display = "inline-block"));
+}
+
 let closeableMenus = [
   "sortByRow",
+  "columnSelectionHeadingRow",
+  "columnSelectionRow",
   "tagSelectionHeadingRow",
   "tagSelectionRow",
   "featureSelectionHeadingRow",
@@ -43,19 +55,31 @@ document.getElementById("minus-button").onclick = function () {
 document.getElementById("button-for-showing-sort-option").onclick =
   function () {
     closeMenus();
+    showSelectionOptionsButtons();
+    this.style.display = "none";
     document.getElementById("sortByRow").style.display = "flex";
   };
 
-document.getElementById("button-for-showing-columns").onclick = function () {};
+document.getElementById("button-for-showing-columns").onclick = function () {
+  closeMenus();
+  showSelectionOptionsButtons();
+  this.style.display = "none";
+  document.getElementById("columnSelectionHeadingRow").style.display = "flex";
+  document.getElementById("columnSelectionRow").style.display = "flex";
+};
 
 document.getElementById("button-for-filter-by-tags").onclick = function () {
   closeMenus();
+  showSelectionOptionsButtons();
+  this.style.display = "none";
   document.getElementById("tagSelectionHeadingRow").style.display = "flex";
   document.getElementById("tagSelectionRow").style.display = "flex";
 };
 
 document.getElementById("button-for-filter-by-features").onclick = function () {
   closeMenus();
+  showSelectionOptionsButtons();
+  this.style.display = "none";
   document.getElementById("featureSelectionHeadingRow").style.display = "flex";
   document.getElementById("featureSelectionRow").style.display = "flex";
 };
@@ -63,6 +87,8 @@ document.getElementById("button-for-filter-by-features").onclick = function () {
 document.getElementById("button-for-filter-by-tags-and-features").onclick =
   function () {
     closeMenus();
+    showSelectionOptionsButtons();
+    this.style.display = "none";
     document.getElementById("tagSelectionHeadingRow").style.display = "flex";
     document.getElementById("tagSelectionRow").style.display = "flex";
     document.getElementById("featureSelectionHeadingRow").style.display =