frontend/latex: first idea for async compilation

Author: haraldschilly

src/packages/frontend/client/project.ts

@@ -12,7 +12,11 @@ import { appBasePath } from "@cocalc/frontend/customize/app-base-path";
 import { ipywidgetsGetBufferUrl } from "@cocalc/frontend/jupyter/server-urls";
 import { HOME_ROOT } from "@cocalc/util/consts/files";
 import type { ApiKey } from "@cocalc/util/db-schema/api-keys";
-import type { ExecOpts, ExecOutput } from "@cocalc/util/db-schema/projects";
+import {
+  isExecOptsBlocking,
+  type ExecOpts,
+  type ExecOutput,
+} from "@cocalc/util/db-schema/projects";
 import * as message from "@cocalc/util/message";
 import {
   coerce_codomain_to_numbers,
@@ -216,12 +220,10 @@ export class ProjectClient {
       });
     }
 
-    if (
-      !(await ensure_project_running(
-        opts.project_id,
-        `execute the command ${opts.command}`,
-      ))
-    ) {
+    const msg = isExecOptsBlocking(opts)
+      ? `execute the command ${opts.command}`
+      : `getting job ${opts.async_get}`;
+    if (!(await ensure_project_running(opts.project_id, msg))) {
       return {
         type: "blocking",
         stdout: "",

src/packages/frontend/frame-editors/generic/client.ts

@@ -14,15 +14,14 @@ import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { CompressedPatch } from "@cocalc/sync/editor/generic/types";
 import { callback2 } from "@cocalc/util/async-utils";
 import { Config as FormatterConfig } from "@cocalc/util/code-formatter";
-import type { ExecOpts, ExecOutput } from "@cocalc/util/db-schema/projects";
 import { FakeSyncstring } from "./syncstring-fake";
 
+import type { ExecOpts, ExecOutput } from "@cocalc/util/db-schema/projects";
 export type { ExecOpts, ExecOutput };
 
-const schema = require("@cocalc/util/schema");
+import * as schema from "@cocalc/util/schema";
 
-const DEFAULT_FONT_SIZE: number =
-  require("@cocalc/util/db-schema").DEFAULT_FONT_SIZE;
+import { DEFAULT_FONT_SIZE } from "@cocalc/util/db-schema";
 
 export function server_time(): Date {
   return webapp_client.time_client.server_time();

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

@@ -25,7 +25,7 @@ import { fromJS, List, Map } from "immutable";
 import { debounce, union } from "lodash";
 import { normalize as path_normalize } from "path";
 
-import { Store } from "@cocalc/frontend/app-framework";
+import { Store, TypedMap } from "@cocalc/frontend/app-framework";
 import {
   TableOfContentsEntry,
   TableOfContentsEntryList,
@@ -53,8 +53,9 @@ import {
 } from "@cocalc/util/misc";
 import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 
+import { ExecOutput } from "@cocalc/util/db-schema/projects";
+import { ExecuteCodeOutputAsync } from "@cocalc/util/types/execute-code";
 import { bibtex } from "./bibtex";
-import { IBuildSpecs } from "./build";
 import { clean } from "./clean";
 import { KNITR_EXTS } from "./constants";
 import { count_words } from "./count_words";
@@ -75,6 +76,8 @@ import { parseTableOfContents } from "./table-of-contents";
 import {
   BuildLog,
   BuildLogs,
+  IBuildSpecs,
+  ProcessInfos,
   ScrollIntoViewMap,
   ScrollIntoViewRecord,
 } from "./types";
@@ -94,6 +97,7 @@ interface LatexEditorState extends CodeEditorState {
   includeError?: string;
   build_command_hardcoded?: boolean; // if true, an % !TeX cocalc = ... directive sets the command via the document itself
   contents?: TableOfContentsEntryList; // table of contents data.
+  proc_infos: ProcessInfos;
 }
 
 export class Actions extends BaseActions<LatexEditorState> {
@@ -694,7 +698,8 @@ export class Actions extends BaseActions<LatexEditorState> {
   }
 
   async run_build(time: number, force: boolean): Promise<void> {
-    (this as unknown as any).setState({ build_logs: Map() });
+    this.setState({ build_logs: Map() });
+    this.setState({ proc_infos: Map() });
 
     if (this.bad_filename) {
       const err = `ERROR: It is not possible to compile this LaTeX file with the name '${this.path}'.
@@ -846,6 +851,7 @@ export class Actions extends BaseActions<LatexEditorState> {
     }
     this.set_error("");
     this.set_build_logs({ latex: undefined });
+    this.set_proc_infos({ latex: undefined });
     if (typeof s == "string") {
       build_command = s;
     } else {
@@ -854,14 +860,18 @@ export class Actions extends BaseActions<LatexEditorState> {
     const status = (s) => this.set_status(`Running Latex... ${s}`);
     status("");
     try {
-      output = await latexmk(
+      const [info, job] = await latexmk(
         this.project_id,
         this.path,
         build_command,
         timestamp,
         status,
         this.get_output_directory(),
       );
+      this.set_proc_infos({ latex: info });
+      output = await job;
+      if (output.type !== "async") throw new Error("not an asnyc job");
+      this.set_proc_infos({ latex: output });
     } catch (err) {
       this.set_error(err);
       return;
@@ -1080,6 +1090,7 @@ export class Actions extends BaseActions<LatexEditorState> {
         status,
         this.get_output_directory(),
       );
+      if (!output) throw new Error("Unable to run SageTeX.");
       if (output.stderr.indexOf("sagetex.VersionError") != -1) {
         // See https://github.com/sagemathinc/cocalc/issues/4432
         throw Error(
@@ -1274,16 +1285,34 @@ export class Actions extends BaseActions<LatexEditorState> {
     });
   }
 
+  set_proc_infos(obj: {
+    [K in keyof IBuildSpecs]?: ExecuteCodeOutputAsync;
+  }): void {
+    let proc_infos: ProcessInfos = this.store.get("proc_infos");
+    if (!proc_infos) {
+      return;
+    }
+    for (const k in obj) {
+      const v: ExecuteCodeOutputAsync = obj[k];
+      if (!v) continue;
+      proc_infos = proc_infos.set(
+        k as any,
+        fromJS(v) as any as TypedMap<ExecOutput>,
+      );
+    }
+    this.setState({ proc_infos });
+  }
+
   set_build_logs(obj: { [K in keyof IBuildSpecs]?: BuildLog }): void {
     let build_logs: BuildLogs = this.store.get("build_logs");
     if (!build_logs) {
       // may have already been closed.
       return;
     }
-    let k: string;
-    for (k in obj) {
+    for (const k in obj) {
       const v: BuildLog = obj[k];
-      build_logs = build_logs.set(k, fromJS(v));
+      if (!v) continue;
+      build_logs = build_logs.set(k, fromJS(v) as any as TypedMap<BuildLog>);
     }
     this.setState({ build_logs });
   }
@@ -1296,7 +1325,10 @@ export class Actions extends BaseActions<LatexEditorState> {
       log += s + "\n";
       const build_logs: BuildLogs = this.store.get("build_logs");
       this.setState({
-        build_logs: build_logs.set("clean", fromJS({ output: log })),
+        build_logs: build_logs.set(
+          "clean",
+          fromJS({ output: log }) as any as TypedMap<BuildLog>,
+        ),
       });
     };
 

src/packages/frontend/frame-editors/latex-editor/build.tsx

@@ -11,29 +11,12 @@ import Ansi from "@cocalc/ansi-to-react";
 
 import { AntdTabItem, Tab, Tabs } from "@cocalc/frontend/antd-bootstrap";
 import { React, Rendered, useRedux } from "@cocalc/frontend/app-framework";
-import { IconName, Loading } from "@cocalc/frontend/components";
+import { Loading } from "@cocalc/frontend/components";
 import { path_split } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import { BuildCommand } from "./build-command";
-import { use_build_logs } from "./hooks";
-import { BuildLogs } from "./types";
-
-interface IBuildSpec {
-  button: boolean;
-  label: string;
-  icon: IconName;
-  tip: string;
-}
-
-export interface IBuildSpecs {
-  build: IBuildSpec;
-  latex: IBuildSpec;
-  bibtex: IBuildSpec;
-  sagetex: IBuildSpec;
-  pythontex: IBuildSpec;
-  knitr: IBuildSpec;
-  clean: IBuildSpec;
-}
+import { use_build_logs, use_proc_infos } from "./hooks";
+import { BuildLogs, IBuildSpecs, ProcessInfos } from "./types";
 
 const BUILD_SPECS: IBuildSpecs = {
   build: {
@@ -99,6 +82,7 @@ export const Build: React.FC<Props> = React.memo((props) => {
 
   const font_size = 0.8 * font_size_orig;
   const build_logs: BuildLogs = use_build_logs(name);
+  const proc_infos: ProcessInfos = use_proc_infos(name);
   const build_command = useRedux([name, "build_command"]);
   const build_command_hardcoded =
     useRedux([name, "build_command_hardcoded"]) ?? false;
@@ -218,6 +202,13 @@ export const Build: React.FC<Props> = React.memo((props) => {
     );
   }
 
+  function render_procs(): Rendered {
+    if (!proc_infos) return;
+    return (
+      <div style={{ margin: "15px" }}>procs={JSON.stringify(proc_infos)}</div>
+    );
+  }
+
   function render_status(): Rendered {
     if (status) {
       return (
@@ -251,6 +242,7 @@ export const Build: React.FC<Props> = React.memo((props) => {
     >
       {render_build_command()}
       {render_status()}
+      {render_procs()}
       {logs}
     </div>
   );

src/packages/frontend/frame-editors/latex-editor/hooks.ts

@@ -4,26 +4,36 @@
  */
 
 import { Map } from "immutable";
+import { isEqual } from "lodash";
 
 import { React, useRedux } from "@cocalc/frontend/app-framework";
-import { BuildLogs } from "./types";
+import { BuildLogs, ProcessInfos } from "./types";
 
 export function use_build_logs(name: string): BuildLogs {
-  const build_logs_next: BuildLogs =
-    useRedux([name, "build_logs"]) ?? Map<string, any>();
-  const [build_logs, set_build_logs] = React.useState<BuildLogs>(
-    Map<string, any>(),
-  );
+  return use_infos<BuildLogs>(name, "build_logs");
+}
+
+export function use_proc_infos(name: string): ProcessInfos {
+  return use_infos<ProcessInfos>(name, "proc_infos");
+}
+
+function use_infos<T extends Map<string, any>>(
+  name: string,
+  aspect: "build_logs" | "proc_infos",
+) {
+  const data_next: T = useRedux([name, aspect]) ?? Map<string, any>();
+  const [data, set_data] = React.useState<T>(Map<string, any>() as any as T);
 
-  // only update if any parsed logs differ
+  // only update if any parsed logs or process infos differ
   for (const key of ["latex", "knitr", "pythontex", "sagetex"]) {
-    if (
-      build_logs_next.getIn([key, "parse"]) != build_logs.getIn([key, "parse"])
-    ) {
-      set_build_logs(build_logs_next);
-      break;
+    const isDiff =
+      aspect === "build_logs"
+        ? data_next.getIn([key, "parse"]) != data.getIn([key, "parse"])
+        : !isEqual(data_next.get(key), data.get(key));
+    if (isDiff) {
+      set_data(data_next);
     }
   }
 
-  return build_logs;
+  return data;
 }