timetravel modernization -- sage worksheets

williamstein · williamstein · commit aed9474d6f9a · 2024-08-03T22:50:17.000Z
diff --git a/src/packages/frontend/frame-editors/time-travel-editor/open-file.tsx b/src/packages/frontend/frame-editors/time-travel-editor/open-file.tsx
@@ -3,25 +3,17 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Rendered, Component } from "../../app-framework";
 import { Button } from "antd";
-import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
-interface Props {
-  actions: TimeTravelActions;
-}
-
-export class OpenFile extends Component<Props> {
-  public render(): Rendered {
-    // TODO: make the icon be the way for the given type of file
-    return (
-      <Button
-        onClick={() => this.props.actions.open_file()}
-        title={"Open the file whose history you are viewing"}
-      >
-        <Icon name="file-code" /> Open
-      </Button>
-    );
-  }
+export function OpenFile({ actions }) {
+  // TODO: make the icon be the right one for the given type of file
+  return (
+    <Button
+      onClick={() => actions.open_file()}
+      title={"Open the file whose history you are viewing"}
+    >
+      <Icon name="file-code" /> Open
+    </Button>
+  );
 }
diff --git a/src/packages/frontend/frame-editors/time-travel-editor/open-snapshots.tsx b/src/packages/frontend/frame-editors/time-travel-editor/open-snapshots.tsx
@@ -11,29 +11,21 @@
 */
 
 import { Button } from "antd";
-import { Rendered, Component } from "@cocalc/frontend/app-framework";
-import { TimeTravelActions } from "./actions";
 import { Icon } from "@cocalc/frontend/components";
 import track from "@cocalc/frontend/user-tracking";
 
-interface Props {
-  actions: TimeTravelActions;
-}
-
-export class OpenSnapshots extends Component<Props> {
-  public render(): Rendered {
-    return (
-      <Button
-        onClick={() => {
-          this.props.actions.open_snapshots();
-          track("snapshots", { action: "open", where: "time-travel" });
-        }}
-        title={
-          "Open the file system snapshots of this project, which may also be helpful in recovering past versions."
-        }
-      >
-        <Icon name={"life-ring"} /> Backups
-      </Button>
-    );
-  }
+export function OpenSnapshots({ actions }) {
+  return (
+    <Button
+      onClick={() => {
+        actions.open_snapshots();
+        track("snapshots", { action: "open", where: "time-travel" });
+      }}
+      title={
+        "Open the file system snapshots of this project, which may also be helpful in recovering past versions."
+      }
+    >
+      <Icon name={"life-ring"} /> Backups
+    </Button>
+  );
 }
diff --git a/src/packages/frontend/frame-editors/time-travel-editor/sagews-codemirror.tsx b/src/packages/frontend/frame-editors/time-travel-editor/sagews-codemirror.tsx
@@ -10,11 +10,11 @@ code to get this done for now.
 
 import { debounce } from "lodash";
 import * as CodeMirror from "codemirror";
-import { Component, React, Rendered } from "../../app-framework";
 import { Map } from "immutable";
-
+import { useEffect, useRef, MutableRefObject } from "react";
 const { codemirror_editor } = require("../../editor");
 const { SynchronizedWorksheet } = require("../../sagews/sagews");
+import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 
 interface Props {
   content: string;
@@ -24,72 +24,66 @@ interface Props {
   editor_settings: Map<string, any>;
 }
 
-export class SagewsCodemirror extends Component<Props> {
-  private update: Function;
-  private view_doc: any;
-  private worksheet: any;
-  private cm: CodeMirror.Editor;
-  private div_ref: React.RefObject<HTMLDivElement> = React.createRef<
-    HTMLDivElement
-  >();
+export function SagewsCodemirror(props: Props) {
+  const { isVisible } = useFrameContext();
+  const updateRef = useRef<Function>(null) as MutableRefObject<Function>;
+  const cmRef = useRef<CodeMirror.Editor | null>(
+    null,
+  ) as MutableRefObject<CodeMirror.Editor | null>;
+  const viewDocRef = useRef<any>(null);
+  const divRef = useRef<any>(null);
 
-  private init_sagews(): void {
-    const div = this.div_ref.current;
-    if (div == null) return; // can't happen
+  const initSagews = (): void => {
+    const div = divRef.current;
+    if (div == null) {
+      // this better not happen
+      return;
+    }
 
     const opts = { mode: "sagews", read_only: true };
-    this.view_doc = codemirror_editor(
-      this.props.project_id,
-      this.props.path,
-      opts
-    );
-    this.cm = this.view_doc.codemirror;
+    viewDocRef.current = codemirror_editor(props.project_id, props.path, opts);
+    cmRef.current = viewDocRef.current.codemirror;
     // insert it into the dom.
-    $(this.view_doc.element).appendTo($(div));
+    $(viewDocRef.current.element).appendTo($(div));
     // remove the second codemirror editor
-    $(this.view_doc.codemirror1.getWrapperElement()).remove();
+    $(viewDocRef.current.codemirror1.getWrapperElement()).remove();
 
     const opts0 = {
       allow_javascript_eval: false,
       static_viewer: true,
     };
-    this.worksheet = new SynchronizedWorksheet(this.view_doc, opts0);
+    const worksheet = new SynchronizedWorksheet(viewDocRef.current, opts0);
 
     const f = (content: string): void => {
-      if (this.view_doc == null) return;
-      this.cm.setValueNoJump(content);
-      this.worksheet.process_sage_updates();
+      if (viewDocRef.current == null) {
+        return;
+      }
+      cmRef.current?.setValueNoJump(content);
+      worksheet.process_sage_updates();
     };
-    f(this.props.content);
-    this.update = debounce(f, 100);
-  }
-
-  public componentDidMount(): void {
-    this.init_sagews();
-  }
+    f(props.content);
+    updateRef.current = debounce(f, 100);
+  };
 
-  public componentWillUnmount(): void {
-    if (this.view_doc == null) return;
-    this.view_doc.remove();
-    delete this.view_doc;
-    delete this.worksheet;
-  }
+  useEffect(() => {
+    initSagews();
+    return () => {
+      if (viewDocRef.current == null) {
+        return;
+      }
+      viewDocRef.current.remove();
+    };
+  }, []);
 
-  public UNSAFE_componentWillReceiveProps(props): void {
-    if (props.content != this.props.content) {
-      this.update(props.content);
-    }
-    if (props.font_size != this.props.font_size) {
-      this.view_doc.set_font_size(this.cm, props.font_size);
-    }
-    this.cm.refresh();
-  }
+  useEffect(() => {
+    updateRef.current?.(props.content);
+    viewDocRef.current?.set_font_size(cmRef.current, props.font_size);
+    cmRef.current?.refresh();
+  }, [props.font_size, props.content, isVisible]);
 
-  public render(): Rendered {
-    return (
-      <div className="smc-vfill" style={{ overflow: "auto" }}>
-        <div ref={this.div_ref} />
-      </div>
-    );
-  }
+  return (
+    <div className="smc-vfill" style={{ overflow: "auto" }}>
+      <div ref={divRef} />
+    </div>
+  );
 }
diff --git a/src/packages/frontend/frame-editors/time-travel-editor/sagews-diff.tsx b/src/packages/frontend/frame-editors/time-travel-editor/sagews-diff.tsx
@@ -10,12 +10,12 @@ code to get this done for now.
 
 import { debounce } from "lodash";
 import * as CodeMirror from "codemirror";
-import { Component, React, Rendered } from "../../app-framework";
 import { Map } from "immutable";
+import { useEffect, useRef, MutableRefObject } from "react";
 import { set_cm_line_diff } from "./diff-util";
-
 const { codemirror_editor } = require("../../editor");
 const { SynchronizedWorksheet } = require("../../sagews/sagews");
+import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 
 interface Props {
   v0: string;
@@ -26,74 +26,66 @@ interface Props {
   editor_settings: Map<string, any>;
 }
 
-export class SagewsDiff extends Component<Props> {
-  private update: Function;
-  private view_doc: any;
-  private worksheet: any;
-  private cm: CodeMirror.Editor;
-  private div_ref: React.RefObject<HTMLDivElement> = React.createRef<
-    HTMLDivElement
-  >();
+export function SagewsDiff(props: Props) {
+  const { isVisible } = useFrameContext();
+  const updateRef = useRef<Function>(null) as MutableRefObject<Function>;
+  const cmRef = useRef<CodeMirror.Editor | null>(
+    null,
+  ) as MutableRefObject<CodeMirror.Editor | null>;
+  const viewDocRef = useRef<any>(null);
+  const divRef = useRef<any>(null);
 
-  private init_sagews(): void {
-    const div = this.div_ref.current;
-    if (div == null) return; // can't happen
+  const initSagews = (): void => {
+    const div = divRef.current;
+    if (div == null) {
+      // this better not happen
+      return;
+    }
 
     const opts = { mode: "sagews", read_only: true };
-    this.view_doc = codemirror_editor(
-      this.props.project_id,
-      this.props.path,
-      opts
-    );
-    this.cm = this.view_doc.codemirror;
-    this.view_doc.set_font_size(this.cm, this.props.font_size);
-
+    viewDocRef.current = codemirror_editor(props.project_id, props.path, opts);
+    cmRef.current = viewDocRef.current.codemirror;
     // insert it into the dom.
-    $(this.view_doc.element).appendTo($(div));
+    $(viewDocRef.current.element).appendTo($(div));
     // remove the second codemirror editor
-    $(this.view_doc.codemirror1.getWrapperElement()).remove();
+    $(viewDocRef.current.codemirror1.getWrapperElement()).remove();
 
     const opts0 = {
       allow_javascript_eval: false,
       static_viewer: true,
     };
-    this.worksheet = new SynchronizedWorksheet(this.view_doc, opts0);
+    const worksheet = new SynchronizedWorksheet(viewDocRef.current, opts0);
 
     const f = (v0: string, v1: string): void => {
-      if (this.view_doc == null) return;
-      set_cm_line_diff(this.cm, v0, v1);
-      this.worksheet.process_sage_updates();
+      if (viewDocRef.current == null || cmRef.current == null) {
+        return;
+      }
+      set_cm_line_diff(cmRef.current, v0, v1);
+      worksheet.process_sage_updates();
     };
-    f(this.props.v0, this.props.v1);
-    this.update = debounce(f, 300);
-  }
-
-  public componentDidMount(): void {
-    this.init_sagews();
-  }
+    f(props.v0, props.v1);
+    updateRef.current = debounce(f, 100);
+  };
 
-  public componentWillUnmount(): void {
-    if (this.view_doc == null) return;
-    this.view_doc.remove();
-    delete this.view_doc;
-    delete this.worksheet;
-  }
+  useEffect(() => {
+    initSagews();
+    return () => {
+      if (viewDocRef.current == null) {
+        return;
+      }
+      viewDocRef.current.remove();
+    };
+  }, []);
 
-  public UNSAFE_componentWillReceiveProps(props): void {
-    if (props.v0 != this.props.v0 || props.v1 != this.props.v1) {
-      this.update(props.v0, props.v1);
-    }
-    if (props.font_size != this.props.font_size) {
-      this.view_doc.set_font_size(this.cm, props.font_size);
-    }
-    this.cm.refresh();
-  }
+  useEffect(() => {
+    updateRef.current?.(props.v0, props.v1);
+    viewDocRef.current?.set_font_size(cmRef.current, props.font_size);
+    cmRef.current?.refresh();
+  }, [props.font_size, isVisible, props.v0, props.v1]);
 
-  public render(): Rendered {
-    return (
-      <div className="smc-vfill" style={{ overflow: "auto" }}>
-        <div ref={this.div_ref} />
-      </div>
-    );
-  }
+  return (
+    <div className="smc-vfill" style={{ overflow: "auto" }}>
+      <div ref={divRef} />
+    </div>
+  );
 }
diff --git a/src/packages/frontend/frame-editors/time-travel-editor/sagews.tsx b/src/packages/frontend/frame-editors/time-travel-editor/sagews.tsx
@@ -15,29 +15,24 @@ out a range.
 import { SyncDoc } from "@cocalc/sync/editor/generic/sync-doc";
 import Worksheet from "../../sagews/worksheet";
 import { parse_sagews } from "../../sagews/parse-sagews";
-import { Rendered, Component } from "../../app-framework";
 
 interface Props {
   syncdoc: SyncDoc; // syncdoc corresponding to a Sage worksheet
   version: Date;
 }
 
-export class SageWorksheetHistory extends Component<Props> {
-  public shouldComponentUpdate(props): boolean {
-    return this.props.version != props.version;
-  }
-
-  public render(): Rendered {
-    const v = this.props.syncdoc.version(this.props.version);
-    if (v == null) return <span />;
-    const content: string = v.to_str();
-    return (
-      <div
-        className="smc-vfill"
-        style={{ overflowY: "scroll", margin: "30px 30px 0 30px" }}
-      >
-        <Worksheet sagews={parse_sagews(content)} />
-      </div>
-    );
+export function SageWorksheetHistory({ syncdoc, version }: Props) {
+  const v = syncdoc.version(version);
+  if (v == null) {
+    return <span />;
   }
+  const content: string = v.to_str();
+  return (
+    <div
+      className="smc-vfill"
+      style={{ overflowY: "scroll", margin: "30px 30px 0 30px" }}
+    >
+      <Worksheet sagews={parse_sagews(content)} />
+    </div>
+  );
 }
