fix #8444 -- support latex and pdf viewing on compute servers

- this was pretty simple and probably fixed other issues involving
  things other than jupyter/latex on a compute server.
- obviously won't work without user actually installing latex, which is
  I think not installed on any compute server images

Author: williamstein

src/packages/frontend/file-associations.ts

@@ -216,7 +216,7 @@ file_associations["tex"] = {
   icon: "tex-file",
   opts: { mode: "stex2", indent_unit: 2, tab_size: 2, spellcheck: true },
   name: "LaTeX",
-  exclude_from_compute_server: true,
+  exclude_from_compute_server: false,
   ext: "tex",
 };
 

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

@@ -9,6 +9,7 @@ Utility functions useful for frame-tree editors.
 
 import { path_split, separate_file_extension } from "@cocalc/util/misc";
 import { fileURL } from "@cocalc/frontend/lib/cocalc-urls";
+import { getComputeServerId } from "@cocalc/frontend/frame-editors/generic/client";
 
 export function parse_path(path: string): {
   directory: string;
@@ -24,6 +25,13 @@ export function raw_url(
   project_id: string,
   path: string,
   compute_server_id?: number,
+  param?: string,
 ): string {
-  return fileURL({ project_id, path, compute_server_id });
+  return fileURL({
+    project_id,
+    path,
+    compute_server_id:
+      compute_server_id ?? getComputeServerId({ project_id, path }),
+    param,
+  });
 }

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

@@ -29,6 +29,22 @@ export function server_time(): Date {
   return webapp_client.time_client.server_time();
 }
 
+export function getComputeServerId({
+  project_id,
+  path,
+}: {
+  project_id: string;
+  path: string;
+}) {
+  let compute_server_id =
+    redux.getProjectActions(project_id).getComputeServerIdForFile({ path }) ??
+    0;
+  if (compute_server_id && excludeFromComputeServer(path)) {
+    compute_server_id = 0;
+  }
+  return compute_server_id;
+}
+
 // async version of the webapp_client exec -- let's you run any code in a project!
 // If the second argument filePath is the file this is being used for as a second argument,
 // it always runs code on the compute server that the given file is on.
@@ -37,13 +53,10 @@ export async function exec(
   filePath?: string,
 ): Promise<ExecOutput> {
   if (filePath) {
-    let compute_server_id =
-      redux
-        .getProjectActions(opts.project_id)
-        .getComputeServerIdForFile({ path: filePath }) ?? 0;
-    if (compute_server_id && excludeFromComputeServer(filePath)) {
-      compute_server_id = 0;
-    }
+    const compute_server_id = getComputeServerId({
+      project_id: opts.project_id,
+      path: filePath,
+    });
     opts = { ...opts, compute_server_id };
   }
   return await webapp_client.project_client.exec(opts);

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

@@ -21,7 +21,6 @@ import { ErrorsAndWarnings } from "./errors-and-warnings";
 import { LatexWordCount } from "./latex-word-count";
 import { PDFEmbed } from "./pdf-embed";
 import { PDFJS } from "./pdfjs";
-import { pdf_path } from "./util";
 
 export const pdfjsCommands = set([
   "print",
@@ -114,7 +113,6 @@ const pdfjs_canvas: EditorDescription = {
     "print",
     "download_pdf",
   ]),
-  path: pdf_path,
   renderer: "canvas",
 } as const;
 
@@ -177,7 +175,6 @@ const pdf_embed: EditorDescription = {
   icon: "file-pdf",
   commands: set(["print", "save", "download"]),
   component: PDFEmbed,
-  path: pdf_path,
 } as const;
 
 const EDITOR_SPEC = {

src/packages/frontend/frame-editors/latex-editor/pdf-embed.tsx

@@ -9,6 +9,8 @@ This is a renderer using the embed tag, so works with browsers that have a PDF v
 
 import { React } from "@cocalc/frontend/app-framework";
 import { raw_url } from "@cocalc/frontend/frame-editors/frame-tree/util";
+import { pdf_path } from "./util";
+import { getComputeServerId } from "@cocalc/frontend/frame-editors/generic/client";
 
 export interface Props {
   actions: any;
@@ -25,7 +27,12 @@ export const PDFEmbed: React.FC<Props> = React.memo((props: Props) => {
   const embedRef = React.useRef<any>(null);
 
   function render_embed(): React.JSX.Element {
-    const src: string = `${raw_url(project_id, path)}?param=${reload}`;
+    let src = raw_url(
+      project_id,
+      pdf_path(path),
+      getComputeServerId({ project_id, path }),
+      `param=${reload}`,
+    );
     return (
       <embed
         ref={embedRef}

src/packages/frontend/frame-editors/latex-editor/pdfjs-doc-cache.ts

@@ -38,9 +38,9 @@ import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 */
 import { getDocument as pdfjs_getDocument } from "pdfjs-dist";
 import type { PDFDocumentProxy } from "pdfjs-dist/webpack.mjs";
-
 import { raw_url } from "@cocalc/frontend/frame-editors/frame-tree/util";
 import { pdf_path } from "./util";
+import { getComputeServerId } from "@cocalc/frontend/frame-editors/generic/client";
 
 const options = {
   maxSize: MAX_PAGES,
@@ -54,8 +54,12 @@ export function url_to_pdf(
   path: string,
   reload: number,
 ): string {
-  const url = raw_url(project_id, pdf_path(path));
-  return `${url}?param=${reload}`;
+  return raw_url(
+    project_id,
+    pdf_path(path),
+    getComputeServerId({ project_id, path }),
+    `param=${reload}`,
+  );
 }
 
 const doc_cache = new LRU(options);

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

@@ -13,7 +13,6 @@ import type { Set as iSet } from "immutable";
 import type { PDFDocumentProxy, PDFPageProxy } from "pdfjs-dist/webpack.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
-
 import {
   redux,
   useActions,

src/packages/frontend/lib/cocalc-urls.ts

@@ -12,15 +12,24 @@ export function fileURL({
   project_id,
   compute_server_id,
   path,
+  param,
 }: {
   project_id: string;
   path: string;
   compute_server_id?: number;
+  param?: string;
 }): string {
   let url = join(appBasePath, project_id, "files", encode_path(path));
   if (compute_server_id) {
     url += `?id=${compute_server_id}`;
   }
+  if (param) {
+    if (compute_server_id) {
+      url += "&" + param;
+    } else {
+      url += "?" + param;
+    }
+  }
   return url;
 }