diff --git a/site/src/components/Sorting.jsx b/site/src/components/Sorting.jsx
index 7f15661..2f7316d 100644
--- a/site/src/components/Sorting.jsx
+++ b/site/src/components/Sorting.jsx
@@ -6,10 +6,10 @@ const SortLevel = (props) => {
             <select id={"select_" + props.id} onChange={props.updateCallback} value={props.selected}>
                 <option key="-1" value="0">--do not sort--</option>
                 {
-                    props.keys.map((key, i) => <option key={i} value={i + 1}>{key}</option>)
+                    props.keys.map((key, i) => <option key={i} value={i + 1} hidden={!props.visible.includes(key)} >{key}</option>)
                 }
             </select>
-            <input type="checkbox" id={"reverse_" + props.id} />reversed?
+            <input type="checkbox" id={"reverse_" + props.id} onChange={props.checkboxUpdate} checked={props.reverse} />reversed?
             <br />
         </>
     )
@@ -18,30 +18,39 @@ const SortLevel = (props) => {
 
 const Sorting = (props) => {
     const [selections, updateSelections] = useState([-1]);
+    const [checkboxes, updateCheckboxes] = useState([0]);
     const updateOption = (x, id) => {
 
         selections[id] = x;
-
-        let unusedOptions = [...selections];
-        let selectionsUpdate = selections.map((x, i, arr) => {
+        console.log("fixup function called")
+        let checkboxesCopy = [...checkboxes];
+        let selectionsCopy = selections.map((x, i, arr) => {
             if (i < id) {
-                unusedOptions.filter((v) => v != x);
+                console.log("a", i, x)
                 return x;
             }
-
             if (x != -1 && arr.indexOf(x) != i) {
-                return unusedOptions[0];
+                let unusedoption =  
+                console.log("b", i, [0])
+                return unusedOption;
             }
+            console.log("c", i,x)
+
             return x
         })
 
-        selectionsUpdate = selectionsUpdate.filter((x, i) => x != -1);
 
-        if (selectionsUpdate.length == 0 || selectionsUpdate[selectionsUpdate.length - 1] != -1) {
-            selectionsUpdate.push(-1)
+        checkboxesCopy = checkboxesCopy.filter((x, i) => selectionsCopy[i] != -1);
+        selectionsCopy = selectionsCopy.filter((x, i) => x != -1);
+
+        if (selectionsCopy.length == 0 || selectionsCopy[selectionsCopy.length - 1] != -1) {
+            selectionsCopy.push(-1)
+            checkboxesCopy.push(false)
         }
-        console.log(selectionsUpdate)
-        updateSelections(selectionsUpdate);
+
+        updateSelections(selectionsCopy);
+        updateCheckboxes(checkboxesCopy);
+
 
 
     }
@@ -54,14 +63,22 @@ const Sorting = (props) => {
     return (
         <>
             {
+
                 selections.map((x, i, arr) => {
                     let curenSelectiontArr = keys.filter((selection) => !arr.slice(0, i).includes(keys.indexOf(selection)))
                     const upadteOptionWrap = (event) => {
-                        console.log(event)
-                        updateOption(Number(event.target.value) - 1, i)
+                        // console.log(event);
+                        updateOption(Number(event.target.value) - 1, i);
                     };
-
-                    return <SortLevel key={i} id="SortLevel0" keys={curenSelectiontArr} updateCallback={upadteOptionWrap} selected={x + 1} />
+                    const updateCheckBoxesWrap = (event) => {
+                        // console.log(event);
+                        let checkboxesCopy = [...checkboxes];
+                        checkboxesCopy[i] = Number(event.target.checked);
+                        updateCheckboxes(checkboxesCopy);
+                    };
+                    if (curenSelectiontArr.length > 0) {
+                        return <SortLevel key={i} id={"SortLevel" + i} keys={keys} visible={curenSelectiontArr} updateCallback={upadteOptionWrap} checkboxUpdate={updateCheckBoxesWrap} selected={x + 1} reverse={checkboxes[i]} />
+                    }
                 })
 
             }