Merge remote-tracking branch 'origin/master' into api-exec-await

Author: haraldschilly

src/packages/frontend/frame-editors/frame-tree/hooks.ts

@@ -2,7 +2,7 @@
  *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
  *  License: MS-RSL – see LICENSE.md for details
  */
-import { React, redux } from "../../app-framework";
+import { redux } from "../../app-framework";
 import { DEFAULT_FONT_SIZE } from "@cocalc/util/db-schema/defaults";
 
 // this doesn't react to font size changes. maybe at some point we want to...
@@ -25,17 +25,10 @@ export function baseFontSize() {
 //    transformOrigin: "center 0", // or "0 0"
 //  }
 export function use_font_size_scaling(font_size: number): number {
-  const [font_size_prev, set_font_size_prev] =
-    React.useState<number>(DEFAULT_FONT_SIZE);
-  const [scaling, set_scaling] = React.useState<number>(1);
-
-  if (font_size != font_size_prev) {
-    set_font_size_prev(font_size);
-  } else {
-    return scaling;
-  }
+  return getScale(font_size);
+}
 
+export function getScale(fontSize: number): number {
   const base = baseFontSize();
-  set_scaling((font_size != null ? font_size : base) / base);
-  return scaling;
+  return (fontSize != null ? fontSize : base) / base;
 }

src/packages/frontend/frame-editors/jupyter-editor/actions.ts

@@ -233,7 +233,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
   }
 
   print(_id): void {
-    this.jupyter_actions.show_nbconvert_dialog("cocalc-html");
+    this.jupyter_actions.show_nbconvert_dialog("cocalc-pdf");
   }
 
   async format(id: string): Promise<void> {

src/packages/frontend/frame-editors/markdown-editor/editor.ts

@@ -31,6 +31,7 @@ const EDITOR_SPEC = {
       //"print",
       "decrease_font_size",
       "increase_font_size",
+      "set_zoom",
       "save",
       "time_travel",
       "show_table_of_contents",
@@ -51,6 +52,7 @@ const EDITOR_SPEC = {
       "readonly_view",
       "decrease_font_size",
       "increase_font_size",
+      "set_zoom",
       "sync",
       "show_table_of_contents",
     ]),
@@ -105,6 +107,7 @@ const EDITOR_SPEC = {
       "print",
       "decrease_font_size",
       "increase_font_size",
+      "set_zoom",
       "show_table_of_contents",
       "time_travel",
       "undo", // need these because button bars at top let you do something even in rendered only view.

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

@@ -67,6 +67,8 @@ export interface TimeTravelState extends CodeEditorState {
   // true if in a git repo
   git?: boolean;
   //frame_states: Map<string, any>; // todo: really map from frame_id to FrameState as immutable map.
+  // timetravel has own error state
+  error: string;
 }
 
 export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
@@ -107,6 +109,10 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
     return { type: "time_travel" };
   }
 
+  set_error = (error) => {
+    this.setState({ error });
+  };
+
   private init_syncdoc = async (): Promise<void> => {
     const persistent = this.docext == "ipynb" || this.docext == "sagews"; // ugly for now (?)
     this.syncdoc = await webapp_client.sync_client.open_existing_sync_document({
@@ -179,14 +185,15 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
     }
   };
 
-  load_full_history = async (): Promise<void> => {
+  loadFullHistory = async (): Promise<void> => {
     if (
       this.store.get("has_full_history") ||
       this.syncdoc == null ||
       this.store.get("git_mode")
-    )
+    ) {
       return;
-    await this.syncdoc.load_full_history(); // todo -- error reporting ...?
+    }
+    await this.syncdoc.load_full_history();
     this.setState({ has_full_history: true });
     this.syncdoc_changed(); // load new versions list.
   };
@@ -283,6 +290,17 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
     }
   };
 
+  setNewestVersion = (id: string) => {
+    const node = this.getFrameNodeGlobal(id);
+    const versions = node?.get("git_mode")
+      ? this.store.get("git_versions")
+      : this.store.get("versions");
+    const v = (versions?.size ?? 0) - 1;
+    if (v >= 0) {
+      this.set_version(id, v);
+    }
+  };
+
   step = (id: string, delta: number): void => {
     const node = this.getFrameNodeGlobal(id);
     if (node.get("changes_mode")) {
@@ -498,8 +516,9 @@ export class TimeTravelActions extends CodeEditorActions<TimeTravelState> {
       });
       this.ensureSelectedVersionsAreConsistent({ git_versions });
       return git_versions;
-    } catch (err) {
-      this.set_error(`${err}`);
+    } catch (_err) {
+      // Do NOT report error -- instead, disable git mode.  This should
+      // happen if the file is not in a git repo.
       this.setState({ git: false });
       return;
     }

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

@@ -8,7 +8,7 @@
 - This is really just some minimal data *about* the history for now.
 */
 
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
@@ -18,11 +18,10 @@ interface Props {
 
 export function Export({ actions }: Props) {
   return (
-    <Button
-      onClick={() => actions.exportEditHistory()}
-      title="Export information about edit history to a JSON file"
-    >
-      <Icon name={"file-export"} /> Export
-    </Button>
+    <Tooltip title={"Export information about edit history to a JSON file"}>
+      <Button onClick={() => actions.exportEditHistory()}>
+        <Icon name={"file-export"} /> Export
+      </Button>
+    </Tooltip>
   );
 }

src/packages/frontend/frame-editors/time-travel-editor/load-full-history.tsx

@@ -2,22 +2,41 @@
  *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
  *  License: MS-RSL – see LICENSE.md for details
  */
-
-import { Button } from "antd";
+import { useState } from "react";
+import { Button, Spin, Tooltip } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
 interface Props {
+  id: string;
   actions: TimeTravelActions;
 }
 
-export function LoadFullHistory({ actions }: Props) {
+export function LoadFullHistory({ id, actions }: Props) {
+  const [loading, setLoading] = useState<boolean>(false);
   return (
-    <Button
-      onClick={() => actions.load_full_history()}
-      title={"Load the complete edit history for this file."}
+    <Tooltip
+      title={
+        "Load the full edit history for this file.  This may take a long time."
+      }
     >
-      <Icon name="file-archive" /> Load All
-    </Button>
+      <Button
+        disabled={loading}
+        onClick={async () => {
+          try {
+            setLoading(true);
+            await actions.loadFullHistory();
+          } catch (err) {
+            console.log("ERROR!", err);
+            actions.set_error(`${err}`);
+          } finally {
+            setLoading(false);
+            actions.setNewestVersion(id);
+          }
+        }}
+      >
+        <Icon name="file-archive" /> Load All {loading && <Spin />}
+      </Button>
+    </Tooltip>
   );
 }

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

@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button } from "antd";
+import { Button, Tooltip } from "antd";
 import { TimeTravelActions } from "./actions";
 import { Icon } from "../../components";
 
@@ -12,20 +12,27 @@ interface Props {
   actions: TimeTravelActions;
   version: Date | undefined;
   doc;
+  changesMode?: boolean;
 }
 
-export function RevertFile({ id, actions, version, doc }: Props) {
+export function RevertFile({ id, actions, version, doc, changesMode }: Props) {
   return (
-    <Button
-      title={`Revert file to the displayed version (this makes a new version, so nothing is lost)`}
-      onClick={() => {
-        if (version != null) {
-          actions.revert(id, version, doc);
-        }
-      }}
-      disabled={version == null || actions.syncdoc?.is_read_only()}
+    <Tooltip
+      title={`Revert file to the displayed version (this makes a new version, so nothing is lost). ${
+        changesMode ? "In changes mode, this uses newer version." : ""
+      }`}
     >
-      <Icon name="undo" /> Revert
-    </Button>
+      {" "}
+      <Button
+        onClick={() => {
+          if (version != null) {
+            actions.revert(id, version, doc);
+          }
+        }}
+        disabled={version == null || actions.syncdoc?.is_read_only()}
+      >
+        <Icon name="undo" /> Revert
+      </Button>
+    </Tooltip>
   );
 }

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

@@ -8,7 +8,12 @@
 import { useState } from "react";
 import { Button, Checkbox, Tooltip } from "antd";
 import { Map } from "immutable";
-import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
+import {
+  redux,
+  useTypedRedux,
+  useAsyncEffect,
+  useEditorRedux,
+} from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
 import { TimeTravelActions, TimeTravelState } from "./actions";
 import { Diff } from "./diff";
@@ -26,11 +31,11 @@ import { Export } from "./export";
 import json_stable from "json-stable-stringify";
 import { to_ipynb } from "../../jupyter/history-viewer";
 import { SagewsDiff } from "./sagews-diff";
-import { useAsyncEffect, useEditorRedux } from "@cocalc/frontend/app-framework";
 import { Viewer } from "./viewer";
 import type { Document } from "@cocalc/sync/editor/generic/types";
 import useLicenses from "@cocalc/frontend/site-licenses/use-licenses";
 import RequireLicense from "@cocalc/frontend/site-licenses/require-license";
+import ShowError from "@cocalc/frontend/components/error";
 
 const HAS_SPECIAL_VIEWER = new Set([
   "tasks",
@@ -62,6 +67,7 @@ export function TimeTravel(props: Props) {
     "unlicensed_project_timetravel_limit",
   );
   const licenses = useLicenses({ project_id });
+  const error = useEditor("error");
   const versions = useEditor("versions");
   const gitVersions = useEditor("git_versions");
   const hasFullHistory = useEditor("has_full_history");
@@ -263,8 +269,10 @@ export function TimeTravel(props: Props) {
   };
 
   const renderLoadFullHistory = () => {
-    if (hasFullHistory) return;
-    return <LoadFullHistory actions={props.actions} />;
+    if (hasFullHistory || gitMode) {
+      return;
+    }
+    return <LoadFullHistory id={props.id} actions={props.actions} />;
   };
 
   const renderOpenFile = () => {
@@ -278,11 +286,12 @@ export function TimeTravel(props: Props) {
   };
 
   const renderRevertFile = () => {
-    if (changesMode || doc == null) {
+    if (doc == null) {
       return;
     }
     return (
       <RevertFile
+        changesMode={changesMode}
         actions={props.actions}
         version={getVersion()}
         id={props.id}
@@ -304,7 +313,7 @@ export function TimeTravel(props: Props) {
   };
 
   const renderExport = () => {
-    if (redux.getStore("page").get("fullscreen") == "kiosk") {
+    if (gitMode || redux.getStore("page").get("fullscreen") == "kiosk") {
       // doesn't make sense in kiosk mode.
       return;
     }
@@ -447,6 +456,11 @@ export function TimeTravel(props: Props) {
       {renderControls()}
       {renderTimeSelect()}
       {gitMode && !changesMode && renderGitSubject()}
+      <ShowError
+        style={{ margin: "5px 15px" }}
+        error={error}
+        setError={props.actions.set_error}
+      />
       {body}
     </div>
   );

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

@@ -10,6 +10,7 @@ import { HistoryViewer as JupyterHistoryViewer } from "../../jupyter/history-vie
 import { SagewsCodemirror } from "./sagews-codemirror";
 import Whiteboard from "@cocalc/frontend/frame-editors/whiteboard-editor/time-travel";
 import { isObjectDoc } from "./view-document";
+import { getScale } from "@cocalc/frontend/frame-editors/frame-tree/hooks";
 
 export function Viewer({
   ext,
@@ -58,9 +59,13 @@ export function Viewer({
     case "sagews":
       return <SagewsCodemirror {...opts} />;
     case "md":
+      const scale = getScale(font_size);
       return (
         <div style={{ overflow: "auto", padding: "50px 70px" }}>
-          <StaticMarkdown value={doc.to_str()} />
+          <StaticMarkdown
+            value={doc.to_str()}
+            style={{ fontSize: `${100 * scale}%` }}
+          />
         </div>
       );
     case "board":

src/packages/frontend/jupyter/commands.ts

@@ -630,7 +630,7 @@ export function commands(actions: AllActions): {
 
     "nbconvert latex pdf": {
       i: "tex",
-      m: "PDF via LaTeX (.pdf)",
+      m: "PDF via LaTeX and nbconvert (minimal image support) (.pdf)",
       f: () => actions.jupyter_actions?.show_nbconvert_dialog("pdf"),
       r: true,
     },