Observer grade view sorting.

[jsimon3]

Along the same lines as this complaint https://community.canvaslms.com/ideas/2512-parental-observation-in-canvas-complicated-with-three-chi... Our parents had a hard time discerning grades at a quick glance...

I created a script to to at least clean up and organize the students grades on the observer view.

if you were to click view grades all of the grades would be jumbled up all the kids would be intertwined and if there was a course that was ungraded(like a counselor course or club) it would show up as well. so the script gets rid of the ungraded courses and alphabetizes the rest of the courses.

function sortGradesObservers() {
  const checkIfNull = async selector => {
    while (document.querySelector(selector) === null) {
      await new Promise(resolve => requestAnimationFrame(resolve));
    }
    return document.querySelector(selector);
  };

  checkIfNull("table.course_details.observer_grades").then(() => {
    if (
      ENV.current_user_roles.includes("observer") &&
      window.location.pathname.includes("/grades")
    ) {
      let table, tRows;
      table = document.querySelector("table.course_details.observer_grades");
      tRows = document.querySelectorAll(
        "table.course_details.observer_grades > tbody > tr"
      );
      const filterRows = async () => {
        tRows.forEach(one => {
          if (
            !one.innerHTML.includes("select") &&
            one.querySelector(".percent").innerText.includes("no grade")
          ) {
            one.style.display = "none";
          }
        });
      };
      filterRows().then(() => {
        const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
const daThing = th => {
    const table = document.querySelector("#content > table.course_details.observer_grades");
    Array.from(tRows)
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
}
daThing(document.querySelectorAll('td')[0]);
      });
    }
  });
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Done:

improved sorting 5 times faster
also took into account if a student had a grade last semester but does not have a grade this semester (especially this point of time in which now some of the courses cannot be graded and are marked as enrichment) 

[tbatiuk]

Thank you! Keep us posted on your progress!

[jsimon3]

improved sorting 5 times faster
also took into account if a student had a grade last semester but does not have a grade this semester (especially this point of time in which now some of the courses cannot be graded and are marked as enrichment) 
I have abandoned the grouping function -> it dramatically reduced the performance and with my current knowledge I do not know how to rectify that...