course: switch student page to use virtualization -- see #6698

- involves a lot of subtle state issues, though

Author: williamstein

src/packages/frontend/components/scrollable-list.tsx

@@ -10,6 +10,8 @@ positioned are in an LRU cache, so use a bounded amount of memory.
 import { ReactNode, useEffect, useRef } from "react";
 import LRU from "lru-cache";
 import { useDebouncedCallback } from "use-debounce";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import useVirtuosoScrollHook from "@cocalc/frontend/components/virtuoso-scroll-hook";
 
 const cache = new LRU<string, number>({ max: 250 });
 
@@ -19,9 +21,38 @@ interface Props {
   rowKey: (index: number) => string;
   // used to cache scroll position between unmounting and remounting
   cacheId?: string;
+  virtualize?: boolean;
 }
 
-export default function ScrollableList({
+export default function ScrollableList(props: Props) {
+  if (props.virtualize) {
+    return <VirtualizedScrollableList {...props} />;
+  } else {
+    return <NonVirtualizedScrollableList {...props} />;
+  }
+}
+
+function VirtualizedScrollableList({
+  rowCount,
+  rowRenderer,
+  rowKey,
+  cacheId,
+}: Props) {
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const virtuosoScroll = useVirtuosoScrollHook({ cacheId });
+  return (
+    <div className={"smc-vfill"}>
+      <Virtuoso
+        ref={virtuosoRef}
+        totalCount={rowCount}
+        itemContent={(index) => rowRenderer({ index, key: rowKey(index) })}
+        {...virtuosoScroll}
+      />
+    </div>
+  );
+}
+
+function NonVirtualizedScrollableList({
   rowCount,
   rowRenderer,
   rowKey,

src/packages/frontend/course/actions.ts

@@ -26,6 +26,7 @@ import { ProjectsStore } from "../projects/store";
 import { bind_methods } from "@cocalc/util/misc";
 // React libraries
 import { Actions, TypedMap } from "../app-framework";
+import { Map as iMap } from "immutable";
 
 export const primary_key = {
   students: "student_id",
@@ -392,4 +393,21 @@ export class CourseActions extends Actions<CourseState> {
     }
     this.setState({ [field_name]: adjusted });
   };
+
+  setPageFilter = (page: string, filter: string) => {
+    const store = this.get_store();
+    if (!store) return;
+    let pageFilter = store.get("pageFilter");
+    if (pageFilter == null) {
+      if (filter) {
+        pageFilter = iMap({ [page]: filter });
+        this.setState({
+          pageFilter,
+        });
+      }
+      return;
+    }
+    pageFilter = pageFilter.set(page, filter);
+    this.setState({ pageFilter });
+  };
 }

src/packages/frontend/course/store.ts

@@ -202,6 +202,10 @@ export interface CourseState {
   unsaved?: boolean;
   terminal_command?: TerminalCommand;
   nbgrader_run_info?: NBgraderRunInfo;
+  // map from student_id to a filter string.
+  assignmentFilter?: Map<string, string>;
+  // each page -- students, assignments, handouts (etc.?) has a filter.  This is the state of that filter.
+  pageFilter?: Map<string, string>;
 }
 
 export class CourseStore extends Store<CourseState> {

src/packages/frontend/course/students/actions.ts

@@ -16,6 +16,7 @@ import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 import { CourseActions } from "../actions";
 import { CourseStore, StudentRecord } from "../store";
 import { SyncDBRecordStudent } from "../types";
+import { Map as iMap } from "immutable";
 
 const STUDENT_STATUS_UPDATE_MS = 60 * 1000;
 
@@ -245,7 +246,7 @@ export class StudentsActions {
 
   // columns: first_name, last_name, email, last_active, hosting
   // Toggles ascending/decending order
-  public set_active_student_sort(column_name: string): void {
+  set_active_student_sort = (column_name: string): void => {
     let is_descending: boolean;
     const store = this.get_store();
     const current_column = store.getIn(["active_student_sort", "column_name"]);
@@ -257,12 +258,12 @@ export class StudentsActions {
     this.course_actions.setState({
       active_student_sort: { column_name, is_descending },
     });
-  }
+  };
 
-  public async set_internal_student_info(
+  set_internal_student_info = async (
     student_id: string,
     info: { first_name: string; last_name: string; email_address?: string },
-  ): Promise<void> {
+  ): Promise<void> => {
     const { student } = this.course_actions.resolve({ student_id });
     if (student == null) return;
 
@@ -282,23 +283,23 @@ export class StudentsActions {
 
     // since they may get removed from shared project, etc.
     await this.course_actions.student_projects.configure_all_projects();
-  }
+  };
 
-  public set_student_note(student_id: string, note: string): void {
+  set_student_note = (student_id: string, note: string): void => {
     this.course_actions.set({
       note,
       table: "students",
       student_id,
     });
-  }
+  };
 
   /*
   Function to "catch up a student" by pushing out all (non-deleted) handouts and assignments to
   this student that have been pushed to at least one student so far.
   */
-  public async push_missing_handouts_and_assignments(
+  push_missing_handouts_and_assignments = async (
     student_id: string,
-  ): Promise<void> {
+  ): Promise<void> => {
     const { student, store } = this.course_actions.resolve({ student_id });
     if (student == null) {
       throw Error("no such student");
@@ -334,5 +335,22 @@ export class StudentsActions {
     } finally {
       this.course_actions.set_activity({ id });
     }
-  }
+  };
+
+  setAssignmentFilter = (student_id: string, filter: string) => {
+    const store = this.get_store();
+    if (!store) return;
+    let assignmentFilter = store.get("assignmentFilter");
+    if (assignmentFilter == null) {
+      if (filter) {
+        assignmentFilter = iMap({ [student_id]: filter });
+        this.course_actions.setState({
+          assignmentFilter,
+        });
+      }
+      return;
+    }
+    assignmentFilter = assignmentFilter.set(student_id, filter);
+    this.course_actions.setState({ assignmentFilter });
+  };
 }

src/packages/frontend/course/students/students-panel-student.tsx

@@ -19,7 +19,6 @@ import {
   Tooltip,
 } from "antd";
 import { useEffect, useState } from "react";
-import { DebounceInput } from "react-debounce-input";
 import { CourseActions } from "../actions";
 import { StudentAssignmentInfo, StudentAssignmentInfoHeader } from "../common";
 import {
@@ -61,6 +60,7 @@ interface StudentProps {
   display_account_name?: boolean;
   active_feedback_edits: IsGradingMap;
   nbgrader_run_info?: NBgraderRunInfo;
+  assignmentFilter?;
 }
 
 export function Student({
@@ -77,6 +77,7 @@ export function Student({
   display_account_name,
   active_feedback_edits,
   nbgrader_run_info,
+  assignmentFilter,
 }: StudentProps) {
   const actions: CourseActions = redux.getActions(name);
   const store = actions.get_store();
@@ -98,15 +99,13 @@ export function Student({
     student.get("email_address") || "",
   );
   const [more, set_more] = useState<boolean>(false);
-  const [assignment_search, set_assignment_search] = useState<string>("");
-
   function reset_initial_state() {
     set_editing_student(false);
     set_edited_first_name(student_name.first || "");
     set_edited_last_name(student_name.last || "");
     set_edited_email_address(student.get("email_address") || "");
     set_more(false);
-    set_assignment_search("");
+    actions.students.setAssignmentFilter(student_id, "");
   }
 
   useEffect(() => {
@@ -339,13 +338,14 @@ export function Student({
 
   function render_search_assignment() {
     return (
-      <DebounceInput
+      <Input.Search
+        allowClear
         style={{ width: "100%" }}
-        debounceTimeout={500}
-        element={Input as any}
-        placeholder={"Find assignments..."}
-        value={assignment_search}
-        onChange={(e) => set_assignment_search(e.target.value)}
+        placeholder={"Filter assignments..."}
+        value={assignmentFilter ?? ""}
+        onChange={(e) =>
+          actions.students.setAssignmentFilter(student_id, e.target.value)
+        }
       />
     );
   }
@@ -465,7 +465,7 @@ export function Student({
 
   function render_assignments_info_rows() {
     const result: any[] = [];
-    const terms = search_split(assignment_search);
+    const terms = search_split(assignmentFilter ?? "");
     // TODO instead of accessing the store, use the state to react to data changes -- that's why we chech in "isSame" above.
     for (const assignment of store.get_sorted_assignments()) {
       if (terms.length > 0) {