From a55a00e36096561572630b4af52ca992b26a1fea Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 3 Sep 2025 04:31:06 -0400 Subject: [PATCH 1/8] fix(editor): Ensure page reloads after toggling prettify state (fixes #379). --- src/components/Editor/index.tsx | 13 +++----- src/components/StatusBar/index.tsx | 31 +++++------------ .../viewStore/createViewFormattingSlice.ts | 33 +++++++++++++++++++ 3 files changed, 46 insertions(+), 31 deletions(-) diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 4cb781dcc..155fa2344 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -10,14 +10,15 @@ import { import {useColorScheme} from "@mui/joy"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; +import {handleErrorWithNotification} from "../../stores/notificationStore.ts"; import useQueryStore from "../../stores/queryStore"; import useViewStore from "../../stores/viewStore"; +import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice.ts"; import {Nullable} from "../../typings/common"; import { CONFIG_KEY, THEME_NAME, } from "../../typings/config"; -import {HASH_PARAM_NAMES} from "../../typings/url"; import {BeginLineNumToLogEventNumMap} from "../../typings/worker"; import { ACTION_NAME, @@ -163,13 +164,9 @@ const handleEditorCustomAction = ( break; } case ACTION_NAME.TOGGLE_PRETTIFY: { - const {isPrettified, setIsPrettified} = useViewStore.getState(); - const newIsPrettified = !isPrettified; - updateWindowUrlHashParams({ - [HASH_PARAM_NAMES.IS_PRETTIFIED]: newIsPrettified, - }); - setIsPrettified(newIsPrettified); - updateViewHashParams(); + (async () => { + await togglePrettify(); + })().catch(handleErrorWithNotification); break; } case ACTION_NAME.TOGGLE_WORD_WRAP: diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx index 8c495dc0c..85295dbe4 100644 --- a/src/components/StatusBar/index.tsx +++ b/src/components/StatusBar/index.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from "react"; +import {useCallback} from "react"; import { Button, @@ -12,17 +12,14 @@ import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh"; import AutoFixOffIcon from "@mui/icons-material/AutoFixOff"; import useLogFileStore from "../../stores/logFileStore"; +import {handleErrorWithNotification} from "../../stores/notificationStore.ts"; import useUiStore from "../../stores/uiStore"; import useViewStore from "../../stores/viewStore"; +import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice.ts"; import {UI_ELEMENT} from "../../typings/states"; -import {HASH_PARAM_NAMES} from "../../typings/url"; import {ACTION_NAME} from "../../utils/actions"; import {isDisabled} from "../../utils/states"; -import { - copyPermalinkToClipboard, - updateWindowUrlHashParams, -} from "../../utils/url"; -import {updateViewHashParams} from "../../utils/url/urlHash"; +import {copyPermalinkToClipboard} from "../../utils/url"; import LogLevelSelect from "./LogLevelSelect"; import StatusBarToggleButton from "./StatusBarToggleButton"; @@ -47,21 +44,9 @@ const StatusBar = () => { const numEvents = useLogFileStore((state) => state.numEvents); const uiState = useUiStore((state) => state.uiState); - const handleStatusButtonClick = useCallback((ev: React.MouseEvent) => { - const {actionName} = ev.currentTarget.dataset; - - switch (actionName) { - case ACTION_NAME.TOGGLE_PRETTIFY: - updateWindowUrlHashParams({ - [HASH_PARAM_NAMES.IS_PRETTIFIED]: false === isPrettified, - }); - updateViewHashParams(); - break; - default: - console.error(`Unexpected action: ${actionName}`); - break; - } - }, [isPrettified]); + const handlePrettifyToggle = useCallback(() => { + togglePrettify().catch(handleErrorWithNotification); + }, []); const isPrettifyButtonDisabled = isDisabled(uiState, UI_ELEMENT.PRETTIFY_BUTTON); @@ -104,7 +89,7 @@ const StatusBar = () => { tooltipTitle={false === isPrettified ? "Turn on Prettify" : "Turn off Prettify"} - onClick={handleStatusButtonClick}/> + onClick={handlePrettifyToggle}/> ); }; diff --git a/src/stores/viewStore/createViewFormattingSlice.ts b/src/stores/viewStore/createViewFormattingSlice.ts index 3439f6619..946f0ed40 100644 --- a/src/stores/viewStore/createViewFormattingSlice.ts +++ b/src/stores/viewStore/createViewFormattingSlice.ts @@ -1,5 +1,12 @@ import {StateCreator} from "zustand"; +import {HASH_PARAM_NAMES} from "../../typings/url.ts"; +import {CURSOR_CODE} from "../../typings/worker.ts"; +import {updateWindowUrlHashParams} from "../../utils/url"; +import {updateViewHashParams} from "../../utils/url/urlHash.ts"; +import useLogFileManagerProxyStore from "../logFileManagerProxyStore.ts"; +import {handleErrorWithNotification} from "../notificationStore.ts"; +import useViewStore from "./index.ts"; import { ViewFormattingSlice, ViewFormattingValues, @@ -11,6 +18,31 @@ const VIEW_FORMATTING_DEFAULT: ViewFormattingValues = { isPrettified: false, }; +/** + * Toggles the prettify state for formatted log viewing. + */ +const togglePrettify = async () => { + const {logEventNum, loadPageByCursor, isPrettified, setIsPrettified} = useViewStore.getState(); + const newIsPrettified = !isPrettified; + + // Update the URL and store state. + updateWindowUrlHashParams({[HASH_PARAM_NAMES.IS_PRETTIFIED]: newIsPrettified}); + setIsPrettified(newIsPrettified); + + // Update the log file manager and reload the page. + try { + const {logFileManagerProxy} = useLogFileManagerProxyStore.getState(); + await logFileManagerProxy.setIsPrettified(newIsPrettified); + await loadPageByCursor({ + code: CURSOR_CODE.EVENT_NUM, + args: {eventNum: logEventNum}, + }); + updateViewHashParams(); + } catch (error) { + handleErrorWithNotification(error); + } +}; + /** * Creates a slice for managing log formatting state. * @@ -26,4 +58,5 @@ const createViewFormattingSlice: StateCreator< }, }); +export {togglePrettify}; export default createViewFormattingSlice; From 5c6f3a18c93aa501a942d293e8ad4cc4edb51949 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 5 Sep 2025 14:37:12 -0400 Subject: [PATCH 2/8] chore(editor): Remove TypeScript extensions from imports. --- src/components/Editor/index.tsx | 4 ++-- src/components/StatusBar/index.tsx | 4 ++-- src/stores/viewStore/createViewFormattingSlice.ts | 12 ++++++------ 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 155fa2344..b4d6be50d 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -10,10 +10,10 @@ import { import {useColorScheme} from "@mui/joy"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; -import {handleErrorWithNotification} from "../../stores/notificationStore.ts"; +import {handleErrorWithNotification} from "../../stores/notificationStore"; import useQueryStore from "../../stores/queryStore"; import useViewStore from "../../stores/viewStore"; -import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice.ts"; +import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice"; import {Nullable} from "../../typings/common"; import { CONFIG_KEY, diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx index 85295dbe4..969335f74 100644 --- a/src/components/StatusBar/index.tsx +++ b/src/components/StatusBar/index.tsx @@ -12,10 +12,10 @@ import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh"; import AutoFixOffIcon from "@mui/icons-material/AutoFixOff"; import useLogFileStore from "../../stores/logFileStore"; -import {handleErrorWithNotification} from "../../stores/notificationStore.ts"; +import {handleErrorWithNotification} from "../../stores/notificationStore"; import useUiStore from "../../stores/uiStore"; import useViewStore from "../../stores/viewStore"; -import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice.ts"; +import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice"; import {UI_ELEMENT} from "../../typings/states"; import {ACTION_NAME} from "../../utils/actions"; import {isDisabled} from "../../utils/states"; diff --git a/src/stores/viewStore/createViewFormattingSlice.ts b/src/stores/viewStore/createViewFormattingSlice.ts index 946f0ed40..c0056c624 100644 --- a/src/stores/viewStore/createViewFormattingSlice.ts +++ b/src/stores/viewStore/createViewFormattingSlice.ts @@ -1,12 +1,12 @@ import {StateCreator} from "zustand"; -import {HASH_PARAM_NAMES} from "../../typings/url.ts"; -import {CURSOR_CODE} from "../../typings/worker.ts"; +import {HASH_PARAM_NAMES} from "../../typings/url"; +import {CURSOR_CODE} from "../../typings/worker"; import {updateWindowUrlHashParams} from "../../utils/url"; -import {updateViewHashParams} from "../../utils/url/urlHash.ts"; -import useLogFileManagerProxyStore from "../logFileManagerProxyStore.ts"; -import {handleErrorWithNotification} from "../notificationStore.ts"; -import useViewStore from "./index.ts"; +import {updateViewHashParams} from "../../utils/url/urlHash"; +import useLogFileManagerProxyStore from "../logFileManagerProxyStore"; +import {handleErrorWithNotification} from "../notificationStore"; +import useViewStore from "./index"; import { ViewFormattingSlice, ViewFormattingValues, From 004647a0d4c5b08f05a17b47acd21194cc81ebb2 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 5 Sep 2025 14:40:26 -0400 Subject: [PATCH 3/8] Simplify implementation of togglePrettify - Apply suggestions from code review Co-authored-by: Henry8192 <50559854+Henry8192@users.noreply.github.com> --- .../viewStore/createViewFormattingSlice.ts | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/stores/viewStore/createViewFormattingSlice.ts b/src/stores/viewStore/createViewFormattingSlice.ts index c0056c624..96475772f 100644 --- a/src/stores/viewStore/createViewFormattingSlice.ts +++ b/src/stores/viewStore/createViewFormattingSlice.ts @@ -21,26 +21,10 @@ const VIEW_FORMATTING_DEFAULT: ViewFormattingValues = { /** * Toggles the prettify state for formatted log viewing. */ -const togglePrettify = async () => { - const {logEventNum, loadPageByCursor, isPrettified, setIsPrettified} = useViewStore.getState(); - const newIsPrettified = !isPrettified; - - // Update the URL and store state. - updateWindowUrlHashParams({[HASH_PARAM_NAMES.IS_PRETTIFIED]: newIsPrettified}); - setIsPrettified(newIsPrettified); - - // Update the log file manager and reload the page. - try { - const {logFileManagerProxy} = useLogFileManagerProxyStore.getState(); - await logFileManagerProxy.setIsPrettified(newIsPrettified); - await loadPageByCursor({ - code: CURSOR_CODE.EVENT_NUM, - args: {eventNum: logEventNum}, - }); - updateViewHashParams(); - } catch (error) { - handleErrorWithNotification(error); - } +const togglePrettify = () => { + const {isPrettified} = useViewStore.getState(); + updateWindowUrlHashParams({[HASH_PARAM_NAMES.IS_PRETTIFIED]: !isPrettified}); + updateViewHashParams(); }; /** From 363f08131cfb2c81f84850491f58b527b52efe78 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 5 Sep 2025 14:42:20 -0400 Subject: [PATCH 4/8] refactor(editor): Remove redundant error handling around togglePrettify. --- src/components/Editor/index.tsx | 5 +---- src/components/StatusBar/index.tsx | 3 +-- src/stores/viewStore/createViewFormattingSlice.ts | 3 --- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index b4d6be50d..707825e51 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -10,7 +10,6 @@ import { import {useColorScheme} from "@mui/joy"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; -import {handleErrorWithNotification} from "../../stores/notificationStore"; import useQueryStore from "../../stores/queryStore"; import useViewStore from "../../stores/viewStore"; import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice"; @@ -164,9 +163,7 @@ const handleEditorCustomAction = ( break; } case ACTION_NAME.TOGGLE_PRETTIFY: { - (async () => { - await togglePrettify(); - })().catch(handleErrorWithNotification); + togglePrettify(); break; } case ACTION_NAME.TOGGLE_WORD_WRAP: diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx index 969335f74..ae5b3f8f7 100644 --- a/src/components/StatusBar/index.tsx +++ b/src/components/StatusBar/index.tsx @@ -12,7 +12,6 @@ import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh"; import AutoFixOffIcon from "@mui/icons-material/AutoFixOff"; import useLogFileStore from "../../stores/logFileStore"; -import {handleErrorWithNotification} from "../../stores/notificationStore"; import useUiStore from "../../stores/uiStore"; import useViewStore from "../../stores/viewStore"; import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice"; @@ -45,7 +44,7 @@ const StatusBar = () => { const uiState = useUiStore((state) => state.uiState); const handlePrettifyToggle = useCallback(() => { - togglePrettify().catch(handleErrorWithNotification); + togglePrettify(); }, []); const isPrettifyButtonDisabled = isDisabled(uiState, UI_ELEMENT.PRETTIFY_BUTTON); diff --git a/src/stores/viewStore/createViewFormattingSlice.ts b/src/stores/viewStore/createViewFormattingSlice.ts index 96475772f..07e5cf0ae 100644 --- a/src/stores/viewStore/createViewFormattingSlice.ts +++ b/src/stores/viewStore/createViewFormattingSlice.ts @@ -1,11 +1,8 @@ import {StateCreator} from "zustand"; import {HASH_PARAM_NAMES} from "../../typings/url"; -import {CURSOR_CODE} from "../../typings/worker"; import {updateWindowUrlHashParams} from "../../utils/url"; import {updateViewHashParams} from "../../utils/url/urlHash"; -import useLogFileManagerProxyStore from "../logFileManagerProxyStore"; -import {handleErrorWithNotification} from "../notificationStore"; import useViewStore from "./index"; import { ViewFormattingSlice, From 71c0456eaceb86eb8b424a0b481379ad2084ba7b Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 7 Sep 2025 19:18:25 -0400 Subject: [PATCH 5/8] refactor(statusBar): Simplify prettify toggle handler by removing useCallback. --- src/components/StatusBar/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx index ae5b3f8f7..b7b7969b5 100644 --- a/src/components/StatusBar/index.tsx +++ b/src/components/StatusBar/index.tsx @@ -1,5 +1,3 @@ -import {useCallback} from "react"; - import { Button, Divider, @@ -43,10 +41,6 @@ const StatusBar = () => { const numEvents = useLogFileStore((state) => state.numEvents); const uiState = useUiStore((state) => state.uiState); - const handlePrettifyToggle = useCallback(() => { - togglePrettify(); - }, []); - const isPrettifyButtonDisabled = isDisabled(uiState, UI_ELEMENT.PRETTIFY_BUTTON); return ( @@ -88,7 +82,7 @@ const StatusBar = () => { tooltipTitle={false === isPrettified ? "Turn on Prettify" : "Turn off Prettify"} - onClick={handlePrettifyToggle}/> + onClick={togglePrettify}/> ); }; From 3603252f6accd0b5e54131e62d238ef55b4479c2 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 7 Sep 2025 19:24:27 -0400 Subject: [PATCH 6/8] refactor(viewStore): Move togglePrettify to urlHash utils. --- src/components/Editor/index.tsx | 6 ++++-- src/components/StatusBar/index.tsx | 2 +- src/stores/viewStore/createViewFormattingSlice.ts | 14 -------------- src/utils/url/urlHash.ts | 11 +++++++++++ 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 707825e51..3800e1915 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -12,7 +12,6 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import useQueryStore from "../../stores/queryStore"; import useViewStore from "../../stores/viewStore"; -import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice"; import {Nullable} from "../../typings/common"; import { CONFIG_KEY, @@ -33,7 +32,10 @@ import { getMapValueWithNearestLessThanOrEqualKey, } from "../../utils/data"; import {updateWindowUrlHashParams} from "../../utils/url"; -import {updateViewHashParams} from "../../utils/url/urlHash"; +import { + togglePrettify, + updateViewHashParams, +} from "../../utils/url/urlHash"; import MonacoInstance from "./MonacoInstance"; import {goToPositionAndCenter} from "./MonacoInstance/utils"; diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx index b7b7969b5..5177bb264 100644 --- a/src/components/StatusBar/index.tsx +++ b/src/components/StatusBar/index.tsx @@ -12,11 +12,11 @@ import AutoFixOffIcon from "@mui/icons-material/AutoFixOff"; import useLogFileStore from "../../stores/logFileStore"; import useUiStore from "../../stores/uiStore"; import useViewStore from "../../stores/viewStore"; -import {togglePrettify} from "../../stores/viewStore/createViewFormattingSlice"; import {UI_ELEMENT} from "../../typings/states"; import {ACTION_NAME} from "../../utils/actions"; import {isDisabled} from "../../utils/states"; import {copyPermalinkToClipboard} from "../../utils/url"; +import {togglePrettify} from "../../utils/url/urlHash"; import LogLevelSelect from "./LogLevelSelect"; import StatusBarToggleButton from "./StatusBarToggleButton"; diff --git a/src/stores/viewStore/createViewFormattingSlice.ts b/src/stores/viewStore/createViewFormattingSlice.ts index 07e5cf0ae..3439f6619 100644 --- a/src/stores/viewStore/createViewFormattingSlice.ts +++ b/src/stores/viewStore/createViewFormattingSlice.ts @@ -1,9 +1,5 @@ import {StateCreator} from "zustand"; -import {HASH_PARAM_NAMES} from "../../typings/url"; -import {updateWindowUrlHashParams} from "../../utils/url"; -import {updateViewHashParams} from "../../utils/url/urlHash"; -import useViewStore from "./index"; import { ViewFormattingSlice, ViewFormattingValues, @@ -15,15 +11,6 @@ const VIEW_FORMATTING_DEFAULT: ViewFormattingValues = { isPrettified: false, }; -/** - * Toggles the prettify state for formatted log viewing. - */ -const togglePrettify = () => { - const {isPrettified} = useViewStore.getState(); - updateWindowUrlHashParams({[HASH_PARAM_NAMES.IS_PRETTIFIED]: !isPrettified}); - updateViewHashParams(); -}; - /** * Creates a slice for managing log formatting state. * @@ -39,5 +26,4 @@ const createViewFormattingSlice: StateCreator< }, }); -export {togglePrettify}; export default createViewFormattingSlice; diff --git a/src/utils/url/urlHash.ts b/src/utils/url/urlHash.ts index 6b44109c7..29eea2a9a 100644 --- a/src/utils/url/urlHash.ts +++ b/src/utils/url/urlHash.ts @@ -4,6 +4,7 @@ import {handleErrorWithNotification} from "../../stores/notificationStore"; import useQueryStore from "../../stores/queryStore"; import useViewStore from "../../stores/viewStore"; import {Nullable} from "../../typings/common"; +import {HASH_PARAM_NAMES} from "../../typings/url"; import { CURSOR_CODE, CursorType, @@ -153,7 +154,17 @@ const updateQueryHashParams = () => { return isQueryModified; }; +/** + * Toggles the prettify state for formatted log viewing. + */ +const togglePrettify = () => { + const {isPrettified} = useViewStore.getState(); + updateWindowUrlHashParams({[HASH_PARAM_NAMES.IS_PRETTIFIED]: !isPrettified}); + updateViewHashParams(); +}; + export { + togglePrettify, updateQueryHashParams, updateViewHashParams, }; From e5c6b428b4b13104df26b3e9ee00a10355081037 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 7 Sep 2025 19:52:13 -0400 Subject: [PATCH 7/8] Clarify prettify toggle options in documentation. --- docs/src/dev-guide/contributing-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/dev-guide/contributing-validation.md b/docs/src/dev-guide/contributing-validation.md index 12f597409..54cbf687d 100644 --- a/docs/src/dev-guide/contributing-validation.md +++ b/docs/src/dev-guide/contributing-validation.md @@ -39,6 +39,6 @@ still be tested manually: * Exporting all logs to a file * Toggling tabbed panels in the sidebar * Using keyboard shortcuts - * Toggling "Prettify" in both the status bar and the address bar + * Toggling "Prettify" via the status bar button, the address bar (URL hash), and Monaco action [gh-workflow-test]: https://github.com/y-scope/yscope-log-viewer/blob/main/.github/workflows/test.yaml From f633b7583b9ee01c16e5a2ea80127b338e4c254b Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Mon, 8 Sep 2025 14:19:13 -0400 Subject: [PATCH 8/8] add missing article "the" --- docs/src/dev-guide/contributing-validation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/dev-guide/contributing-validation.md b/docs/src/dev-guide/contributing-validation.md index 54cbf687d..8613cd725 100644 --- a/docs/src/dev-guide/contributing-validation.md +++ b/docs/src/dev-guide/contributing-validation.md @@ -39,6 +39,6 @@ still be tested manually: * Exporting all logs to a file * Toggling tabbed panels in the sidebar * Using keyboard shortcuts - * Toggling "Prettify" via the status bar button, the address bar (URL hash), and Monaco action + * Toggling "Prettify" via the status bar button, the address bar (URL hash), and the Monaco action [gh-workflow-test]: https://github.com/y-scope/yscope-log-viewer/blob/main/.github/workflows/test.yaml