timetravel -- refactoring code to make it possible to implement git support

Author: williamstein

src/packages/frontend/editors/task-editor/history-viewer.tsx

@@ -10,29 +10,18 @@ History viewer for Tasks notebooks  --- very similar to same file in jupyter/ di
 import { Checkbox } from "antd";
 import { fromJS, Map } from "immutable";
 import TaskList from "./list";
-import { CSS, React, useState } from "../../app-framework";
+import { useState } from "../../app-framework";
 import { cmp } from "@cocalc/util/misc";
-import { SyncDB } from "@cocalc/sync/editor/db";
 import { Tasks } from "./types";
 
-const SHOW_DONE_STYLE: CSS = {
+const SHOW_DONE_STYLE = {
   fontSize: "12pt",
   color: "#666",
   padding: "5px 15px",
   borderBottom: "1px solid lightgrey",
 } as const;
 
-interface Props {
-  syncdb: SyncDB;
-  version: Date;
-  font_size: number;
-}
-
-export const TasksHistoryViewer: React.FC<Props> = ({
-  syncdb,
-  version,
-  font_size,
-}) => {
+export function TasksHistoryViewer({ doc, project_id, path, font_size }) {
   const [show_done, set_show_done] = useState(false);
 
   function render_task_list(doc) {
@@ -50,8 +39,8 @@ export const TasksHistoryViewer: React.FC<Props> = ({
 
     return (
       <TaskList
-        path={syncdb.get_path()}
-        project_id={syncdb.get_project_id()}
+        path={path}
+        project_id={project_id}
         tasks={tasks}
         visible={visible}
         read_only={true}
@@ -60,7 +49,6 @@ export const TasksHistoryViewer: React.FC<Props> = ({
     );
   }
 
-  const doc = syncdb.version(version);
   return (
     <div
       style={{
@@ -81,4 +69,4 @@ export const TasksHistoryViewer: React.FC<Props> = ({
       {doc == null ? <span>Unknown version</span> : render_task_list(doc)}
     </div>
   );
-};
+}

src/packages/frontend/file-associations.ts

@@ -23,8 +23,8 @@ import videoExtensions from "video-extensions";
 import audioExtensions from "audio-extensions";
 import { filename_extension } from "@cocalc/util/misc";
 
-export function filenameMode(path: string): string {
-  return file_associations[filename_extension(path)]?.opts?.mode ?? "text";
+export function filenameMode(path: string, fallback = "text"): string {
+  return file_associations[filename_extension(path)]?.opts?.mode ?? fallback;
 }
 
 const codemirror_associations: { [ext: string]: string } = {

src/packages/frontend/frame-editors/time-travel-editor/actions.ts

@@ -35,6 +35,7 @@ import {
 } from "../code-editor/actions";
 import { FrameTree } from "../frame-tree/types";
 import { export_to_json } from "./export-to-json";
+import type { Document } from "@cocalc/sync/editor/generic/types";
 
 const EXTENSION = ".time-travel";
 
@@ -51,6 +52,7 @@ export interface TimeTravelState extends CodeEditorState {
   has_full_history: boolean;
   docpath: string;
   docext: string;
+  git?: boolean;
   //frame_states: Map<string, any>; // todo: really map from frame_id to FrameState as immutable map.
 }
 
@@ -83,6 +85,7 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
       docext: this.docext,
     });
     this.init_syncdoc();
+    this.updateGitVersions();
   }
 
   public _raw_default_frame_tree(): FrameTree {
@@ -151,10 +154,6 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
   }
 
   private syncdoc_changed(): void {
-    if (this.store.get("git_mode")) {
-      this.updateGitVersions();
-      return;
-    }
     if (this.syncdoc == null) return;
     if (this.syncdoc?.get_state() != "ready") {
       return;
@@ -191,10 +190,7 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
   }
 
   // Get the given version of the document.
-  public get_doc(version: Date): any {
-    if (this.store.get("git_mode")) {
-      return this.gitShow(version);
-    }
+  public get_doc(version: Date): Document | undefined {
     if (this.syncdoc == null) return;
     const state = this.syncdoc.get_state();
     if (state != "ready") return;
@@ -306,7 +302,7 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
       if (node == null) continue;
       text_mode = !!text_mode;
       actions.set_frame_tree({ id, text_mode });
-      return;
+      break;
     }
   }
 
@@ -317,10 +313,11 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
       if (node == null) continue;
       git_mode = !!git_mode;
       actions.set_frame_tree({ id, git_mode });
-      return;
+      break;
     }
     this.updateGitVersions();
   }
+
   public set_versions(id: string, version0: number, version1: number): void {
     for (const actions of [this, this.ambient_actions]) {
       if (actions == null || actions._get_frame_node(id) == null) continue;
@@ -402,14 +399,19 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
         this.gitTimestampToHash[t] = h.trim();
         versions.push(new Date(t));
       }
-      this.setState({ versions: List<Date>(versions) });
+      versions.reverse();
+      this.setState({
+        git: versions.length > 0,
+        versions: List<Date>(versions),
+      });
     } catch (err) {
       this.set_error(`${err}`);
+      this.setState({ git: false });
       return;
     }
   };
 
-  private gitShow = async (version: Date): Promise<string> => {
+  gitShow = async (version: Date): Promise<string> => {
     const h = this.gitTimestampToHash[version.valueOf()];
     if (h == null) {
       return "";

src/packages/frontend/frame-editors/time-travel-editor/document.tsx

@@ -10,7 +10,7 @@ Render a static version of a document for use in TimeTravel.
 import { fromJS } from "immutable";
 import { CodemirrorEditor } from "../code-editor/codemirror-editor";
 
-export function Document(props) {
+export function TextDocument(props) {
   return (
     <div className="smc-vfill" style={{ overflowY: "auto" }}>
       <CodemirrorEditor

src/packages/frontend/frame-editors/time-travel-editor/navigation-slider.tsx

@@ -35,13 +35,14 @@ export function NavigationSlider({
 
   return (
     <Slider
+      style={{ margin: "10px 15px" }}
       min={0}
       max={max}
       value={version}
       onChange={(value) => {
         actions.set_version(id, value);
       }}
-      tooltip={{ formatter: renderTooltip, placement: "bottom", open: true }}
+      tooltip={{ formatter: renderTooltip, placement: "bottom" }}
     />
   );
 }

src/packages/frontend/frame-editors/time-travel-editor/range-slider.tsx

@@ -65,7 +65,7 @@ export function RangeSlider({
         paddingTop: "48px",
         paddingBottom: "20px",
         width: "90%",
-        margin: "auto",
+        margin: "10px 15px",
       }}
     >
       <Slider

src/packages/frontend/frame-editors/time-travel-editor/sagews-codemirror.tsx

@@ -10,21 +10,19 @@ code to get this done for now.
 
 import { debounce } from "lodash";
 import * as CodeMirror from "codemirror";
-import { Map } from "immutable";
 import { useEffect, useRef, MutableRefObject } from "react";
-const { codemirror_editor } = require("../../editor");
-const { SynchronizedWorksheet } = require("../../sagews/sagews");
+const { codemirror_editor } = require("@cocalc/frontend/editor");
+const { SynchronizedWorksheet } = require("@cocalc/frontend/sagews/sagews");
 import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
 
 interface Props {
-  content: string;
+  doc;
   path: string;
   project_id: string;
   font_size: number;
-  editor_settings: Map<string, any>;
 }
 
-export function SagewsCodemirror(props: Props) {
+export function SagewsCodemirror({ doc, path, project_id, font_size }: Props) {
   const { isVisible } = useFrameContext();
   const updateRef = useRef<Function>(null) as MutableRefObject<Function>;
   const cmRef = useRef<CodeMirror.Editor | null>(
@@ -41,7 +39,7 @@ export function SagewsCodemirror(props: Props) {
     }
 
     const opts = { mode: "sagews", read_only: true };
-    viewDocRef.current = codemirror_editor(props.project_id, props.path, opts);
+    viewDocRef.current = codemirror_editor(project_id, path, opts);
     cmRef.current = viewDocRef.current.codemirror;
     // insert it into the dom.
     $(viewDocRef.current.element).appendTo($(div));
@@ -54,14 +52,14 @@ export function SagewsCodemirror(props: Props) {
     };
     const worksheet = new SynchronizedWorksheet(viewDocRef.current, opts0);
 
-    const f = (content: string): void => {
+    const f = (value: string): void => {
       if (viewDocRef.current == null) {
         return;
       }
-      cmRef.current?.setValueNoJump(content);
+      cmRef.current?.setValueNoJump(value);
       worksheet.process_sage_updates();
     };
-    f(props.content);
+    f(doc.to_str());
     updateRef.current = debounce(f, 100);
   };
 
@@ -76,10 +74,10 @@ export function SagewsCodemirror(props: Props) {
   }, []);
 
   useEffect(() => {
-    updateRef.current?.(props.content);
-    viewDocRef.current?.set_font_size(cmRef.current, props.font_size);
+    updateRef.current?.(doc.to_str());
+    viewDocRef.current?.set_font_size(cmRef.current, font_size);
     cmRef.current?.refresh();
-  }, [props.font_size, props.content, isVisible]);
+  }, [font_size, doc, isVisible]);
 
   return (
     <div className="smc-vfill" style={{ overflow: "auto" }}>