Merge pull request #8604 from sagemathinc/latex-output-fixes1

frontend/latex/output improvements

Author: williamstein

src/AGENTS.md

@@ -223,3 +223,4 @@ Same flow as above, but **before 3. i18n:upload**, delete the key. Only new keys
 - ALWAYS prefer editing an existing file to creating a new one
 - REFUSE to modify files when the git repository is on the `master` or `main` branch
 - NEVER proactively create documentation files (`*.md`) or README files. Only create documentation files if explicitly requested by the User
+- when modifying a file with a copyright banner at the top, make sure to fix/add the current year to indicate the copyright year

src/packages/frontend/account/dark-mode.ts

@@ -3,23 +3,24 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { throttle, isEqual } from "lodash";
+import { isEqual, debounce } from "lodash";
+
+import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { AccountStore } from "./store";
 
-export const dark_mode_mins = {
-  brightness: 20,
-  contrast: 20,
+export const DARK_MODE_KEYS = ["brightness", "contrast", "sepia"] as const;
+
+// Icon unicode character for dark mode toggle (◑ - circle with right half black)
+export const DARK_MODE_ICON = 0x25d1;
+
+type Config = Record<(typeof DARK_MODE_KEYS)[number], number>;
+
+export const DARK_MODE_MINS: Config = {
+  brightness: 30,
+  contrast: 30,
   sepia: 0,
-  grayscale: 0,
 } as const;
 
-interface Config {
-  brightness: number;
-  contrast: number;
-  sepia: number;
-  grayscale: number;
-}
-
 // Returns number between 0 and 100.
 function to_number(x: any, default_value: number): number {
   if (x == null) return default_value;
@@ -44,25 +45,17 @@ export function get_dark_mode_config(other_settings?: {
   dark_mode_brightness?: number;
   dark_mode_contrast?: number;
   dark_mode_sepia?: number;
-  dark_mode_grayscale?: number;
 }): Config {
-  const brightness = Math.max(
-    dark_mode_mins.brightness,
-    to_number(other_settings?.dark_mode_brightness, 100),
-  );
-  const contrast = Math.max(
-    dark_mode_mins.contrast,
-    to_number(other_settings?.dark_mode_contrast, 90),
-  );
-  const sepia = to_number(
-    other_settings?.dark_mode_sepia,
-    dark_mode_mins.sepia,
-  );
-  const grayscale = to_number(
-    other_settings?.dark_mode_grayscale,
-    dark_mode_mins.grayscale,
-  );
-  return { brightness, contrast, sepia, grayscale };
+  const config = {} as Config;
+
+  for (const key of DARK_MODE_KEYS) {
+    config[key] = Math.max(
+      DARK_MODE_MINS[key],
+      to_number(other_settings?.[`dark_mode_${key}`], DARK_MODE_DEFAULTS[key]),
+    );
+  }
+
+  return config;
 }
 
 let currentDarkMode: boolean = false;
@@ -71,27 +64,35 @@ let last_config: Config | undefined = undefined;
 export function init_dark_mode(account_store: AccountStore): void {
   account_store.on(
     "change",
-    throttle(async () => {
-      const dark_mode = !!account_store.getIn(["other_settings", "dark_mode"]);
-      currentDarkMode = dark_mode;
-      const config = get_dark_mode_config(
-        account_store.get("other_settings")?.toJS(),
-      );
-      if (
-        dark_mode == last_dark_mode &&
-        (!dark_mode || isEqual(last_config, config))
-      ) {
-        return;
-      }
-      const { enable, disable } = await import("darkreader");
-      last_dark_mode = dark_mode;
-      last_config = config;
-      if (dark_mode) {
-        enable(config);
-      } else {
-        disable();
-      }
-    }, 3000),
+    debounce(
+      async () => {
+        const dark_mode = !!account_store.getIn([
+          "other_settings",
+          "dark_mode",
+        ]);
+        currentDarkMode = dark_mode;
+        const config = get_dark_mode_config(
+          account_store.get("other_settings")?.toJS(),
+        );
+        if (
+          dark_mode == last_dark_mode &&
+          (!dark_mode || isEqual(last_config, config))
+        ) {
+          return;
+        }
+        const { enable, disable } = await import("darkreader");
+        last_dark_mode = dark_mode;
+        last_config = config;
+        if (dark_mode) {
+          disable();
+          enable(config);
+        } else {
+          disable();
+        }
+      },
+      1000,
+      { trailing: true, leading: false },
+    ),
   );
 }
 

src/packages/frontend/account/other-settings.tsx

@@ -3,9 +3,11 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Card, InputNumber } from "antd";
+import { Button, Card, Slider } from "antd";
+import { debounce } from "lodash";
 import { Map } from "immutable";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useMemo } from "react";
+import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 
 import { Checkbox, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { Rendered, redux, useTypedRedux } from "@cocalc/frontend/app-framework";
@@ -41,13 +43,34 @@ import track from "@cocalc/frontend/user-tracking";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import { DEFAULT_NEW_FILENAMES, NEW_FILENAMES } from "@cocalc/util/db-schema";
 import { OTHER_SETTINGS_REPLY_ENGLISH_KEY } from "@cocalc/util/i18n/const";
-import { dark_mode_mins, get_dark_mode_config } from "./dark-mode";
+import {
+  DARK_MODE_ICON,
+  DARK_MODE_KEYS,
+  DARK_MODE_MINS,
+  get_dark_mode_config,
+} from "./dark-mode";
+import { DARK_MODE_DEFAULTS } from "@cocalc/util/db-schema/accounts";
 import { I18NSelector, I18N_MESSAGE, I18N_TITLE } from "./i18n-selector";
 import Messages from "./messages";
 import Tours from "./tours";
 import { useLanguageModelSetting } from "./useLanguageModelSetting";
 import { UserDefinedLLMComponent } from "./user-defined-llm";
 
+const DARK_MODE_LABELS = defineMessages({
+  brightness: {
+    id: "account.other-settings.theme.dark_mode.brightness",
+    defaultMessage: "Brightness",
+  },
+  contrast: {
+    id: "account.other-settings.theme.dark_mode.contrast",
+    defaultMessage: "Contrast",
+  },
+  sepia: {
+    id: "account.other-settings.theme.dark_mode.sepia",
+    defaultMessage: "Sepia",
+  },
+});
+
 // See https://github.com/sagemathinc/cocalc/issues/5620
 // There are weird bugs with relying only on mathjax, whereas our
 // implementation of katex with a fallback to mathjax works very well.
@@ -79,6 +102,16 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
     redux.getActions("account").set_other_settings(name, value);
   }
 
+  // Debounced version for dark mode sliders to reduce CPU usage
+  const on_change_dark_mode = useMemo(
+    () =>
+      debounce((name: string, value: any) => on_change(name, value), 50, {
+        trailing: true,
+        leading: false,
+      }),
+    [],
+  );
+
   function toggle_global_banner(val: boolean): void {
     if (val) {
       // this must be "null", not "undefined" – otherwise the data isn't stored in the DB.
@@ -363,7 +396,6 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
   function render_dark_mode(): Rendered {
     const checked = !!props.other_settings.get("dark_mode");
     const config = get_dark_mode_config(props.other_settings.toJS());
-    const label_style = { width: "100px", display: "inline-block" } as const;
     return (
       <div>
         <Checkbox
@@ -395,62 +427,51 @@ export function OtherSettings(props: Readonly<Props>): React.JSX.Element {
         {checked ? (
           <Card
             size="small"
-            title={intl.formatMessage({
-              id: "account.other-settings.theme.dark_mode.configuration",
-              defaultMessage: "Dark Mode Configuration",
-            })}
+            title={
+              <>
+                <Icon unicode={DARK_MODE_ICON} />{" "}
+                {intl.formatMessage({
+                  id: "account.other-settings.theme.dark_mode.configuration",
+                  defaultMessage: "Dark Mode Configuration",
+                })}
+              </>
+            }
           >
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.brightness"
-                defaultMessage="Brightness"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.brightness}
-              max={100}
-              value={config.brightness}
-              onChange={(x) => on_change("dark_mode_brightness", x)}
-            />
-            <br />
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.contrast"
-                defaultMessage="Contrast"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.contrast}
-              max={100}
-              value={config.contrast}
-              onChange={(x) => on_change("dark_mode_contrast", x)}
-            />
-            <br />
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.sepia"
-                defaultMessage="Sepia"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.sepia}
-              max={100}
-              value={config.sepia}
-              onChange={(x) => on_change("dark_mode_sepia", x)}
-            />
-            <br />
-            <span style={label_style}>
-              <FormattedMessage
-                id="account.other-settings.theme.dark_mode.grayscale"
-                defaultMessage="Grayscale"
-              />
-            </span>
-            <InputNumber
-              min={dark_mode_mins.grayscale}
-              max={100}
-              value={config.grayscale}
-              onChange={(x) => on_change("dark_mode_grayscale", x)}
-            />
+            <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+              {DARK_MODE_KEYS.map((key) => (
+                <div
+                  key={key}
+                  style={{ display: "flex", gap: 10, alignItems: "center" }}
+                >
+                  <div style={{ width: 100 }}>
+                    {intl.formatMessage(DARK_MODE_LABELS[key])}
+                  </div>
+                  <Slider
+                    min={DARK_MODE_MINS[key]}
+                    max={100}
+                    value={config[key]}
+                    onChange={(x) => on_change_dark_mode(`dark_mode_${key}`, x)}
+                    marks={{
+                      [DARK_MODE_DEFAULTS[key]]: String(
+                        DARK_MODE_DEFAULTS[key],
+                      ),
+                    }}
+                    style={{ flex: 1, width: 0 }}
+                  />
+                  <Button
+                    size="small"
+                    onClick={() =>
+                      on_change_dark_mode(
+                        `dark_mode_${key}`,
+                        DARK_MODE_DEFAULTS[key],
+                      )
+                    }
+                  >
+                    {intl.formatMessage(labels.reset)}
+                  </Button>
+                </div>
+              ))}
+            </div>
           </Card>
         ) : undefined}
       </div>

src/packages/frontend/account/types.ts

@@ -51,7 +51,6 @@ export interface AccountState {
     dark_mode_brightness: number;
     dark_mode_contrast: number;
     dark_mode_sepia: number;
-    dark_mode_grayscale: number;
     news_read_until: number; // JavaScript timestamp in milliseconds
     [OTHER_SETTINGS_USERDEFINED_LLM]: string; // string is JSON: CustomLLM[]
     [OTHER_SETTINGS_LOCALE_KEY]?: string;

src/packages/frontend/client/client.ts

@@ -121,13 +121,13 @@ export const WebappClient = null; // webpack + TS es2020 modules need this
 /*
 Connection events:
    - 'connecting' -- trying to establish a connection
-   - 'connected'  -- succesfully established a connection; data is the protocol as a string
+   - 'connected'  -- successfully established a connection; data is the protocol as a string
    - 'error'      -- called when an error occurs
    - 'output'     -- received some output for stateless execution (not in any session)
    - 'execute_javascript' -- code that server wants client to run (not for a particular session)
    - 'message'    -- emitted when a JSON message is received           on('message', (obj) -> ...)
    - 'data'       -- emitted when raw data (not JSON) is received --   on('data, (id, data) -> )...
-   - 'signed_in'  -- server pushes a succesful sign in to the client (e.g., due to
+   - 'signed_in'  -- server pushes a successful sign in to the client (e.g., due to
                      'remember me' functionality); data is the signed_in message.
    - 'project_list_updated' -- sent whenever the list of projects owned by this user
                      changed; data is empty -- browser could ignore this unless

src/packages/frontend/components/icon.tsx

@@ -192,7 +192,9 @@ import {
   StopFilled,
   StopOutlined,
   StrikethroughOutlined,
+  SwapLeftOutlined,
   SwapOutlined,
+  SwapRightOutlined,
   SyncOutlined,
   TableOutlined,
   TagFilled,
@@ -599,6 +601,8 @@ const IconSpec = {
   ungroup: { IconFont: "ungroup" },
   "signature-outlined": SignatureOutlined,
   swap: SwapOutlined,
+  "sync-left": SwapLeftOutlined,
+  "sync-right": SwapRightOutlined,
   unlink: { IconFont: "unlink" },
   upload: UploadOutlined,
   user: UserOutlined,
@@ -744,8 +748,24 @@ export const Icon: React.FC<Props> = (props: Props) => {
   if (!onFrontend) return null;
 
   if (props.unicode != null) {
+    const style: React.CSSProperties = { ...UNICODE_STYLE, ...props.style };
+
+    // Apply CSS transformations for unicode characters
+    if (props.rotate) {
+      style.display = style.display ?? "inline-block";
+      style.transform = `rotate(${props.rotate}deg)`;
+    }
+    if (props.flip) {
+      style.display = style.display ?? "inline-block";
+      const flipTransform =
+        props.flip === "horizontal" ? "scaleX(-1)" : "scaleY(-1)";
+      style.transform = style.transform
+        ? `${style.transform} ${flipTransform}`
+        : flipTransform;
+    }
+
     return (
-      <span style={{ ...UNICODE_STYLE, ...props.style }}>
+      <span style={style}>
         {String.fromCharCode(props.unicode!)}
       </span>
     );