From 96de3624b7653f9e1e65c1bea30cfb92f177352d Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Mon, 16 Sep 2024 19:13:34 -0400 Subject: [PATCH 01/83] Remove redundant div wrapper in Layout component to simplify the DOM structure. --- new-log-viewer/src/components/Layout.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx index c0169495..2495f9b7 100644 --- a/new-log-viewer/src/components/Layout.tsx +++ b/new-log-viewer/src/components/Layout.tsx @@ -21,13 +21,11 @@ const Layout = () => { modeStorageKey={CONFIG_KEY.THEME} theme={APP_THEME} > -
- - - - - -
+ + + + + ); }; From c6ab30784b13346044c8133547ae2c6dc4650467 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 03:13:09 -0400 Subject: [PATCH 02/83] Add SidebarContainer with resizable tabs. --- .../src/components/CustomListItem.tsx | 44 +++++++ .../components/DropFileContainer/index.css | 5 - .../components/DropFileContainer/index.tsx | 5 +- new-log-viewer/src/components/Layout.tsx | 9 +- .../src/components/MenuBar/index.tsx | 42 +------ .../PanelTabs/FileInfoTab.tsx | 51 ++++++++ .../SidebarContainer/PanelTabs/index.css | 9 ++ .../SidebarContainer/PanelTabs/index.tsx | 109 ++++++++++++++++++ .../SidebarContainer/ResizeHandle.css | 11 ++ .../SidebarContainer/ResizeHandle.tsx | 66 +++++++++++ .../src/components/SidebarContainer/index.css | 18 +++ .../src/components/SidebarContainer/index.tsx | 67 +++++++++++ .../src/contexts/StateContextProvider.tsx | 6 + new-log-viewer/src/services/LogFileManager.ts | 11 +- new-log-viewer/src/services/MainWorker.ts | 1 + new-log-viewer/src/typings/worker.ts | 1 + 16 files changed, 402 insertions(+), 53 deletions(-) create mode 100644 new-log-viewer/src/components/CustomListItem.tsx create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx create mode 100644 new-log-viewer/src/components/SidebarContainer/ResizeHandle.css create mode 100644 new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx create mode 100644 new-log-viewer/src/components/SidebarContainer/index.css create mode 100644 new-log-viewer/src/components/SidebarContainer/index.tsx diff --git a/new-log-viewer/src/components/CustomListItem.tsx b/new-log-viewer/src/components/CustomListItem.tsx new file mode 100644 index 00000000..5772b392 --- /dev/null +++ b/new-log-viewer/src/components/CustomListItem.tsx @@ -0,0 +1,44 @@ +import React from "react"; + +import { + ListItem, + ListItemContent, + ListItemDecorator, + Typography, +} from "@mui/joy"; + + +interface CustomListItemProps { + content: string, + icon: React.ReactNode, + title: string +} + +/** + * Renders a custom list item with an icon, a title and a context text. + * + * @param props + * @param props.content + * @param props.icon + * @param props.title + * @return + */ +const CustomListItem = ({content, icon, title}: CustomListItemProps) => ( + + + {icon} + + + + {title} + + + {content} + + + +); + +export default CustomListItem; diff --git a/new-log-viewer/src/components/DropFileContainer/index.css b/new-log-viewer/src/components/DropFileContainer/index.css index 6c6fc50b..7935d373 100644 --- a/new-log-viewer/src/components/DropFileContainer/index.css +++ b/new-log-viewer/src/components/DropFileContainer/index.css @@ -2,11 +2,6 @@ position: relative; } -.drop-file-children { - width: 100%; - height: 100%; -} - .hover-mask { position: absolute; top: 0; diff --git a/new-log-viewer/src/components/DropFileContainer/index.tsx b/new-log-viewer/src/components/DropFileContainer/index.tsx index a355c9e8..f37fa6fa 100644 --- a/new-log-viewer/src/components/DropFileContainer/index.tsx +++ b/new-log-viewer/src/components/DropFileContainer/index.tsx @@ -70,10 +70,7 @@ const DropFileContainer = ({children}: DropFileContextProviderProps) => { onDragOver={handleDrag} onDrop={handleDrop} > -
+
{children} {isFileHovering && (
{ theme={APP_THEME} > - - - + + + + + ); diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx index e9955286..5d702830 100644 --- a/new-log-viewer/src/components/MenuBar/index.tsx +++ b/new-log-viewer/src/components/MenuBar/index.tsx @@ -1,7 +1,4 @@ -import { - useContext, - useState, -} from "react"; +import {useContext} from "react"; import { Divider, @@ -11,15 +8,9 @@ import { } from "@mui/joy"; import Description from "@mui/icons-material/Description"; -import FileOpenIcon from "@mui/icons-material/FileOpen"; -import Settings from "@mui/icons-material/Settings"; import {StateContext} from "../../contexts/StateContextProvider"; -import {CURSOR_CODE} from "../../typings/worker"; -import {openFile} from "../../utils/file"; -import SettingsModal from "../modals/SettingsModal"; import NavigationBar from "./NavigationBar"; -import SmallIconButton from "./SmallIconButton"; import "./index.css"; @@ -30,23 +21,7 @@ import "./index.css"; * @return */ const MenuBar = () => { - const {fileName, loadFile} = useContext(StateContext); - - const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); - - const handleOpenFileButtonClick = () => { - openFile((file) => { - loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null}); - }); - }; - - const handleSettingsModalClose = () => { - setIsSettingsModalOpen(false); - }; - - const handleSettingsModalOpen = () => { - setIsSettingsModalOpen(true); - }; + const {fileName} = useContext(StateContext); return ( <> @@ -66,20 +41,7 @@ const MenuBar = () => { - - - - - - - - - ); }; diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx new file mode 100644 index 00000000..13ed6ebc --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -0,0 +1,51 @@ +import {useContext} from "react"; + +import { + DialogContent, + DialogTitle, + Divider, + List, + TabPanel, +} from "@mui/joy"; + +import AbcIcon from "@mui/icons-material/Abc"; +import StorageIcon from "@mui/icons-material/Storage"; + +import {StateContext} from "../../../contexts/StateContextProvider"; +import {formatSizeInBytes} from "../../../utils/units"; +import CustomListItem from "../../CustomListItem"; +import {TAB_NAME} from "./index"; + +import "./index.css"; + + +/** + * Display the file name and original size of the selected file. + * + * @return + */ +const FileInfoTab = () => { + const {fileName, originalFileSizeInBytes} = useContext(StateContext); + + return ( + + File Info + + + } + title={"File Info"}/> + + } + title={"Original Size"}/> + + + + ); +}; + + +export default FileInfoTab; diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css new file mode 100644 index 00000000..46c985c5 --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -0,0 +1,9 @@ +.sidebar-tabs { + height: 100%; + flex-grow: 1; + width: calc(100% - var(--ylv-panel-resize-handle-width)); +} + +.sidebar-tab-list-spacing { + flex-grow: 1; +} \ No newline at end of file diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx new file mode 100644 index 00000000..a6ea7dd6 --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -0,0 +1,109 @@ +import React, { + forwardRef, + useContext, + useState, +} from "react"; + +import { + Tab, + TabList, + Tabs, +} from "@mui/joy"; + +import FileOpenIcon from "@mui/icons-material/FileOpen"; +import InfoIcon from "@mui/icons-material/Info"; +import SettingsIcon from "@mui/icons-material/Settings"; + +import {StateContext} from "../../../contexts/StateContextProvider"; +import {CURSOR_CODE} from "../../../typings/worker"; +import {openFile} from "../../../utils/file"; +import SettingsModal from "../../modals/SettingsModal"; +import FileInfoTab from "./FileInfoTab"; + + +enum TAB_NAME { + OPEN_FILE = "openFile", + FILE_INFO = "fileInfo", + SETTINGS = "settings", +} + +/** + * Displays a set of tabs in a vertical orientation. + * + * @param tabListRef Reference object used to access the TabList DOM element. + * @return + */ +const PanelTabs = forwardRef((_, tabListRef) => { + const {loadFile} = useContext(StateContext); + + const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); + const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); + + const handleOpenFile = () => { + openFile((file) => { + loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null}); + }); + }; + + const handleSettingsModalClose = () => { + setIsSettingsModalOpen(false); + }; + + const handleTabChange = (__: React.SyntheticEvent | null, value: number | string | null) => { + switch (value) { + case TAB_NAME.OPEN_FILE: + handleOpenFile(); + break; + case TAB_NAME.SETTINGS: + setIsSettingsModalOpen(true); + break; + default: + setActiveTabName(value as TAB_NAME); + } + }; + + return ( + <> + + + {[ + {tabName: TAB_NAME.OPEN_FILE, icon: }, + {tabName: TAB_NAME.FILE_INFO, icon: }, + ].map(({tabName, icon}) => ( + + {icon} + + ))} +
+ + + + + + + + + ); +}); + +PanelTabs.displayName = "PanelTabs"; +export default PanelTabs; +export {TAB_NAME}; diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css new file mode 100644 index 00000000..637f2dfc --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css @@ -0,0 +1,11 @@ +.resize-handle { + cursor: ew-resize; + width: 3px; + height: 100%; + background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); + z-index: 1; +} + +.resize-handle:hover { + background-color: var(--joy-palette-primary-solidHoverBg, #0258a8); +} diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx new file mode 100644 index 00000000..30ea68d9 --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx @@ -0,0 +1,66 @@ +import React, { + useEffect, + useState, +} from "react"; + +import "./ResizeHandle.css"; + + +interface ResizeHandleProps { + onResize: (offset: number) => void, +} + +/** + * A vertical handle for resizing an object. + * + * @param props + * @param props.onResize The method to call when a resize occurs. + * @return + */ +const ResizeHandle = ({onResize}: ResizeHandleProps) => { + const [isMouseDown, setIsMouseDown] = useState(false); + + const handleMouseDown = (ev: React.MouseEvent) => { + ev.preventDefault(); + setIsMouseDown(true); + }; + + const handleMouseUp = (ev: MouseEvent) => { + ev.preventDefault(); + setIsMouseDown(false); + }; + + useEffect(() => { + if (false === isMouseDown) { + return () => null; + } + + window.addEventListener("mouseup", handleMouseUp); + + const handleMouseMove = (ev: MouseEvent) => { + ev.preventDefault(); + onResize(ev.clientX); + }; + + window.addEventListener("mousemove", handleMouseMove); + + return () => { + window.removeEventListener("mousemove", handleMouseMove); + window.removeEventListener("mouseup", handleMouseUp); + }; + }, [ + isMouseDown, + onResize, + ]); + + return ( + <> +
+ + ); +}; + + +export default ResizeHandle; diff --git a/new-log-viewer/src/components/SidebarContainer/index.css b/new-log-viewer/src/components/SidebarContainer/index.css new file mode 100644 index 00000000..32047cfa --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/index.css @@ -0,0 +1,18 @@ +:root { + --ylv-panel-width: 300px; + --ylv-panel-resize-handle-width: 4px +} + +.sidebar-container { + display: grid; + grid-template-columns: var(--ylv-panel-width) 1fr; + width: 100vw; +} + +.sidebar-tabs-container { + display: flex; +} + +.sidebar-children-container { + width: calc(100vw - var(--ylv-panel-width)); +} \ No newline at end of file diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx new file mode 100644 index 00000000..c59e0e1e --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -0,0 +1,67 @@ +import React, { + useCallback, + useEffect, + useRef, + useState, +} from "react"; + +import PanelTabs from "./PanelTabs"; +import ResizeHandle from "./ResizeHandle"; + +import "./index.css"; + + +interface SidebarContainerProps { + children: React.ReactNode, +} + +const RESIZE_HANDLE_WIDTH_IN_PIXEL = 3; +const PANEL_DEFAULT_WIDTH_IN_PIXEL = 300; +const PANEL_CLIP_THRESHOLD_IN_PIXEL = 80; +const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; + + +/** + * Wraps a children with a sidebar component on the left. + * + * @param props + * @param props.children + * @return + */ +const SidebarContainer = ({children}: SidebarContainerProps) => { + const [panelWidth, setPanelWidth] = useState(PANEL_DEFAULT_WIDTH_IN_PIXEL); + + const tabListRef = useRef(null); + + const handleResize = useCallback((offset: number) => { + if (null === tabListRef.current) { + console.error("Unexpected null tabListRef.current"); + + return; + } + if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > offset) { + setPanelWidth(tabListRef.current.clientWidth); + } else if (offset < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO) { + setPanelWidth(offset + RESIZE_HANDLE_WIDTH_IN_PIXEL); + } + }, []); + + // On `panelWidth` change, update CSS variable `--ylv-panel-width`. + useEffect(() => { + document.body.style.setProperty("--ylv-panel-width", `${panelWidth}px`); + }, [panelWidth]); + + return ( +
+
+ + +
+
+ {children} +
+
+ ); +}; + +export default SidebarContainer; diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index 5d506d2c..4ad1e609 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -42,6 +42,7 @@ interface StateContextType { logData: string, numEvents: number, numPages: number, + originalFileSizeInBytes: number, pageNum: Nullable } const StateContext = createContext({} as StateContextType); @@ -57,6 +58,7 @@ const STATE_DEFAULT: Readonly = Object.freeze({ logData: "Loading...", numEvents: 0, numPages: 0, + originalFileSizeInBytes: 0, pageNum: 0, }); @@ -133,6 +135,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { const [fileName, setFileName] = useState(STATE_DEFAULT.fileName); const [logData, setLogData] = useState(STATE_DEFAULT.logData); const [numEvents, setNumEvents] = useState(STATE_DEFAULT.numEvents); + const [originalFileSizeInBytes, setOriginalFileSizeInBytes] = + useState(STATE_DEFAULT.originalFileSizeInBytes); const beginLineNumToLogEventNumRef = useRef(STATE_DEFAULT.beginLineNumToLogEventNum); const logEventNumRef = useRef(logEventNum); @@ -148,6 +152,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { case WORKER_RESP_CODE.LOG_FILE_INFO: setFileName(args.fileName); setNumEvents(args.numEvents); + setOriginalFileSizeInBytes(args.originalFileSizeInBytes); break; case WORKER_RESP_CODE.PAGE_DATA: { setLogData(args.logs); @@ -280,6 +285,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { logData: logData, numEvents: numEvents, numPages: numPagesRef.current, + originalFileSizeInBytes: originalFileSizeInBytes, pageNum: pageNumRef.current, }} > diff --git a/new-log-viewer/src/services/LogFileManager.ts b/new-log-viewer/src/services/LogFileManager.ts index ea73d7fa..ab567e1e 100644 --- a/new-log-viewer/src/services/LogFileManager.ts +++ b/new-log-viewer/src/services/LogFileManager.ts @@ -52,6 +52,8 @@ class LogFileManager { readonly #fileName: string; + readonly #originalFileSizeInBytes: number; + #decoder: Decoder; #numEvents: number = 0; @@ -62,14 +64,17 @@ class LogFileManager { * * @param decoder * @param fileName + * @param originalFileSizeInBytes * @param pageSize Page size for setting up pagination. */ constructor ( decoder: Decoder, fileName: string, + originalFileSizeInBytes: number, pageSize: number, ) { this.#fileName = fileName; + this.#originalFileSizeInBytes = originalFileSizeInBytes; this.#pageSize = pageSize; this.#decoder = decoder; @@ -91,6 +96,10 @@ class LogFileManager { return this.#numEvents; } + get originalFileSizeInBytes () { + return this.#originalFileSizeInBytes; + } + /** * Creates a new LogFileManager. * @@ -108,7 +117,7 @@ class LogFileManager { const {fileName, fileData} = await loadFile(fileSrc); const decoder = await LogFileManager.#initDecoder(fileName, fileData, decoderOptions); - return new LogFileManager(decoder, fileName, pageSize); + return new LogFileManager(decoder, fileName, fileData.length, pageSize); } /** diff --git a/new-log-viewer/src/services/MainWorker.ts b/new-log-viewer/src/services/MainWorker.ts index 87a1bd89..d3091d83 100644 --- a/new-log-viewer/src/services/MainWorker.ts +++ b/new-log-viewer/src/services/MainWorker.ts @@ -51,6 +51,7 @@ onmessage = async (ev: MessageEvent) => { postResp(WORKER_RESP_CODE.LOG_FILE_INFO, { fileName: LOG_FILE_MANAGER.fileName, numEvents: LOG_FILE_MANAGER.numEvents, + originalFileSizeInBytes: LOG_FILE_MANAGER.originalFileSizeInBytes, }); postResp( WORKER_RESP_CODE.PAGE_DATA, diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts index 0c88beb6..72987d07 100644 --- a/new-log-viewer/src/typings/worker.ts +++ b/new-log-viewer/src/typings/worker.ts @@ -65,6 +65,7 @@ type WorkerRespMap = { [WORKER_RESP_CODE.LOG_FILE_INFO]: { fileName: string, numEvents: number, + originalFileSizeInBytes: number, }, [WORKER_RESP_CODE.PAGE_DATA]: { logs: string, From a0a618a00618fbb7b5c828fc2be213ea74fd145f Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 03:14:16 -0400 Subject: [PATCH 03/83] Add newline to EOF. --- .../src/components/SidebarContainer/PanelTabs/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index 46c985c5..5acddc42 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -6,4 +6,4 @@ .sidebar-tab-list-spacing { flex-grow: 1; -} \ No newline at end of file +} From 3c3584395d5c406d98faccab25afb718351b47f4 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 03:14:37 -0400 Subject: [PATCH 04/83] Add newline to EOF. --- new-log-viewer/src/components/SidebarContainer/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/index.css b/new-log-viewer/src/components/SidebarContainer/index.css index 32047cfa..e6090457 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.css +++ b/new-log-viewer/src/components/SidebarContainer/index.css @@ -15,4 +15,4 @@ .sidebar-children-container { width: calc(100vw - var(--ylv-panel-width)); -} \ No newline at end of file +} From b0948b6a73ae613347f8f9a02205daa759a15874 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 03:32:31 -0400 Subject: [PATCH 05/83] Add borders to StatusBar and MenuBar --- new-log-viewer/src/components/MenuBar/index.css | 2 ++ new-log-viewer/src/components/StatusBar/index.css | 1 + new-log-viewer/src/index.css | 1 + 3 files changed, 4 insertions(+) diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index 5bcdd9a5..bb4039de 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -3,4 +3,6 @@ flex-direction: row; height: var(--ylv-status-bar-height); align-items: center; + box-shadow: 0 1px 0 0 var(--joy-palette-neutral-outlinedBorder); + z-index: var(--ylv-menu-bar-z-index); } diff --git a/new-log-viewer/src/components/StatusBar/index.css b/new-log-viewer/src/components/StatusBar/index.css index 2f9ba8f3..2d477a24 100644 --- a/new-log-viewer/src/components/StatusBar/index.css +++ b/new-log-viewer/src/components/StatusBar/index.css @@ -1,4 +1,5 @@ .status-bar { + box-shadow: 0 -1px 0 0 var(--joy-palette-neutral-outlinedBorder); align-items: center; bottom: 0; display: flex; diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css index 22de1ccc..6b2a7a6f 100644 --- a/new-log-viewer/src/index.css +++ b/new-log-viewer/src/index.css @@ -24,6 +24,7 @@ html { * .monaco-editor .minimap { z-index: 5; } * ``` */ + --ylv-menu-bar-z-index: 6; --ylv-drop-file-container-hover-mask-z-index: 10; --ylv-drop-file-container-hover-message-z-index: 11; } From 2666f9567265916203cb72c563e83b6ea98862ba Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 03:33:19 -0400 Subject: [PATCH 06/83] Set resize handle z-index with global CSS variable. --- new-log-viewer/src/components/SidebarContainer/ResizeHandle.css | 2 +- new-log-viewer/src/index.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css index 637f2dfc..32bef257 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css @@ -3,7 +3,7 @@ width: 3px; height: 100%; background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); - z-index: 1; + z-index: var(--ylv-resize-handle-z-index); } .resize-handle:hover { diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css index 6b2a7a6f..02487bf6 100644 --- a/new-log-viewer/src/index.css +++ b/new-log-viewer/src/index.css @@ -24,6 +24,7 @@ html { * .monaco-editor .minimap { z-index: 5; } * ``` */ + --ylv-resize-handle-z-index: 1; --ylv-menu-bar-z-index: 6; --ylv-drop-file-container-hover-mask-z-index: 10; --ylv-drop-file-container-hover-message-z-index: 11; From 3605209c62c96d2e4940c7762c1f71b3a9217dbc Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 03:42:25 -0400 Subject: [PATCH 07/83] Introduce 8px padding to .menu-bar for better spacing. Add .menu-bar-filename class to CSS. --- new-log-viewer/src/components/MenuBar/index.css | 6 ++++++ new-log-viewer/src/components/MenuBar/index.tsx | 2 -- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index bb4039de..fe6b917c 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -1,4 +1,5 @@ .menu-bar { + padding-left: 8px; display: flex; flex-direction: row; height: var(--ylv-status-bar-height); @@ -6,3 +7,8 @@ box-shadow: 0 1px 0 0 var(--joy-palette-neutral-outlinedBorder); z-index: var(--ylv-menu-bar-z-index); } + +.menu-bar-filename { + align-items: center; + flex-grow: 1; +} \ No newline at end of file diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx index 5d702830..64b8ffdc 100644 --- a/new-log-viewer/src/components/MenuBar/index.tsx +++ b/new-log-viewer/src/components/MenuBar/index.tsx @@ -27,10 +27,8 @@ const MenuBar = () => { <> From db82737f7553e7054b9756379bb1c7d237b56773 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 04:28:24 -0400 Subject: [PATCH 08/83] Add newline to EOF. --- new-log-viewer/src/components/MenuBar/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index fe6b917c..959e6b54 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -11,4 +11,4 @@ .menu-bar-filename { align-items: center; flex-grow: 1; -} \ No newline at end of file +} From b9ebe1d7a9bed630d779c2bd75bf6c1378fc0149 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 18:57:43 -0400 Subject: [PATCH 09/83] Extract . --- .../PanelTabs/CustomTabPanel.tsx | 47 +++++++++++++++++++ .../PanelTabs/FileInfoTab.tsx | 36 +++++++------- 2 files changed, 64 insertions(+), 19 deletions(-) create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx new file mode 100644 index 00000000..e9066d58 --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +import { + DialogContent, + DialogTitle, + TabPanel, + Typography, +} from "@mui/joy"; + + +interface CustomTabPanelProps { + children: React.ReactNode, + tabName: string, + title: string, +} + +/** + * Renders a customized tab panel to be extended for displaying extra information in the sidebar. + * + * @param props + * @param props.children + * @param props.tabName + * @param props.title + * @return + */ +const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => { + return ( + + + + {title} + + + + {children} + + + ); +}; + + +export default CustomTabPanel; diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index 13ed6ebc..bde0afe3 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -1,11 +1,8 @@ import {useContext} from "react"; import { - DialogContent, - DialogTitle, Divider, List, - TabPanel, } from "@mui/joy"; import AbcIcon from "@mui/icons-material/Abc"; @@ -14,6 +11,7 @@ import StorageIcon from "@mui/icons-material/Storage"; import {StateContext} from "../../../contexts/StateContextProvider"; import {formatSizeInBytes} from "../../../utils/units"; import CustomListItem from "../../CustomListItem"; +import CustomTabPanel from "./CustomTabPanel"; import {TAB_NAME} from "./index"; import "./index.css"; @@ -28,22 +26,22 @@ const FileInfoTab = () => { const {fileName, originalFileSizeInBytes} = useContext(StateContext); return ( - - File Info - - - } - title={"File Info"}/> - - } - title={"Original Size"}/> - - - + + + } + title={"File Info"}/> + + } + title={"Original Size"}/> + + ); }; From 3ac708c48e1ad2a9721a5f98010328ff9bc03a6e Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 17 Sep 2024 18:58:34 -0400 Subject: [PATCH 10/83] Remove redundant line. --- .../src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index bde0afe3..05ce3ec8 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -45,5 +45,4 @@ const FileInfoTab = () => { ); }; - export default FileInfoTab; From 147424575a173a73b89eafc5219766f0f99a744c Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 15:13:22 -0400 Subject: [PATCH 11/83] Rename 'File Info' field to 'Name' in FileInfoTab. --- .../src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index 05ce3ec8..1f2aa27d 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -34,7 +34,7 @@ const FileInfoTab = () => { } - title={"File Info"}/> + title={"Name"}/> Date: Wed, 18 Sep 2024 15:14:34 -0400 Subject: [PATCH 12/83] Replace FileOpenIcon with FolderOpenIcon in PanelTabs. --- .../src/components/SidebarContainer/PanelTabs/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index a6ea7dd6..a6770016 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -10,7 +10,7 @@ import { Tabs, } from "@mui/joy"; -import FileOpenIcon from "@mui/icons-material/FileOpen"; +import FolderOpenIcon from "@mui/icons-material/FolderOpen"; import InfoIcon from "@mui/icons-material/Info"; import SettingsIcon from "@mui/icons-material/Settings"; @@ -76,7 +76,7 @@ const PanelTabs = forwardRef((_, tabListRef) => { size={"lg"} > {[ - {tabName: TAB_NAME.OPEN_FILE, icon: }, + {tabName: TAB_NAME.OPEN_FILE, icon: }, {tabName: TAB_NAME.FILE_INFO, icon: }, ].map(({tabName, icon}) => ( Date: Wed, 18 Sep 2024 15:33:01 -0400 Subject: [PATCH 13/83] Move open file functionality to MenuBar. --- .../src/components/MenuBar/index.css | 1 - .../src/components/MenuBar/index.tsx | 20 ++++++++++++++++--- .../SidebarContainer/PanelTabs/index.tsx | 18 ----------------- 3 files changed, 17 insertions(+), 22 deletions(-) diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index 959e6b54..3deb7a86 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -1,5 +1,4 @@ .menu-bar { - padding-left: 8px; display: flex; flex-direction: row; height: var(--ylv-status-bar-height); diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx index 64b8ffdc..beff0f1f 100644 --- a/new-log-viewer/src/components/MenuBar/index.tsx +++ b/new-log-viewer/src/components/MenuBar/index.tsx @@ -2,14 +2,17 @@ import {useContext} from "react"; import { Divider, + IconButton, Sheet, Stack, Typography, } from "@mui/joy"; -import Description from "@mui/icons-material/Description"; +import FolderOpenIcon from "@mui/icons-material/FolderOpen"; import {StateContext} from "../../contexts/StateContextProvider"; +import {CURSOR_CODE} from "../../typings/worker"; +import {openFile} from "../../utils/file"; import NavigationBar from "./NavigationBar"; import "./index.css"; @@ -21,7 +24,13 @@ import "./index.css"; * @return */ const MenuBar = () => { - const {fileName} = useContext(StateContext); + const {fileName, loadFile} = useContext(StateContext); + + const handleOpenFile = () => { + openFile((file) => { + loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null}); + }); + }; return ( <> @@ -31,7 +40,12 @@ const MenuBar = () => { direction={"row"} gap={0.5} > - + + + {fileName} diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index a6770016..934a92f2 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -1,6 +1,5 @@ import React, { forwardRef, - useContext, useState, } from "react"; @@ -10,19 +9,14 @@ import { Tabs, } from "@mui/joy"; -import FolderOpenIcon from "@mui/icons-material/FolderOpen"; import InfoIcon from "@mui/icons-material/Info"; import SettingsIcon from "@mui/icons-material/Settings"; -import {StateContext} from "../../../contexts/StateContextProvider"; -import {CURSOR_CODE} from "../../../typings/worker"; -import {openFile} from "../../../utils/file"; import SettingsModal from "../../modals/SettingsModal"; import FileInfoTab from "./FileInfoTab"; enum TAB_NAME { - OPEN_FILE = "openFile", FILE_INFO = "fileInfo", SETTINGS = "settings", } @@ -34,26 +28,15 @@ enum TAB_NAME { * @return */ const PanelTabs = forwardRef((_, tabListRef) => { - const {loadFile} = useContext(StateContext); - const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); - const handleOpenFile = () => { - openFile((file) => { - loadFile(file, {code: CURSOR_CODE.LAST_EVENT, args: null}); - }); - }; - const handleSettingsModalClose = () => { setIsSettingsModalOpen(false); }; const handleTabChange = (__: React.SyntheticEvent | null, value: number | string | null) => { switch (value) { - case TAB_NAME.OPEN_FILE: - handleOpenFile(); - break; case TAB_NAME.SETTINGS: setIsSettingsModalOpen(true); break; @@ -76,7 +59,6 @@ const PanelTabs = forwardRef((_, tabListRef) => { size={"lg"} > {[ - {tabName: TAB_NAME.OPEN_FILE, icon: }, {tabName: TAB_NAME.FILE_INFO, icon: }, ].map(({tabName, icon}) => ( Date: Wed, 18 Sep 2024 15:37:06 -0400 Subject: [PATCH 14/83] Set default messages for no file open. --- new-log-viewer/src/contexts/StateContextProvider.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index 4ad1e609..c66b8394 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -52,10 +52,10 @@ const StateContext = createContext({} as StateContextType); */ const STATE_DEFAULT: Readonly = Object.freeze({ beginLineNumToLogEventNum: new Map(), - fileName: "", + fileName: "No file is open.", loadFile: () => null, loadPage: () => null, - logData: "Loading...", + logData: "No file is open.", numEvents: 0, numPages: 0, originalFileSizeInBytes: 0, @@ -174,6 +174,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { }, []); const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => { + setFileName("Loading..."); + setLogData("Loading..."); if ("string" !== typeof fileSrc) { updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null}); } From 1707ccf02145b68207ededd0058a26502175b758 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 15:57:08 -0400 Subject: [PATCH 15/83] Refactor tab panel close behaviour. --- .../PanelTabs/FileInfoTab.tsx | 2 +- .../SidebarContainer/PanelTabs/index.css | 1 - .../SidebarContainer/PanelTabs/index.tsx | 22 ++++++++---- .../SidebarContainer/ResizeHandle.css | 1 - .../src/components/SidebarContainer/index.css | 1 - .../src/components/SidebarContainer/index.tsx | 35 ++++++++++++++----- new-log-viewer/src/index.css | 1 - new-log-viewer/src/typings/tab.ts | 7 ++++ 8 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 new-log-viewer/src/typings/tab.ts diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index 1f2aa27d..cb7ab7be 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -9,10 +9,10 @@ import AbcIcon from "@mui/icons-material/Abc"; import StorageIcon from "@mui/icons-material/Storage"; import {StateContext} from "../../../contexts/StateContextProvider"; +import {TAB_NAME} from "../../../typings/tab"; import {formatSizeInBytes} from "../../../utils/units"; import CustomListItem from "../../CustomListItem"; import CustomTabPanel from "./CustomTabPanel"; -import {TAB_NAME} from "./index"; import "./index.css"; diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index 5acddc42..52699583 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -1,7 +1,6 @@ .sidebar-tabs { height: 100%; flex-grow: 1; - width: calc(100% - var(--ylv-panel-resize-handle-width)); } .sidebar-tab-list-spacing { diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index 934a92f2..b5332404 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -12,13 +12,15 @@ import { import InfoIcon from "@mui/icons-material/Info"; import SettingsIcon from "@mui/icons-material/Settings"; +import {TAB_NAME} from "../../../typings/tab"; import SettingsModal from "../../modals/SettingsModal"; import FileInfoTab from "./FileInfoTab"; -enum TAB_NAME { - FILE_INFO = "fileInfo", - SETTINGS = "settings", +interface PanelTabsProps { + activeTabName: TAB_NAME, + onActiveTabNameChange: (newValue: TAB_NAME) => void, + onPanelTabOpen: () => void, } /** @@ -27,8 +29,14 @@ enum TAB_NAME { * @param tabListRef Reference object used to access the TabList DOM element. * @return */ -const PanelTabs = forwardRef((_, tabListRef) => { - const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); +const PanelTabs = forwardRef(( + { + activeTabName, + onActiveTabNameChange, + onPanelTabOpen, + }, + tabListRef +) => { const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); const handleSettingsModalClose = () => { @@ -41,7 +49,8 @@ const PanelTabs = forwardRef((_, tabListRef) => { setIsSettingsModalOpen(true); break; default: - setActiveTabName(value as TAB_NAME); + onActiveTabNameChange(value as TAB_NAME); + onPanelTabOpen(); } }; @@ -88,4 +97,3 @@ const PanelTabs = forwardRef((_, tabListRef) => { PanelTabs.displayName = "PanelTabs"; export default PanelTabs; -export {TAB_NAME}; diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css index 32bef257..391cdb7f 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css @@ -3,7 +3,6 @@ width: 3px; height: 100%; background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); - z-index: var(--ylv-resize-handle-z-index); } .resize-handle:hover { diff --git a/new-log-viewer/src/components/SidebarContainer/index.css b/new-log-viewer/src/components/SidebarContainer/index.css index e6090457..b127b334 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.css +++ b/new-log-viewer/src/components/SidebarContainer/index.css @@ -1,6 +1,5 @@ :root { --ylv-panel-width: 300px; - --ylv-panel-resize-handle-width: 4px } .sidebar-container { diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index c59e0e1e..18099e87 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -5,21 +5,20 @@ import React, { useState, } from "react"; +import {TAB_NAME} from "../../typings/tab"; import PanelTabs from "./PanelTabs"; import ResizeHandle from "./ResizeHandle"; import "./index.css"; -interface SidebarContainerProps { - children: React.ReactNode, -} - -const RESIZE_HANDLE_WIDTH_IN_PIXEL = 3; const PANEL_DEFAULT_WIDTH_IN_PIXEL = 300; const PANEL_CLIP_THRESHOLD_IN_PIXEL = 80; const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; +interface SidebarContainerProps { + children: React.ReactNode, +} /** * Wraps a children with a sidebar component on the left. @@ -29,10 +28,26 @@ const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; * @return */ const SidebarContainer = ({children}: SidebarContainerProps) => { + const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); const [panelWidth, setPanelWidth] = useState(PANEL_DEFAULT_WIDTH_IN_PIXEL); const tabListRef = useRef(null); + // handlePanelTabOpen + const handlePanelTabOpen = useCallback(() => { + setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); + }, []); + + const handlePanelTabClose = () => { + if (null === tabListRef.current) { + console.error("Unexpected null tabListRef.current"); + + return; + } + setActiveTabName(TAB_NAME.NONE); + setPanelWidth(tabListRef.current.clientWidth); + }; + const handleResize = useCallback((offset: number) => { if (null === tabListRef.current) { console.error("Unexpected null tabListRef.current"); @@ -40,9 +55,9 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { return; } if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > offset) { - setPanelWidth(tabListRef.current.clientWidth); + handlePanelTabClose(); } else if (offset < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO) { - setPanelWidth(offset + RESIZE_HANDLE_WIDTH_IN_PIXEL); + setPanelWidth(offset); } }, []); @@ -54,7 +69,11 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { return (
- +
diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css index 02487bf6..6b2a7a6f 100644 --- a/new-log-viewer/src/index.css +++ b/new-log-viewer/src/index.css @@ -24,7 +24,6 @@ html { * .monaco-editor .minimap { z-index: 5; } * ``` */ - --ylv-resize-handle-z-index: 1; --ylv-menu-bar-z-index: 6; --ylv-drop-file-container-hover-mask-z-index: 10; --ylv-drop-file-container-hover-message-z-index: 11; diff --git a/new-log-viewer/src/typings/tab.ts b/new-log-viewer/src/typings/tab.ts new file mode 100644 index 00000000..83e7bfee --- /dev/null +++ b/new-log-viewer/src/typings/tab.ts @@ -0,0 +1,7 @@ +enum TAB_NAME { + NONE = "none", + FILE_INFO = "fileInfo", + SETTINGS = "settings", +} + +export {TAB_NAME}; From 1ed3de9ab248607610e837ee64edd73e91639f61 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 16:01:03 -0400 Subject: [PATCH 16/83] Add TAB_DISPLAY_NAMES and use it for tab titles. --- .../SidebarContainer/PanelTabs/FileInfoTab.tsx | 7 +++++-- .../SidebarContainer/PanelTabs/index.tsx | 7 ++++++- new-log-viewer/src/typings/tab.ts | 14 +++++++++++++- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index cb7ab7be..87969b5b 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -9,7 +9,10 @@ import AbcIcon from "@mui/icons-material/Abc"; import StorageIcon from "@mui/icons-material/Storage"; import {StateContext} from "../../../contexts/StateContextProvider"; -import {TAB_NAME} from "../../../typings/tab"; +import { + TAB_DISPLAY_NAMES, + TAB_NAME, +} from "../../../typings/tab"; import {formatSizeInBytes} from "../../../utils/units"; import CustomListItem from "../../CustomListItem"; import CustomTabPanel from "./CustomTabPanel"; @@ -28,7 +31,7 @@ const FileInfoTab = () => { return ( (( {icon} @@ -81,6 +85,7 @@ const PanelTabs = forwardRef((
diff --git a/new-log-viewer/src/typings/tab.ts b/new-log-viewer/src/typings/tab.ts index 83e7bfee..c36231ae 100644 --- a/new-log-viewer/src/typings/tab.ts +++ b/new-log-viewer/src/typings/tab.ts @@ -4,4 +4,16 @@ enum TAB_NAME { SETTINGS = "settings", } -export {TAB_NAME}; +/** + * Mps the TAB_NAME enum values to their corresponding display names. + */ +const TAB_DISPLAY_NAMES: Record = Object.freeze({ + [TAB_NAME.NONE]: "None", + [TAB_NAME.FILE_INFO]: "File Info", + [TAB_NAME.SETTINGS]: "Settings", +}); + +export { + TAB_DISPLAY_NAMES, + TAB_NAME, +}; From 25af90b695491b1941893b75205c48979472ff08 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 16:20:38 -0400 Subject: [PATCH 17/83] Refactor panel resize behaviour. --- .../SidebarContainer/PanelTabs/index.css | 1 + .../SidebarContainer/ResizeHandle.css | 3 ++- .../SidebarContainer/ResizeHandle.tsx | 14 ++++++++++--- .../src/components/SidebarContainer/index.tsx | 21 +++++++++---------- new-log-viewer/src/index.css | 2 ++ 5 files changed, 26 insertions(+), 15 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index 52699583..5acddc42 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -1,6 +1,7 @@ .sidebar-tabs { height: 100%; flex-grow: 1; + width: calc(100% - var(--ylv-panel-resize-handle-width)); } .sidebar-tab-list-spacing { diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css index 391cdb7f..67f73be4 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css @@ -1,8 +1,9 @@ .resize-handle { cursor: ew-resize; - width: 3px; + width: var(--ylv-panel-resize-handle-width); height: 100%; background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); + z-index: var(--ylv-resize-handle-z-index); } .resize-handle:hover { diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx index 30ea68d9..9a08dcb1 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx @@ -1,4 +1,5 @@ import React, { + useCallback, useEffect, useState, } from "react"; @@ -7,6 +8,7 @@ import "./ResizeHandle.css"; interface ResizeHandleProps { + onHandleRelease: () => void, onResize: (offset: number) => void, } @@ -15,9 +17,13 @@ interface ResizeHandleProps { * * @param props * @param props.onResize The method to call when a resize occurs. + * @param props.onHandleRelease * @return */ -const ResizeHandle = ({onResize}: ResizeHandleProps) => { +const ResizeHandle = ({ + onResize, + onHandleRelease, +}: ResizeHandleProps) => { const [isMouseDown, setIsMouseDown] = useState(false); const handleMouseDown = (ev: React.MouseEvent) => { @@ -25,10 +31,11 @@ const ResizeHandle = ({onResize}: ResizeHandleProps) => { setIsMouseDown(true); }; - const handleMouseUp = (ev: MouseEvent) => { + const handleMouseUp = useCallback((ev: MouseEvent) => { ev.preventDefault(); setIsMouseDown(false); - }; + onHandleRelease(); + }, [onHandleRelease]); useEffect(() => { if (false === isMouseDown) { @@ -49,6 +56,7 @@ const ResizeHandle = ({onResize}: ResizeHandleProps) => { window.removeEventListener("mouseup", handleMouseUp); }; }, [ + handleMouseUp, isMouseDown, onResize, ]); diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index 18099e87..a7c2b966 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -33,20 +33,17 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { const tabListRef = useRef(null); - // handlePanelTabOpen const handlePanelTabOpen = useCallback(() => { setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); + document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px"); }, []); - const handlePanelTabClose = () => { - if (null === tabListRef.current) { - console.error("Unexpected null tabListRef.current"); - - return; + const handleResizeHandleRelease = useCallback(() => { + if (panelWidth === tabListRef.current?.clientWidth) { + setActiveTabName(TAB_NAME.NONE); + document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); } - setActiveTabName(TAB_NAME.NONE); - setPanelWidth(tabListRef.current.clientWidth); - }; + }, [panelWidth]); const handleResize = useCallback((offset: number) => { if (null === tabListRef.current) { @@ -55,7 +52,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { return; } if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > offset) { - handlePanelTabClose(); + setPanelWidth(tabListRef.current.clientWidth); } else if (offset < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO) { setPanelWidth(offset); } @@ -74,7 +71,9 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { ref={tabListRef} onActiveTabNameChange={setActiveTabName} onPanelTabOpen={handlePanelTabOpen}/> - +
{children} diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css index 6b2a7a6f..21178bdc 100644 --- a/new-log-viewer/src/index.css +++ b/new-log-viewer/src/index.css @@ -16,6 +16,7 @@ html { /* size globals */ --ylv-status-bar-height: 32px; --ylv-menu-bar-height: 32px; + --ylv-panel-resize-handle-width: 3px; /* z-index globals * @@ -24,6 +25,7 @@ html { * .monaco-editor .minimap { z-index: 5; } * ``` */ + --ylv-resize-handle-z-index: 1; --ylv-menu-bar-z-index: 6; --ylv-drop-file-container-hover-mask-z-index: 10; --ylv-drop-file-container-hover-message-z-index: 11; From 85d112da052ec7bb649e8f0b0e0cf1b6b6fecd00 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 16:26:59 -0400 Subject: [PATCH 18/83] Increase the min-width before the sidebar snaps closed. --- new-log-viewer/src/components/SidebarContainer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index a7c2b966..7aefd828 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -13,7 +13,7 @@ import "./index.css"; const PANEL_DEFAULT_WIDTH_IN_PIXEL = 300; -const PANEL_CLIP_THRESHOLD_IN_PIXEL = 80; +const PANEL_CLIP_THRESHOLD_IN_PIXEL = 250; const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; interface SidebarContainerProps { From c032ce4e0e78766e4df2656b55d9ea7284a64d77 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 16:34:01 -0400 Subject: [PATCH 19/83] Decrease the padding in the sidebar by 25%. --- .../components/SidebarContainer/PanelTabs/CustomTabPanel.css | 3 +++ .../components/SidebarContainer/PanelTabs/CustomTabPanel.tsx | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css new file mode 100644 index 00000000..d30c8fec --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css @@ -0,0 +1,3 @@ +.sidebar-tab-panel { + padding: 0.75rem; +} diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx index e9066d58..04902122 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx @@ -25,7 +25,10 @@ interface CustomTabPanelProps { */ const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => { return ( - + Date: Wed, 18 Sep 2024 16:45:22 -0400 Subject: [PATCH 20/83] Make the buttons square rather than rectangles. --- .../src/components/SidebarContainer/PanelTabs/index.css | 9 ++++++++- .../src/components/SidebarContainer/PanelTabs/index.tsx | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index 5acddc42..262c5cd7 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -1,7 +1,14 @@ .sidebar-tabs { - height: 100%; flex-grow: 1; width: calc(100% - var(--ylv-panel-resize-handle-width)); + height: 100%; +} + +.sidebar-tab-button { + justify-content: center !important; + width: 50px; + height: 50px; + padding: 0 !important; } .sidebar-tab-list-spacing { diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index 008f9d15..f7526e01 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -74,6 +74,7 @@ const PanelTabs = forwardRef(( {tabName: TAB_NAME.FILE_INFO, icon: }, ].map(({tabName, icon}) => ( (( ))}
Date: Wed, 18 Sep 2024 17:14:08 -0400 Subject: [PATCH 21/83] Add YScope logo component and ABeeZee font. --- new-log-viewer/public/index.html | 1 + .../src/components/YScopeLogo/index.css | 5 ++++ .../src/components/YScopeLogo/index.tsx | 28 +++++++++++++++++++ 3 files changed, 34 insertions(+) create mode 100644 new-log-viewer/src/components/YScopeLogo/index.css create mode 100644 new-log-viewer/src/components/YScopeLogo/index.tsx diff --git a/new-log-viewer/public/index.html b/new-log-viewer/public/index.html index 799ad411..f43417f2 100644 --- a/new-log-viewer/public/index.html +++ b/new-log-viewer/public/index.html @@ -10,6 +10,7 @@ +
diff --git a/new-log-viewer/src/components/YScopeLogo/index.css b/new-log-viewer/src/components/YScopeLogo/index.css new file mode 100644 index 00000000..ca86be94 --- /dev/null +++ b/new-log-viewer/src/components/YScopeLogo/index.css @@ -0,0 +1,5 @@ +.yscope-logo { + font-family: ABeeZee, sans-serif; + font-weight: 700; + color: rgb(24 136 250); +} diff --git a/new-log-viewer/src/components/YScopeLogo/index.tsx b/new-log-viewer/src/components/YScopeLogo/index.tsx new file mode 100644 index 00000000..e50cb230 --- /dev/null +++ b/new-log-viewer/src/components/YScopeLogo/index.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +import "./index.css"; + + +/** + * Renders the YScope logo. + * + * @param props + * @param props.className Additional class names. + * @param props.rest + * @return + */ +const YScopeLogo = ({ + className, + ...rest +}: React.HTMLProps) => { + return ( +
+ YScope +
+ ); +}; + +export default YScopeLogo; From 9bbfc0bc2f055f039357ae68b35a725f5fe88982 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:14:21 -0400 Subject: [PATCH 22/83] Add YScopeLogo and replace IconButton with Button. --- new-log-viewer/src/components/MenuBar/index.css | 7 +++++++ new-log-viewer/src/components/MenuBar/index.tsx | 13 ++++++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index 8bc60d23..c7b1719b 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -10,6 +10,13 @@ box-shadow: 0 1px 0 0 var(--joy-palette-neutral-outlinedBorder); } +.menu-bar-logo { + user-select: none; + width: 64px; + font-size: 1.1rem; + text-align: center; +} + .menu-bar-filename { flex-grow: 1; align-items: center; diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx index beff0f1f..3ed72a90 100644 --- a/new-log-viewer/src/components/MenuBar/index.tsx +++ b/new-log-viewer/src/components/MenuBar/index.tsx @@ -1,8 +1,8 @@ import {useContext} from "react"; import { + Button, Divider, - IconButton, Sheet, Stack, Typography, @@ -13,6 +13,7 @@ import FolderOpenIcon from "@mui/icons-material/FolderOpen"; import {StateContext} from "../../contexts/StateContextProvider"; import {CURSOR_CODE} from "../../typings/worker"; import {openFile} from "../../utils/file"; +import YScopeLogo from "../YScopeLogo"; import NavigationBar from "./NavigationBar"; import "./index.css"; @@ -35,17 +36,19 @@ const MenuBar = () => { return ( <> + - } onClick={handleOpenFile} > - - + Open + {fileName} From 54bb3c8dca31201fa4fc2de7424033ddd800314f Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:14:42 -0400 Subject: [PATCH 23/83] Update sidebar tab button dimensions. --- .../src/components/SidebarContainer/PanelTabs/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index 262c5cd7..4bd96d63 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -6,8 +6,8 @@ .sidebar-tab-button { justify-content: center !important; - width: 50px; - height: 50px; + width: 64px; + height: 64px; padding: 0 !important; } From ea6b38e7bca69b079accb73cd80275732c76f51c Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:23:28 -0400 Subject: [PATCH 24/83] Adjust default Sidebar panel width to 360px. --- new-log-viewer/src/components/SidebarContainer/index.css | 2 +- new-log-viewer/src/components/SidebarContainer/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/index.css b/new-log-viewer/src/components/SidebarContainer/index.css index b127b334..86b29cca 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.css +++ b/new-log-viewer/src/components/SidebarContainer/index.css @@ -1,5 +1,5 @@ :root { - --ylv-panel-width: 300px; + --ylv-panel-width: 360px; } .sidebar-container { diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index 7aefd828..a99ddc85 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -12,7 +12,7 @@ import ResizeHandle from "./ResizeHandle"; import "./index.css"; -const PANEL_DEFAULT_WIDTH_IN_PIXEL = 300; +const PANEL_DEFAULT_WIDTH_IN_PIXEL = 360; const PANEL_CLIP_THRESHOLD_IN_PIXEL = 250; const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; From 98b55f58548f67d0704113f19b9cfaf70cdcb0fe Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:23:48 -0400 Subject: [PATCH 25/83] Reformat CSS file. --- .../src/components/SidebarContainer/ResizeHandle.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css index 67f73be4..28d3dedc 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css @@ -1,9 +1,12 @@ .resize-handle { cursor: ew-resize; + + z-index: var(--ylv-resize-handle-z-index); + width: var(--ylv-panel-resize-handle-width); height: 100%; + background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); - z-index: var(--ylv-resize-handle-z-index); } .resize-handle:hover { From 128ab5f61c949356b7242659e7dc88795a2ef8d1 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:24:21 -0400 Subject: [PATCH 26/83] Remove redundant line in StateContextProvider.tsx --- new-log-viewer/src/contexts/StateContextProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index c66b8394..c7e448a2 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -296,6 +296,5 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { ); }; - export default StateContextProvider; export {StateContext}; From 8a3e9b660068636ba514605be59763b5ab11c72f Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:28:47 -0400 Subject: [PATCH 27/83] Disable custom-property-pattern check for joyui custom properties in CSS files. --- new-log-viewer/src/components/MenuBar/index.css | 1 + new-log-viewer/src/components/SidebarContainer/ResizeHandle.css | 2 ++ new-log-viewer/src/components/StatusBar/index.css | 1 + 3 files changed, 4 insertions(+) diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index c7b1719b..9856c630 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -7,6 +7,7 @@ height: var(--ylv-status-bar-height); + /* stylelint-disable-next-line custom-property-pattern */ box-shadow: 0 1px 0 0 var(--joy-palette-neutral-outlinedBorder); } diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css index 28d3dedc..3f2fb1ef 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css @@ -6,9 +6,11 @@ width: var(--ylv-panel-resize-handle-width); height: 100%; + /* stylelint-disable-next-line custom-property-pattern */ background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); } .resize-handle:hover { + /* stylelint-disable-next-line custom-property-pattern */ background-color: var(--joy-palette-primary-solidHoverBg, #0258a8); } diff --git a/new-log-viewer/src/components/StatusBar/index.css b/new-log-viewer/src/components/StatusBar/index.css index d5b3f52f..a300738b 100644 --- a/new-log-viewer/src/components/StatusBar/index.css +++ b/new-log-viewer/src/components/StatusBar/index.css @@ -7,6 +7,7 @@ width: 100%; + /* stylelint-disable-next-line custom-property-pattern */ box-shadow: 0 -1px 0 0 var(--joy-palette-neutral-outlinedBorder); } From f535eeb29d558f50924818becbb1d6829fa12cde Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 17:56:13 -0400 Subject: [PATCH 28/83] Rename 'File Info' tab display name to 'File info'. --- new-log-viewer/src/typings/tab.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/typings/tab.ts b/new-log-viewer/src/typings/tab.ts index c36231ae..3daa9877 100644 --- a/new-log-viewer/src/typings/tab.ts +++ b/new-log-viewer/src/typings/tab.ts @@ -9,7 +9,7 @@ enum TAB_NAME { */ const TAB_DISPLAY_NAMES: Record = Object.freeze({ [TAB_NAME.NONE]: "None", - [TAB_NAME.FILE_INFO]: "File Info", + [TAB_NAME.FILE_INFO]: "File info", [TAB_NAME.SETTINGS]: "Settings", }); From bd3c94c54f0f7d0dac3bdc11d7807987fc9d9e83 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 18:11:17 -0400 Subject: [PATCH 29/83] Remove YScopeLogo component and update icon styles. --- new-log-viewer/public/favicon.svg | 1 + .../src/components/MenuBar/index.css | 16 ++++--- .../src/components/MenuBar/index.tsx | 42 ++++++++++++------- .../SidebarContainer/PanelTabs/index.css | 8 +++- .../SidebarContainer/PanelTabs/index.tsx | 12 +++--- .../src/components/YScopeLogo/index.css | 5 --- .../src/components/YScopeLogo/index.tsx | 28 ------------- 7 files changed, 49 insertions(+), 63 deletions(-) create mode 100644 new-log-viewer/public/favicon.svg delete mode 100644 new-log-viewer/src/components/YScopeLogo/index.css delete mode 100644 new-log-viewer/src/components/YScopeLogo/index.tsx diff --git a/new-log-viewer/public/favicon.svg b/new-log-viewer/public/favicon.svg new file mode 100644 index 00000000..baeb3b46 --- /dev/null +++ b/new-log-viewer/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css index 9856c630..08fe4c66 100644 --- a/new-log-viewer/src/components/MenuBar/index.css +++ b/new-log-viewer/src/components/MenuBar/index.css @@ -11,14 +11,18 @@ box-shadow: 0 1px 0 0 var(--joy-palette-neutral-outlinedBorder); } -.menu-bar-logo { - user-select: none; - width: 64px; - font-size: 1.1rem; - text-align: center; +.menu-bar-logo-container { + display: flex; + justify-content: center; + width: 48px; + height: var(--ylv-status-bar-height); +} + +.menu-bar-open-file-icon { + font-size: 24px !important; } .menu-bar-filename { flex-grow: 1; - align-items: center; + padding-left: 10px; } diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx index 3ed72a90..99cd0f33 100644 --- a/new-log-viewer/src/components/MenuBar/index.tsx +++ b/new-log-viewer/src/components/MenuBar/index.tsx @@ -1,10 +1,10 @@ import {useContext} from "react"; import { - Button, Divider, + IconButton, Sheet, - Stack, + Tooltip, Typography, } from "@mui/joy"; @@ -13,7 +13,6 @@ import FolderOpenIcon from "@mui/icons-material/FolderOpen"; import {StateContext} from "../../contexts/StateContextProvider"; import {CURSOR_CODE} from "../../typings/worker"; import {openFile} from "../../utils/file"; -import YScopeLogo from "../YScopeLogo"; import NavigationBar from "./NavigationBar"; import "./index.css"; @@ -36,23 +35,34 @@ const MenuBar = () => { return ( <> - - + {"yscope-small-logo"} +
+ + + - - - {fileName} - - + + + + + + + {fileName} + diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index 4bd96d63..ee68d320 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -6,11 +6,15 @@ .sidebar-tab-button { justify-content: center !important; - width: 64px; - height: 64px; + width: 48px; + height: 48px; padding: 0 !important; } +.sidebar-tab-button-icon { + font-size: 32px !important; +} + .sidebar-tab-list-spacing { flex-grow: 1; } diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index f7526e01..91567348 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -9,8 +9,8 @@ import { Tabs, } from "@mui/joy"; -import InfoIcon from "@mui/icons-material/Info"; -import SettingsIcon from "@mui/icons-material/Settings"; +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; +import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; import { TAB_DISPLAY_NAMES, @@ -71,8 +71,8 @@ const PanelTabs = forwardRef(( size={"lg"} > {[ - {tabName: TAB_NAME.FILE_INFO, icon: }, - ].map(({tabName, icon}) => ( + {tabName: TAB_NAME.FILE_INFO, Icon: InfoOutlinedIcon}, + ].map(({tabName, Icon}) => ( (( title={TAB_DISPLAY_NAMES[TAB_NAME.FILE_INFO]} value={tabName} > - {icon} + ))}
@@ -90,7 +90,7 @@ const PanelTabs = forwardRef(( title={TAB_DISPLAY_NAMES[TAB_NAME.SETTINGS]} value={TAB_NAME.SETTINGS} > - + diff --git a/new-log-viewer/src/components/YScopeLogo/index.css b/new-log-viewer/src/components/YScopeLogo/index.css deleted file mode 100644 index ca86be94..00000000 --- a/new-log-viewer/src/components/YScopeLogo/index.css +++ /dev/null @@ -1,5 +0,0 @@ -.yscope-logo { - font-family: ABeeZee, sans-serif; - font-weight: 700; - color: rgb(24 136 250); -} diff --git a/new-log-viewer/src/components/YScopeLogo/index.tsx b/new-log-viewer/src/components/YScopeLogo/index.tsx deleted file mode 100644 index e50cb230..00000000 --- a/new-log-viewer/src/components/YScopeLogo/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from "react"; - -import "./index.css"; - - -/** - * Renders the YScope logo. - * - * @param props - * @param props.className Additional class names. - * @param props.rest - * @return - */ -const YScopeLogo = ({ - className, - ...rest -}: React.HTMLProps) => { - return ( -
- YScope -
- ); -}; - -export default YScopeLogo; From fd1431fe3c27b95824fd23ec0860aa13f69229f6 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 18:20:38 -0400 Subject: [PATCH 30/83] Move active tab button indicator placement to the left. --- .../src/components/SidebarContainer/PanelTabs/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index 91567348..af7a2504 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -76,6 +76,7 @@ const PanelTabs = forwardRef(( Date: Wed, 18 Sep 2024 18:21:03 -0400 Subject: [PATCH 31/83] Change default fileName back to an empty string. --- new-log-viewer/src/contexts/StateContextProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index c7e448a2..abc81804 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -52,7 +52,7 @@ const StateContext = createContext({} as StateContextType); */ const STATE_DEFAULT: Readonly = Object.freeze({ beginLineNumToLogEventNum: new Map(), - fileName: "No file is open.", + fileName: "", loadFile: () => null, loadPage: () => null, logData: "No file is open.", From d5c9fa4e6ab19994376ce4ee944f5dd47e71fb53 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 18:23:26 -0400 Subject: [PATCH 32/83] Show no-file-open message in FileInfoTab. --- .../PanelTabs/FileInfoTab.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index 87969b5b..381ab879 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -33,17 +33,19 @@ const FileInfoTab = () => { tabName={TAB_NAME.FILE_INFO} title={TAB_DISPLAY_NAMES[TAB_NAME.FILE_INFO]} > - - } - title={"Name"}/> - - } - title={"Original Size"}/> - + {"" === fileName ? + "No file is open." : + + } + title={"Name"}/> + + } + title={"Original Size"}/> + } ); }; From f4baacd5fb4ba73661c7ca8bbab904818a488ab9 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 18:38:55 -0400 Subject: [PATCH 33/83] Refactor tab buttons to use TooltipTab component which moves indicator to left and provides a tooltip. --- .../SidebarContainer/PanelTabs/TooltipTab.tsx | 47 +++++++++++++++++++ .../SidebarContainer/PanelTabs/index.tsx | 30 ++++-------- 2 files changed, 55 insertions(+), 22 deletions(-) create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx new file mode 100644 index 00000000..8db23afa --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx @@ -0,0 +1,47 @@ +import { + Tab, + Tooltip, +} from "@mui/joy"; + +import {SvgIconComponent} from "@mui/icons-material"; + +import { + TAB_DISPLAY_NAMES, + TAB_NAME, +} from "../../../typings/tab"; + + +interface TooltipTabProps { + tabName: TAB_NAME, + Icon: SvgIconComponent +} + +/** + * Renders a tooltip-wrapped tab button. + * + * @param props + * @param props.tabName + * @param props.Icon + * @return + */ +const TooltipTab = ({tabName, Icon}: TooltipTabProps) => { + return ( + + + + + + ); +}; + +export default TooltipTab; diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index af7a2504..ba7f5cb9 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -4,7 +4,6 @@ import React, { } from "react"; import { - Tab, TabList, Tabs, } from "@mui/joy"; @@ -12,12 +11,10 @@ import { import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; -import { - TAB_DISPLAY_NAMES, - TAB_NAME, -} from "../../../typings/tab"; +import {TAB_NAME} from "../../../typings/tab"; import SettingsModal from "../../modals/SettingsModal"; import FileInfoTab from "./FileInfoTab"; +import TooltipTab from "./TooltipTab"; interface PanelTabsProps { @@ -73,26 +70,15 @@ const PanelTabs = forwardRef(( {[ {tabName: TAB_NAME.FILE_INFO, Icon: InfoOutlinedIcon}, ].map(({tabName, Icon}) => ( - - - + tabName={tabName}/> ))}
- - - + From 4e046fe5cf96a94afb51552fa12e3fcd9066fdd7 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 18:39:22 -0400 Subject: [PATCH 34/83] Add arrow to "Open file" tooltip. --- new-log-viewer/src/components/MenuBar/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx index 99cd0f33..ecaf5b0e 100644 --- a/new-log-viewer/src/components/MenuBar/index.tsx +++ b/new-log-viewer/src/components/MenuBar/index.tsx @@ -44,6 +44,7 @@ const MenuBar = () => { Date: Wed, 18 Sep 2024 19:11:55 -0400 Subject: [PATCH 35/83] Support clicking on an active tab button to close the tab. --- .../SidebarContainer/PanelTabs/TooltipTab.tsx | 11 ++++++-- .../SidebarContainer/PanelTabs/index.tsx | 18 ++++++------ .../src/components/SidebarContainer/index.tsx | 28 +++++++++++++++---- 3 files changed, 39 insertions(+), 18 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx index 8db23afa..012b3650 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx @@ -13,7 +13,8 @@ import { interface TooltipTabProps { tabName: TAB_NAME, - Icon: SvgIconComponent + Icon: SvgIconComponent, + onTabButtonClick: (tabName: TAB_NAME) => void } /** @@ -22,9 +23,14 @@ interface TooltipTabProps { * @param props * @param props.tabName * @param props.Icon + * @param props.onTabButtonClick * @return */ -const TooltipTab = ({tabName, Icon}: TooltipTabProps) => { +const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => { + const handleClick = () => { + onTabButtonClick(tabName); + }; + return ( { className={"sidebar-tab-button"} color={"neutral"} indicatorPlacement={"left"} + slotProps={{root: {onClick: handleClick}}} value={tabName} > diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index ba7f5cb9..f95d7bb2 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -1,4 +1,4 @@ -import React, { +import { forwardRef, useState, } from "react"; @@ -20,7 +20,6 @@ import TooltipTab from "./TooltipTab"; interface PanelTabsProps { activeTabName: TAB_NAME, onActiveTabNameChange: (newValue: TAB_NAME) => void, - onPanelTabOpen: () => void, } /** @@ -33,7 +32,6 @@ const PanelTabs = forwardRef(( { activeTabName, onActiveTabNameChange, - onPanelTabOpen, }, tabListRef ) => { @@ -43,14 +41,13 @@ const PanelTabs = forwardRef(( setIsSettingsModalOpen(false); }; - const handleTabChange = (__: React.SyntheticEvent | null, value: number | string | null) => { - switch (value) { + const handleTabButtonClick = (tabName: TAB_NAME) => { + switch (tabName) { case TAB_NAME.SETTINGS: setIsSettingsModalOpen(true); break; default: - onActiveTabNameChange(value as TAB_NAME); - onPanelTabOpen(); + onActiveTabNameChange(tabName as TAB_NAME); } }; @@ -61,7 +58,6 @@ const PanelTabs = forwardRef(( orientation={"vertical"} value={activeTabName} variant={"plain"} - onChange={handleTabChange} > (( + tabName={tabName} + onTabButtonClick={handleTabButtonClick}/> ))}
+ tabName={TAB_NAME.SETTINGS} + onTabButtonClick={handleTabButtonClick}/> diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index a99ddc85..d3ca5e51 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -33,15 +33,32 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { const tabListRef = useRef(null); - const handlePanelTabOpen = useCallback(() => { + const hidePanelAndResizeHandle = () => { + setActiveTabName(TAB_NAME.NONE); + document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); + }; + + const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => { + if (null === tabListRef.current) { + console.error("Unexpected null tabListRef.current"); + + return; + } + + if (activeTabName === tabName) { + hidePanelAndResizeHandle(); + setPanelWidth(tabListRef.current.clientWidth); + + return; + } + setActiveTabName(tabName); setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px"); - }, []); + }, [activeTabName]); const handleResizeHandleRelease = useCallback(() => { if (panelWidth === tabListRef.current?.clientWidth) { - setActiveTabName(TAB_NAME.NONE); - document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); + hidePanelAndResizeHandle(); } }, [panelWidth]); @@ -69,8 +86,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { + onActiveTabNameChange={handleActiveTabNameChange}/> From 0b1b33f9c495bfe8c6d95af6af3c5cbaeb23e970 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 19:14:25 -0400 Subject: [PATCH 36/83] Remove unnecessary type assertion on tabName value. --- .../src/components/SidebarContainer/PanelTabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index f95d7bb2..a7cfcf12 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -47,7 +47,7 @@ const PanelTabs = forwardRef(( setIsSettingsModalOpen(true); break; default: - onActiveTabNameChange(tabName as TAB_NAME); + onActiveTabNameChange(tabName); } }; From 832763d378cc8eeda6022da7034cc71f33eaa3a0 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 19:23:11 -0400 Subject: [PATCH 37/83] Add set status bar z-index so that the border of it can be shown over the monaco-editor.minimap. --- new-log-viewer/src/components/StatusBar/index.css | 1 + new-log-viewer/src/index.css | 1 + 2 files changed, 2 insertions(+) diff --git a/new-log-viewer/src/components/StatusBar/index.css b/new-log-viewer/src/components/StatusBar/index.css index a300738b..e5cf5af6 100644 --- a/new-log-viewer/src/components/StatusBar/index.css +++ b/new-log-viewer/src/components/StatusBar/index.css @@ -1,5 +1,6 @@ .status-bar { position: absolute; + z-index: var(--ylv-status-bar-z-index); bottom: 0; display: flex; diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css index 74b4cd7d..e5df42d8 100644 --- a/new-log-viewer/src/index.css +++ b/new-log-viewer/src/index.css @@ -29,6 +29,7 @@ html { */ --ylv-resize-handle-z-index: 1; --ylv-menu-bar-z-index: 6; + --ylv-status-bar-z-index: 6; --ylv-drop-file-container-hover-mask-z-index: 10; --ylv-drop-file-container-hover-message-z-index: 11; } From 203f4f21ad8d204c794ca9aaf5db10c0730c2fed Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 19:28:01 -0400 Subject: [PATCH 38/83] Change fileName empty string check. --- .../src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index 381ab879..ee5b1bb6 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -33,7 +33,7 @@ const FileInfoTab = () => { tabName={TAB_NAME.FILE_INFO} title={TAB_DISPLAY_NAMES[TAB_NAME.FILE_INFO]} > - {"" === fileName ? + {0 === fileName.length ? "No file is open." : Date: Wed, 18 Sep 2024 19:34:24 -0400 Subject: [PATCH 39/83] Add padding between sidebar tab panel title and content. --- .../components/SidebarContainer/PanelTabs/CustomTabPanel.css | 4 ++++ .../components/SidebarContainer/PanelTabs/CustomTabPanel.tsx | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css index d30c8fec..f5c37d48 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css @@ -1,3 +1,7 @@ .sidebar-tab-panel { padding: 0.75rem; } + +.sidebar-tab-panel-title { + margin-bottom: 0.5rem !important; +} diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx index 04902122..ee19163d 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx @@ -7,6 +7,8 @@ import { Typography, } from "@mui/joy"; +import "./CustomTabPanel.css"; + interface CustomTabPanelProps { children: React.ReactNode, @@ -29,7 +31,7 @@ const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => { className={"sidebar-tab-panel"} value={tabName} > - + Date: Wed, 18 Sep 2024 19:41:40 -0400 Subject: [PATCH 40/83] Add Divider component to TooltipTab. --- .../SidebarContainer/PanelTabs/TooltipTab.tsx | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx index 012b3650..5040ffab 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx @@ -1,4 +1,5 @@ import { + Divider, Tab, Tooltip, } from "@mui/joy"; @@ -32,22 +33,25 @@ const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => { }; return ( - - + - - - + + + + + + ); }; From f5d6a6fc20cac2869aa25ea0b8da5b3aa9397eb4 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 19:46:43 -0400 Subject: [PATCH 41/83] Add outlined variant to TooltipTab component. --- .../src/components/SidebarContainer/PanelTabs/TooltipTab.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx index 5040ffab..2026bd78 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx @@ -39,6 +39,7 @@ const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => { key={tabName} placement={"right"} title={TAB_DISPLAY_NAMES[tabName]} + variant={"outlined"} > Date: Wed, 18 Sep 2024 19:56:04 -0400 Subject: [PATCH 42/83] Revert "Add Divider component to TooltipTab." --- .../SidebarContainer/PanelTabs/TooltipTab.tsx | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx index 2026bd78..0d75b338 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx @@ -1,5 +1,4 @@ import { - Divider, Tab, Tooltip, } from "@mui/joy"; @@ -33,26 +32,23 @@ const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => { }; return ( - <> - + - - - - - - + + + ); }; From 27cc339bc831a2e16c0a8c604b15655696ed96f0 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 20:05:43 -0400 Subject: [PATCH 43/83] Refactor CSS imports. --- .../SidebarContainer/PanelTabs/FileInfoTab.tsx | 2 -- .../SidebarContainer/PanelTabs/TooltipTab.css | 10 ++++++++++ .../SidebarContainer/PanelTabs/TooltipTab.tsx | 2 ++ .../components/SidebarContainer/PanelTabs/index.css | 11 ----------- .../components/SidebarContainer/PanelTabs/index.tsx | 2 ++ 5 files changed, 14 insertions(+), 13 deletions(-) create mode 100644 new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.css diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index ee5b1bb6..3acb56fc 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -17,8 +17,6 @@ import {formatSizeInBytes} from "../../../utils/units"; import CustomListItem from "../../CustomListItem"; import CustomTabPanel from "./CustomTabPanel"; -import "./index.css"; - /** * Display the file name and original size of the selected file. diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.css new file mode 100644 index 00000000..11fe18bd --- /dev/null +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.css @@ -0,0 +1,10 @@ +.sidebar-tab-button { + justify-content: center !important; + width: 48px; + height: 48px; + padding: 0 !important; +} + +.sidebar-tab-button-icon { + font-size: 32px !important; +} diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx index 0d75b338..2f7d9688 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx @@ -10,6 +10,8 @@ import { TAB_NAME, } from "../../../typings/tab"; +import "./TooltipTab.css"; + interface TooltipTabProps { tabName: TAB_NAME, diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css index ee68d320..f9b4e2c3 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css @@ -4,17 +4,6 @@ height: 100%; } -.sidebar-tab-button { - justify-content: center !important; - width: 48px; - height: 48px; - padding: 0 !important; -} - -.sidebar-tab-button-icon { - font-size: 32px !important; -} - .sidebar-tab-list-spacing { flex-grow: 1; } diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx index a7cfcf12..98f391f6 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx @@ -16,6 +16,8 @@ import SettingsModal from "../../modals/SettingsModal"; import FileInfoTab from "./FileInfoTab"; import TooltipTab from "./TooltipTab"; +import "./index.css"; + interface PanelTabsProps { activeTabName: TAB_NAME, From 69d0aa3e9c57afee42a74766aa4c997f95dd942a Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Wed, 18 Sep 2024 20:07:49 -0400 Subject: [PATCH 44/83] Prevent text selection in panel titles. --- .../src/components/SidebarContainer/PanelTabs/CustomTabPanel.css | 1 + 1 file changed, 1 insertion(+) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css index f5c37d48..376fed94 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css @@ -3,5 +3,6 @@ } .sidebar-tab-panel-title { + user-select: none; margin-bottom: 0.5rem !important; } From c19ae6b718c626bbae3c5a105b5dfbf50af7367e Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 19 Sep 2024 15:51:51 -0400 Subject: [PATCH 45/83] Clear original file size before loading. --- new-log-viewer/src/contexts/StateContextProvider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index abc81804..3cf46443 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -176,6 +176,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { const loadFile = useCallback((fileSrc: FileSrcType, cursor: CursorType) => { setFileName("Loading..."); setLogData("Loading..."); + setOriginalFileSizeInBytes(STATE_DEFAULT.originalFileSizeInBytes); if ("string" !== typeof fileSrc) { updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null}); } From dbe858c185868237a9a6c76147f4c53eeee99cad Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 19 Sep 2024 15:52:02 -0400 Subject: [PATCH 46/83] Add word-break style to FileInfoTab content. --- new-log-viewer/src/components/CustomListItem.tsx | 8 +++++++- .../components/SidebarContainer/PanelTabs/FileInfoTab.tsx | 1 + 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/CustomListItem.tsx b/new-log-viewer/src/components/CustomListItem.tsx index 5772b392..85b03a07 100644 --- a/new-log-viewer/src/components/CustomListItem.tsx +++ b/new-log-viewer/src/components/CustomListItem.tsx @@ -5,12 +5,16 @@ import { ListItemContent, ListItemDecorator, Typography, + TypographyProps, } from "@mui/joy"; interface CustomListItemProps { content: string, icon: React.ReactNode, + slotProps?: { + content?: TypographyProps + }, title: string } @@ -21,9 +25,10 @@ interface CustomListItemProps { * @param props.content * @param props.icon * @param props.title + * @param props.slotProps * @return */ -const CustomListItem = ({content, icon, title}: CustomListItemProps) => ( +const CustomListItem = ({content, icon, slotProps, title}: CustomListItemProps) => ( {icon} @@ -33,6 +38,7 @@ const CustomListItem = ({content, icon, title}: CustomListItemProps) => ( {title} {content} diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index 3acb56fc..ac2f5fa0 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -37,6 +37,7 @@ const FileInfoTab = () => { } + slotProps={{content: {sx: {wordBreak: "break-word"}}}} title={"Name"}/> Date: Tue, 24 Sep 2024 01:05:15 -0400 Subject: [PATCH 47/83] Move CustomListItem.tsx to PanelTabs directory. --- .../{ => SidebarContainer/PanelTabs}/CustomListItem.tsx | 0 .../src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename new-log-viewer/src/components/{ => SidebarContainer/PanelTabs}/CustomListItem.tsx (100%) diff --git a/new-log-viewer/src/components/CustomListItem.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomListItem.tsx similarity index 100% rename from new-log-viewer/src/components/CustomListItem.tsx rename to new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomListItem.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx index ac2f5fa0..50081300 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx @@ -14,7 +14,7 @@ import { TAB_NAME, } from "../../../typings/tab"; import {formatSizeInBytes} from "../../../utils/units"; -import CustomListItem from "../../CustomListItem"; +import CustomListItem from "./CustomListItem"; import CustomTabPanel from "./CustomTabPanel"; From ed64bcf768bba31d4d8eaf9698706acbb65f11ea Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 01:18:01 -0400 Subject: [PATCH 48/83] Remove unused ABeeZee font link from index.html. --- new-log-viewer/public/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/new-log-viewer/public/index.html b/new-log-viewer/public/index.html index f43417f2..799ad411 100644 --- a/new-log-viewer/public/index.html +++ b/new-log-viewer/public/index.html @@ -10,7 +10,6 @@ -
From 8c1d6dc290f34fbb5066ebb506db2b6f2c18511f Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 01:30:18 -0400 Subject: [PATCH 49/83] Fix typo in docs - apply sugguestions. Co-authored-by: davemarco <83603688+davemarco@users.noreply.github.com> --- new-log-viewer/src/typings/tab.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/typings/tab.ts b/new-log-viewer/src/typings/tab.ts index 3daa9877..b2e8b1bf 100644 --- a/new-log-viewer/src/typings/tab.ts +++ b/new-log-viewer/src/typings/tab.ts @@ -5,7 +5,7 @@ enum TAB_NAME { } /** - * Mps the TAB_NAME enum values to their corresponding display names. + * Maps the TAB_NAME enum values to their corresponding display names. */ const TAB_DISPLAY_NAMES: Record = Object.freeze({ [TAB_NAME.NONE]: "None", From f1e1d583943373b58c9c9252862aa55537a9e2dd Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 01:36:56 -0400 Subject: [PATCH 50/83] Moved custom tab panel title styles from inline CSS to the stylesheet. --- .../SidebarContainer/PanelTabs/CustomTabPanel.css | 8 +++++++- .../SidebarContainer/PanelTabs/CustomTabPanel.tsx | 6 ++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css index 376fed94..8169315f 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css @@ -2,7 +2,13 @@ padding: 0.75rem; } -.sidebar-tab-panel-title { +.sidebar-tab-panel-title-container { user-select: none; margin-bottom: 0.5rem !important; } + +.sidebar-tab-panel-title { + font-size: 0.875rem !important; + font-weight: 400 !important; + text-transform: uppercase; +} diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx index ee19163d..9d1ab3e7 100644 --- a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx +++ b/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx @@ -31,12 +31,10 @@ const CustomTabPanel = ({children, tabName, title}: CustomTabPanelProps) => { className={"sidebar-tab-panel"} value={tabName} > - + {title} From db8a4430cf1164a1123b4f940668d161e5602955 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 01:50:47 -0400 Subject: [PATCH 51/83] Remove useEffect for updating panel width state and externalized width utility functions. --- .../src/components/SidebarContainer/index.tsx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index d3ca5e51..892d5a03 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -1,6 +1,5 @@ import React, { useCallback, - useEffect, useRef, useState, } from "react"; @@ -20,6 +19,25 @@ interface SidebarContainerProps { children: React.ReactNode, } +/** + * Gets width of the panel from body style properties. + * + * @return the width in pixels as a number. + */ +const getPanelWidth = () => parseInt( + document.body.style.getPropertyValue("--ylv-panel-width"), + 10 +); + +/** + * Sets width of the panel in body style properties. + * + * @param newValue in pixels. + */ +const setPanelWidth = (newValue: number) => { + document.body.style.setProperty("--ylv-panel-width", `${newValue}px`); +}; + /** * Wraps a children with a sidebar component on the left. * @@ -29,7 +47,6 @@ interface SidebarContainerProps { */ const SidebarContainer = ({children}: SidebarContainerProps) => { const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); - const [panelWidth, setPanelWidth] = useState(PANEL_DEFAULT_WIDTH_IN_PIXEL); const tabListRef = useRef(null); @@ -57,10 +74,10 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { }, [activeTabName]); const handleResizeHandleRelease = useCallback(() => { - if (panelWidth === tabListRef.current?.clientWidth) { + if (getPanelWidth() === tabListRef.current?.clientWidth) { hidePanelAndResizeHandle(); } - }, [panelWidth]); + }, []); const handleResize = useCallback((offset: number) => { if (null === tabListRef.current) { @@ -75,11 +92,6 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { } }, []); - // On `panelWidth` change, update CSS variable `--ylv-panel-width`. - useEffect(() => { - document.body.style.setProperty("--ylv-panel-width", `${panelWidth}px`); - }, [panelWidth]); - return (
From 80b203a5b2ffd4bcda2d8114208b4c237d276f00 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 01:51:30 -0400 Subject: [PATCH 52/83] Remove unnecessary fragment in ResizeHandle component. --- .../src/components/SidebarContainer/ResizeHandle.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx index 9a08dcb1..58918a01 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx @@ -62,11 +62,9 @@ const ResizeHandle = ({ ]); return ( - <> -
- +
); }; From 6e2772534eb2103fc0e3bd1df531077f58cef993 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 02:07:09 -0400 Subject: [PATCH 53/83] Update variable names and docs for the resize handle behaviours. --- .../SidebarContainer/ResizeHandle.tsx | 9 +++++++- .../src/components/SidebarContainer/index.tsx | 21 ++++++++++++------- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx index 58918a01..2be0fa2e 100644 --- a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx +++ b/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx @@ -9,7 +9,14 @@ import "./ResizeHandle.css"; interface ResizeHandleProps { onHandleRelease: () => void, - onResize: (offset: number) => void, + + /** + * Gets triggered when a resize event occurs. + * + * @param resizeHandlePosition The horizontal distance, in pixels, between the mouse pointer + * and the left edge of the viewport. + */ + onResize: (resizeHandlePosition: number) => void, } /** diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index 892d5a03..e9462add 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -50,7 +50,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { const tabListRef = useRef(null); - const hidePanelAndResizeHandle = () => { + const deactivateTabAndHideResizeHandle = () => { setActiveTabName(TAB_NAME.NONE); document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); }; @@ -63,7 +63,7 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { } if (activeTabName === tabName) { - hidePanelAndResizeHandle(); + deactivateTabAndHideResizeHandle(); setPanelWidth(tabListRef.current.clientWidth); return; @@ -75,20 +75,27 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { const handleResizeHandleRelease = useCallback(() => { if (getPanelWidth() === tabListRef.current?.clientWidth) { - hidePanelAndResizeHandle(); + deactivateTabAndHideResizeHandle(); } }, []); - const handleResize = useCallback((offset: number) => { + const handleResize = useCallback((resizeHandlePosition: number) => { if (null === tabListRef.current) { console.error("Unexpected null tabListRef.current"); return; } - if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > offset) { + if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > resizeHandlePosition) { + // If the resize handle is positioned to the right of the 's right edge + // with a clipping threshold accounted, close the panel. setPanelWidth(tabListRef.current.clientWidth); - } else if (offset < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO) { - setPanelWidth(offset); + } else if ( + resizeHandlePosition < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO + ) { + // If the resize handle is positioned to the left of 80% of the window's width, + // update the panel width with the distance between the mouse pointer and the + // window's left edge. + setPanelWidth(resizeHandlePosition); } }, []); From 68adc0cb6101f7031b39aeaa17bfb6728ec13439 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 02:10:48 -0400 Subject: [PATCH 54/83] Update the `deactivateTabAndHideResizeHandle` function to use the `useCallback` hook. --- new-log-viewer/src/components/SidebarContainer/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index e9462add..05b22d8a 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -50,10 +50,10 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { const tabListRef = useRef(null); - const deactivateTabAndHideResizeHandle = () => { + const deactivateTabAndHideResizeHandle = useCallback(() => { setActiveTabName(TAB_NAME.NONE); document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); - }; + }, []); const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => { if (null === tabListRef.current) { From e9ff7a91bf234290698f8a8c5dcb2ec12125bc74 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 02:11:28 -0400 Subject: [PATCH 55/83] Update dependencies for useCallback hooks in SidebarContainer. --- new-log-viewer/src/components/SidebarContainer/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/SidebarContainer/index.tsx index 05b22d8a..8b54ea5d 100644 --- a/new-log-viewer/src/components/SidebarContainer/index.tsx +++ b/new-log-viewer/src/components/SidebarContainer/index.tsx @@ -71,13 +71,16 @@ const SidebarContainer = ({children}: SidebarContainerProps) => { setActiveTabName(tabName); setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px"); - }, [activeTabName]); + }, [ + activeTabName, + deactivateTabAndHideResizeHandle, + ]); const handleResizeHandleRelease = useCallback(() => { if (getPanelWidth() === tabListRef.current?.clientWidth) { deactivateTabAndHideResizeHandle(); } - }, []); + }, [deactivateTabAndHideResizeHandle]); const handleResize = useCallback((resizeHandlePosition: number) => { if (null === tabListRef.current) { From 9dfdef3e1f435207847a9ae25b74a22f1f0b4a4b Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Tue, 24 Sep 2024 02:14:14 -0400 Subject: [PATCH 56/83] Suppress 'max-statements' ESLint rule for StateContextProvider. --- new-log-viewer/src/contexts/StateContextProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index 8dff46c2..3de5c67d 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -139,7 +139,7 @@ const workerPostReq = ( * @param props.children * @return */ -// eslint-disable-next-line max-lines-per-function +// eslint-disable-next-line max-lines-per-function, max-statements const StateContextProvider = ({children}: StateContextProviderProps) => { const {filePath, logEventNum} = useContext(UrlContext); From f53a2e266a61419acfbb3f5ac22d6226eabb2f2e Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 14:53:28 -0400 Subject: [PATCH 57/83] Rename SidebarContainer to CentralContainer. --- .../PanelTabs/CustomListItem.tsx | 0 .../PanelTabs/CustomTabPanel.css | 0 .../PanelTabs/CustomTabPanel.tsx | 0 .../PanelTabs/FileInfoTab.tsx | 0 .../PanelTabs/TooltipTab.css | 0 .../PanelTabs/TooltipTab.tsx | 0 .../PanelTabs/index.css | 0 .../PanelTabs/index.tsx | 0 .../{SidebarContainer => CentralContainer}/ResizeHandle.css | 0 .../{SidebarContainer => CentralContainer}/ResizeHandle.tsx | 0 .../{SidebarContainer => CentralContainer}/index.css | 0 .../{SidebarContainer => CentralContainer}/index.tsx | 0 new-log-viewer/src/components/Layout.tsx | 6 +++--- 13 files changed, 3 insertions(+), 3 deletions(-) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/CustomListItem.tsx (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/CustomTabPanel.css (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/CustomTabPanel.tsx (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/FileInfoTab.tsx (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/TooltipTab.css (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/TooltipTab.tsx (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/index.css (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/PanelTabs/index.tsx (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/ResizeHandle.css (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/ResizeHandle.tsx (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/index.css (100%) rename new-log-viewer/src/components/{SidebarContainer => CentralContainer}/index.tsx (100%) diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomListItem.tsx b/new-log-viewer/src/components/CentralContainer/PanelTabs/CustomListItem.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomListItem.tsx rename to new-log-viewer/src/components/CentralContainer/PanelTabs/CustomListItem.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.css similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.css rename to new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.css diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/CustomTabPanel.tsx rename to new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/CentralContainer/PanelTabs/FileInfoTab.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/FileInfoTab.tsx rename to new-log-viewer/src/components/CentralContainer/PanelTabs/FileInfoTab.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.css b/new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.css similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.css rename to new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.css diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/TooltipTab.tsx rename to new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css b/new-log-viewer/src/components/CentralContainer/PanelTabs/index.css similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/index.css rename to new-log-viewer/src/components/CentralContainer/PanelTabs/index.css diff --git a/new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/PanelTabs/index.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/PanelTabs/index.tsx rename to new-log-viewer/src/components/CentralContainer/PanelTabs/index.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.css b/new-log-viewer/src/components/CentralContainer/ResizeHandle.css similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/ResizeHandle.css rename to new-log-viewer/src/components/CentralContainer/ResizeHandle.css diff --git a/new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/ResizeHandle.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/ResizeHandle.tsx rename to new-log-viewer/src/components/CentralContainer/ResizeHandle.tsx diff --git a/new-log-viewer/src/components/SidebarContainer/index.css b/new-log-viewer/src/components/CentralContainer/index.css similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/index.css rename to new-log-viewer/src/components/CentralContainer/index.css diff --git a/new-log-viewer/src/components/SidebarContainer/index.tsx b/new-log-viewer/src/components/CentralContainer/index.tsx similarity index 100% rename from new-log-viewer/src/components/SidebarContainer/index.tsx rename to new-log-viewer/src/components/CentralContainer/index.tsx diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx index a3cc08da..c4963d50 100644 --- a/new-log-viewer/src/components/Layout.tsx +++ b/new-log-viewer/src/components/Layout.tsx @@ -2,10 +2,10 @@ import {CssVarsProvider} from "@mui/joy/styles"; import {CONFIG_KEY} from "../typings/config"; import {CONFIG_DEFAULT} from "../utils/config"; +import CentralContainer from "./CentralContainer"; import DropFileContainer from "./DropFileContainer"; import Editor from "./Editor"; import MenuBar from "./MenuBar"; -import SidebarContainer from "./SidebarContainer"; import StatusBar from "./StatusBar"; import APP_THEME from "./theme"; @@ -23,11 +23,11 @@ const Layout = () => { theme={APP_THEME} > - + - + ); From d1c40ded8635cf26060c7817b0a670da40622004 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 15:01:03 -0400 Subject: [PATCH 58/83] Refactor CentralContainer and extract Sidebar component. --- .../components/CentralContainer/Sidebar.css | 3 + .../components/CentralContainer/Sidebar.tsx | 111 ++++++++++++++++++ .../src/components/CentralContainer/index.css | 8 +- .../src/components/CentralContainer/index.tsx | 111 ++---------------- 4 files changed, 125 insertions(+), 108 deletions(-) create mode 100644 new-log-viewer/src/components/CentralContainer/Sidebar.css create mode 100644 new-log-viewer/src/components/CentralContainer/Sidebar.tsx diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar.css b/new-log-viewer/src/components/CentralContainer/Sidebar.css new file mode 100644 index 00000000..323fb710 --- /dev/null +++ b/new-log-viewer/src/components/CentralContainer/Sidebar.css @@ -0,0 +1,3 @@ +.sidebar-tabs-container { + display: flex; +} diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar.tsx new file mode 100644 index 00000000..ea8bc194 --- /dev/null +++ b/new-log-viewer/src/components/CentralContainer/Sidebar.tsx @@ -0,0 +1,111 @@ +import { + useCallback, + useRef, + useState, +} from "react"; + +import {TAB_NAME} from "../../typings/tab"; +import PanelTabs from "./PanelTabs"; +import ResizeHandle from "./ResizeHandle"; + +import "./Sidebar.css"; + + +const PANEL_DEFAULT_WIDTH_IN_PIXEL = 360; +const PANEL_CLIP_THRESHOLD_IN_PIXEL = 250; +const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; + +/** + * Gets width of the panel from body style properties. + * + * @return the width in pixels as a number. + */ +const getPanelWidth = () => parseInt( + document.body.style.getPropertyValue("--ylv-panel-width"), + 10 +); + +/** + * Sets width of the panel in body style properties. + * + * @param newValue in pixels. + */ +const setPanelWidth = (newValue: number) => { + document.body.style.setProperty("--ylv-panel-width", `${newValue}px`); +}; + + +/** + * + */ +const Sidebar = () => { + const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); + + const tabListRef = useRef(null); + + const deactivateTabAndHideResizeHandle = useCallback(() => { + setActiveTabName(TAB_NAME.NONE); + document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); + }, []); + + const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => { + if (null === tabListRef.current) { + console.error("Unexpected null tabListRef.current"); + + return; + } + + if (activeTabName === tabName) { + deactivateTabAndHideResizeHandle(); + setPanelWidth(tabListRef.current.clientWidth); + + return; + } + setActiveTabName(tabName); + setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); + document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px"); + }, [ + activeTabName, + deactivateTabAndHideResizeHandle, + ]); + + const handleResizeHandleRelease = useCallback(() => { + if (getPanelWidth() === tabListRef.current?.clientWidth) { + deactivateTabAndHideResizeHandle(); + } + }, [deactivateTabAndHideResizeHandle]); + + const handleResize = useCallback((resizeHandlePosition: number) => { + if (null === tabListRef.current) { + console.error("Unexpected null tabListRef.current"); + + return; + } + if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > resizeHandlePosition) { + // If the resize handle is positioned to the right of the 's right edge + // with a clipping threshold accounted, close the panel. + setPanelWidth(tabListRef.current.clientWidth); + } else if ( + resizeHandlePosition < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO + ) { + // If the resize handle is positioned to the left of 80% of the window's width, + // update the panel width with the distance between the mouse pointer and the + // window's left edge. + setPanelWidth(resizeHandlePosition); + } + }, []); + + return ( +
+ + +
+ ); +}; + +export default Sidebar; diff --git a/new-log-viewer/src/components/CentralContainer/index.css b/new-log-viewer/src/components/CentralContainer/index.css index 86b29cca..b4c9192a 100644 --- a/new-log-viewer/src/components/CentralContainer/index.css +++ b/new-log-viewer/src/components/CentralContainer/index.css @@ -2,16 +2,12 @@ --ylv-panel-width: 360px; } -.sidebar-container { +.central-container { display: grid; grid-template-columns: var(--ylv-panel-width) 1fr; width: 100vw; } -.sidebar-tabs-container { - display: flex; -} - -.sidebar-children-container { +.central-container-children-container { width: calc(100vw - var(--ylv-panel-width)); } diff --git a/new-log-viewer/src/components/CentralContainer/index.tsx b/new-log-viewer/src/components/CentralContainer/index.tsx index 8b54ea5d..1e65da63 100644 --- a/new-log-viewer/src/components/CentralContainer/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/index.tsx @@ -1,123 +1,30 @@ -import React, { - useCallback, - useRef, - useState, -} from "react"; +import React from "react"; -import {TAB_NAME} from "../../typings/tab"; -import PanelTabs from "./PanelTabs"; -import ResizeHandle from "./ResizeHandle"; +import Sidebar from "./Sidebar"; import "./index.css"; -const PANEL_DEFAULT_WIDTH_IN_PIXEL = 360; -const PANEL_CLIP_THRESHOLD_IN_PIXEL = 250; -const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; - -interface SidebarContainerProps { +interface CentralContainerProps { children: React.ReactNode, } /** - * Gets width of the panel from body style properties. - * - * @return the width in pixels as a number. - */ -const getPanelWidth = () => parseInt( - document.body.style.getPropertyValue("--ylv-panel-width"), - 10 -); - -/** - * Sets width of the panel in body style properties. - * - * @param newValue in pixels. - */ -const setPanelWidth = (newValue: number) => { - document.body.style.setProperty("--ylv-panel-width", `${newValue}px`); -}; - -/** - * Wraps a children with a sidebar component on the left. + * Locates in the center of the and wraps a children with a sidebar component on its left. * * @param props * @param props.children * @return */ -const SidebarContainer = ({children}: SidebarContainerProps) => { - const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); - - const tabListRef = useRef(null); - - const deactivateTabAndHideResizeHandle = useCallback(() => { - setActiveTabName(TAB_NAME.NONE); - document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); - }, []); - - const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => { - if (null === tabListRef.current) { - console.error("Unexpected null tabListRef.current"); - - return; - } - - if (activeTabName === tabName) { - deactivateTabAndHideResizeHandle(); - setPanelWidth(tabListRef.current.clientWidth); - - return; - } - setActiveTabName(tabName); - setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); - document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px"); - }, [ - activeTabName, - deactivateTabAndHideResizeHandle, - ]); - - const handleResizeHandleRelease = useCallback(() => { - if (getPanelWidth() === tabListRef.current?.clientWidth) { - deactivateTabAndHideResizeHandle(); - } - }, [deactivateTabAndHideResizeHandle]); - - const handleResize = useCallback((resizeHandlePosition: number) => { - if (null === tabListRef.current) { - console.error("Unexpected null tabListRef.current"); - - return; - } - if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > resizeHandlePosition) { - // If the resize handle is positioned to the right of the 's right edge - // with a clipping threshold accounted, close the panel. - setPanelWidth(tabListRef.current.clientWidth); - } else if ( - resizeHandlePosition < window.innerWidth * PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO - ) { - // If the resize handle is positioned to the left of 80% of the window's width, - // update the panel width with the distance between the mouse pointer and the - // window's left edge. - setPanelWidth(resizeHandlePosition); - } - }, []); - +const CentralContainer = ({children}: CentralContainerProps) => { return ( -
-
- - -
-
+
+ +
{children}
); }; -export default SidebarContainer; +export default CentralContainer; From 81bc4ae0d589e53be637f7ee4168c0fe56d3c466 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 15:07:22 -0400 Subject: [PATCH 59/83] Reorganize Sidebar component files. --- .../{ => Sidebar}/PanelTabs/CustomListItem.tsx | 0 .../{ => Sidebar}/PanelTabs/CustomTabPanel.css | 0 .../{ => Sidebar}/PanelTabs/CustomTabPanel.tsx | 0 .../{ => Sidebar}/PanelTabs/FileInfoTab.tsx | 6 +++--- .../CentralContainer/{ => Sidebar}/PanelTabs/TooltipTab.css | 0 .../CentralContainer/{ => Sidebar}/PanelTabs/TooltipTab.tsx | 2 +- .../CentralContainer/{ => Sidebar}/PanelTabs/index.css | 0 .../CentralContainer/{ => Sidebar}/PanelTabs/index.tsx | 4 ++-- .../CentralContainer/{ => Sidebar}/ResizeHandle.css | 0 .../CentralContainer/{ => Sidebar}/ResizeHandle.tsx | 0 .../CentralContainer/{Sidebar.css => Sidebar/index.css} | 0 .../CentralContainer/{Sidebar.tsx => Sidebar/index.tsx} | 4 ++-- 12 files changed, 8 insertions(+), 8 deletions(-) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/CustomListItem.tsx (100%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/CustomTabPanel.css (100%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/CustomTabPanel.tsx (100%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/FileInfoTab.tsx (89%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/TooltipTab.css (100%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/TooltipTab.tsx (97%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/index.css (100%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/PanelTabs/index.tsx (95%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/ResizeHandle.css (100%) rename new-log-viewer/src/components/CentralContainer/{ => Sidebar}/ResizeHandle.tsx (100%) rename new-log-viewer/src/components/CentralContainer/{Sidebar.css => Sidebar/index.css} (100%) rename new-log-viewer/src/components/CentralContainer/{Sidebar.tsx => Sidebar/index.tsx} (97%) diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/CustomListItem.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomListItem.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/CustomListItem.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomListItem.tsx diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.css diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/CustomTabPanel.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.tsx diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTab.tsx similarity index 89% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/FileInfoTab.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTab.tsx index 50081300..8cd5eaa0 100644 --- a/new-log-viewer/src/components/CentralContainer/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTab.tsx @@ -8,12 +8,12 @@ import { import AbcIcon from "@mui/icons-material/Abc"; import StorageIcon from "@mui/icons-material/Storage"; -import {StateContext} from "../../../contexts/StateContextProvider"; +import {StateContext} from "../../../../contexts/StateContextProvider"; import { TAB_DISPLAY_NAMES, TAB_NAME, -} from "../../../typings/tab"; -import {formatSizeInBytes} from "../../../utils/units"; +} from "../../../../typings/tab"; +import {formatSizeInBytes} from "../../../../utils/units"; import CustomListItem from "./CustomListItem"; import CustomTabPanel from "./CustomTabPanel"; diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.css b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.css diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.tsx similarity index 97% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.tsx index 2f7d9688..c9f42d37 100644 --- a/new-log-viewer/src/components/CentralContainer/PanelTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.tsx @@ -8,7 +8,7 @@ import {SvgIconComponent} from "@mui/icons-material"; import { TAB_DISPLAY_NAMES, TAB_NAME, -} from "../../../typings/tab"; +} from "../../../../typings/tab"; import "./TooltipTab.css"; diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/index.css b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/index.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.css diff --git a/new-log-viewer/src/components/CentralContainer/PanelTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx similarity index 95% rename from new-log-viewer/src/components/CentralContainer/PanelTabs/index.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx index 98f391f6..98f07954 100644 --- a/new-log-viewer/src/components/CentralContainer/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx @@ -11,8 +11,8 @@ import { import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; -import {TAB_NAME} from "../../../typings/tab"; -import SettingsModal from "../../modals/SettingsModal"; +import {TAB_NAME} from "../../../../typings/tab"; +import SettingsModal from "../../../modals/SettingsModal"; import FileInfoTab from "./FileInfoTab"; import TooltipTab from "./TooltipTab"; diff --git a/new-log-viewer/src/components/CentralContainer/ResizeHandle.css b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/ResizeHandle.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css diff --git a/new-log-viewer/src/components/CentralContainer/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/ResizeHandle.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar.css b/new-log-viewer/src/components/CentralContainer/Sidebar/index.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/index.css diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx similarity index 97% rename from new-log-viewer/src/components/CentralContainer/Sidebar.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx index ea8bc194..65ee29dc 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx @@ -4,11 +4,11 @@ import { useState, } from "react"; -import {TAB_NAME} from "../../typings/tab"; +import {TAB_NAME} from "../../../typings/tab"; import PanelTabs from "./PanelTabs"; import ResizeHandle from "./ResizeHandle"; -import "./Sidebar.css"; +import "./index.css"; const PANEL_DEFAULT_WIDTH_IN_PIXEL = 360; From 591a55b968b12bbb55cb56e782e45e3fd945f3b6 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 15:09:33 -0400 Subject: [PATCH 60/83] Rename FileInfoTab to FileInfoTabPanel. --- .../PanelTabs/{FileInfoTab.tsx => FileInfoTabPanel.tsx} | 6 +++--- .../components/CentralContainer/Sidebar/PanelTabs/index.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) rename new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/{FileInfoTab.tsx => FileInfoTabPanel.tsx} (90%) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTab.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTabPanel.tsx similarity index 90% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTab.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTabPanel.tsx index 8cd5eaa0..67554a06 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTab.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTabPanel.tsx @@ -19,11 +19,11 @@ import CustomTabPanel from "./CustomTabPanel"; /** - * Display the file name and original size of the selected file. + * Displays a panel containing the file name and original size of the selected file. * * @return */ -const FileInfoTab = () => { +const FileInfoTabPanel = () => { const {fileName, originalFileSizeInBytes} = useContext(StateContext); return ( @@ -49,4 +49,4 @@ const FileInfoTab = () => { ); }; -export default FileInfoTab; +export default FileInfoTabPanel; diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx index 98f07954..bd6cbf1b 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx @@ -13,7 +13,7 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; import {TAB_NAME} from "../../../../typings/tab"; import SettingsModal from "../../../modals/SettingsModal"; -import FileInfoTab from "./FileInfoTab"; +import FileInfoTabPanel from "./FileInfoTabPanel"; import TooltipTab from "./TooltipTab"; import "./index.css"; @@ -80,7 +80,7 @@ const PanelTabs = forwardRef(( tabName={TAB_NAME.SETTINGS} onTabButtonClick={handleTabButtonClick}/> - + Date: Fri, 27 Sep 2024 15:15:04 -0400 Subject: [PATCH 61/83] Rename PanelTabs to SidebarTabs. --- .../Sidebar/{PanelTabs => SidebarTabs}/CustomListItem.tsx | 0 .../Sidebar/{PanelTabs => SidebarTabs}/CustomTabPanel.css | 0 .../Sidebar/{PanelTabs => SidebarTabs}/CustomTabPanel.tsx | 0 .../{PanelTabs => SidebarTabs}/FileInfoTabPanel.tsx | 0 .../Sidebar/{PanelTabs => SidebarTabs}/TooltipTab.css | 0 .../Sidebar/{PanelTabs => SidebarTabs}/TooltipTab.tsx | 0 .../Sidebar/{PanelTabs => SidebarTabs}/index.css | 0 .../Sidebar/{PanelTabs => SidebarTabs}/index.tsx | 8 ++++---- .../src/components/CentralContainer/Sidebar/index.tsx | 4 ++-- 9 files changed, 6 insertions(+), 6 deletions(-) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/CustomListItem.tsx (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/CustomTabPanel.css (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/CustomTabPanel.tsx (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/FileInfoTabPanel.tsx (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/TooltipTab.css (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/TooltipTab.tsx (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/index.css (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/{PanelTabs => SidebarTabs}/index.tsx (93%) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomListItem.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomListItem.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.css b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.css diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/CustomTabPanel.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomTabPanel.tsx diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/FileInfoTabPanel.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.css b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.css diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.tsx similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/TooltipTab.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.tsx diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.css b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.css diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx similarity index 93% rename from new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index bd6cbf1b..5c887a9c 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/PanelTabs/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -19,7 +19,7 @@ import TooltipTab from "./TooltipTab"; import "./index.css"; -interface PanelTabsProps { +interface SidebarTabsProps { activeTabName: TAB_NAME, onActiveTabNameChange: (newValue: TAB_NAME) => void, } @@ -30,7 +30,7 @@ interface PanelTabsProps { * @param tabListRef Reference object used to access the TabList DOM element. * @return */ -const PanelTabs = forwardRef(( +const SidebarTabs = forwardRef(( { activeTabName, onActiveTabNameChange, @@ -89,5 +89,5 @@ const PanelTabs = forwardRef(( ); }); -PanelTabs.displayName = "PanelTabs"; -export default PanelTabs; +SidebarTabs.displayName = "SidebarTabs"; +export default SidebarTabs; diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx index 65ee29dc..baaff947 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx @@ -5,8 +5,8 @@ import { } from "react"; import {TAB_NAME} from "../../../typings/tab"; -import PanelTabs from "./PanelTabs"; import ResizeHandle from "./ResizeHandle"; +import SidebarTabs from "./SidebarTabs"; import "./index.css"; @@ -97,7 +97,7 @@ const Sidebar = () => { return (
- From c3165a10c309dfcec4d08d22db0246ed6b3b8c0f Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 15:16:03 -0400 Subject: [PATCH 62/83] Add docs for Sidebar. --- .../src/components/CentralContainer/Sidebar/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx index baaff947..f6f8ac6f 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx @@ -36,7 +36,10 @@ const setPanelWidth = (newValue: number) => { /** + * Renders a sidebar component that displays tabbed panels and a resize handle. + * The active tab can be changed and the sidebar can be resized by dragging the handle. * + * @return */ const Sidebar = () => { const [activeTabName, setActiveTabName] = useState(TAB_NAME.FILE_INFO); From 561d7ed9fa27415597601adb8e6f2e16f9b22b92 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 15:22:51 -0400 Subject: [PATCH 63/83] Refactor SidebarTabs to use a constant for tab info. --- .../Sidebar/SidebarTabs/index.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index 5c887a9c..a12ff2e4 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -8,6 +8,7 @@ import { Tabs, } from "@mui/joy"; +import {SvgIconComponent} from "@mui/icons-material"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; @@ -19,6 +20,16 @@ import TooltipTab from "./TooltipTab"; import "./index.css"; +/** + * Lists information for each tab. + */ +const TABS_INFO_LIST: Readonly> = Object.freeze([ + {tabName: TAB_NAME.FILE_INFO, Icon: InfoOutlinedIcon}, +]); + interface SidebarTabsProps { activeTabName: TAB_NAME, onActiveTabNameChange: (newValue: TAB_NAME) => void, @@ -65,9 +76,7 @@ const SidebarTabs = forwardRef(( ref={tabListRef} size={"lg"} > - {[ - {tabName: TAB_NAME.FILE_INFO, Icon: InfoOutlinedIcon}, - ].map(({tabName, Icon}) => ( + {TABS_INFO_LIST.map(({tabName, Icon}) => ( Date: Fri, 27 Sep 2024 15:24:41 -0400 Subject: [PATCH 64/83] Add docs to explain why "sidebar-tab-list-spacing" is needed. --- .../components/CentralContainer/Sidebar/SidebarTabs/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index a12ff2e4..4f24c3e9 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -83,7 +83,10 @@ const SidebarTabs = forwardRef(( tabName={tabName} onTabButtonClick={handleTabButtonClick}/> ))} + + {/* Forces the settings tab to bottom of sidebar. */}
+ Date: Fri, 27 Sep 2024 20:35:20 -0400 Subject: [PATCH 65/83] Split the useEffect hook in ResizeHandle into two. --- .../CentralContainer/Sidebar/ResizeHandle.tsx | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx index 2be0fa2e..592d9b38 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx @@ -38,34 +38,40 @@ const ResizeHandle = ({ setIsMouseDown(true); }; + const handleMouseMove = useCallback((ev: MouseEvent) => { + ev.preventDefault(); + onResize(ev.clientX); + }, [onResize]); + const handleMouseUp = useCallback((ev: MouseEvent) => { ev.preventDefault(); setIsMouseDown(false); onHandleRelease(); }, [onHandleRelease]); + // Register the event listener for mouse up. useEffect(() => { - if (false === isMouseDown) { - return () => null; - } - window.addEventListener("mouseup", handleMouseUp); - const handleMouseMove = (ev: MouseEvent) => { - ev.preventDefault(); - onResize(ev.clientX); + return () => { + window.removeEventListener("mouseup", handleMouseUp); }; + }, [handleMouseUp]); + + // On mouse down, register the event listener for mouse move. + useEffect(() => { + if (false === isMouseDown) { + return () => null; + } window.addEventListener("mousemove", handleMouseMove); return () => { window.removeEventListener("mousemove", handleMouseMove); - window.removeEventListener("mouseup", handleMouseUp); }; }, [ - handleMouseUp, + handleMouseMove, isMouseDown, - onResize, ]); return ( From 7abfdf996a226b8c8610a073eb42e8cb34b2a8d3 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 27 Sep 2024 20:53:59 -0400 Subject: [PATCH 66/83] Avoid unnecessary dynamic change of the --ylv-panel-resize-handle-width CSS property on tab close. --- .../CentralContainer/Sidebar/index.tsx | 21 ++++++------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx index f6f8ac6f..2c26a578 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx @@ -46,11 +46,6 @@ const Sidebar = () => { const tabListRef = useRef(null); - const deactivateTabAndHideResizeHandle = useCallback(() => { - setActiveTabName(TAB_NAME.NONE); - document.body.style.setProperty("--ylv-panel-resize-handle-width", "0px"); - }, []); - const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => { if (null === tabListRef.current) { console.error("Unexpected null tabListRef.current"); @@ -59,24 +54,20 @@ const Sidebar = () => { } if (activeTabName === tabName) { - deactivateTabAndHideResizeHandle(); + setActiveTabName(TAB_NAME.NONE); setPanelWidth(tabListRef.current.clientWidth); return; } setActiveTabName(tabName); setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); - document.body.style.setProperty("--ylv-panel-resize-handle-width", "3px"); - }, [ - activeTabName, - deactivateTabAndHideResizeHandle, - ]); + }, [activeTabName]); const handleResizeHandleRelease = useCallback(() => { if (getPanelWidth() === tabListRef.current?.clientWidth) { - deactivateTabAndHideResizeHandle(); + setActiveTabName(TAB_NAME.NONE); } - }, [deactivateTabAndHideResizeHandle]); + }, []); const handleResize = useCallback((resizeHandlePosition: number) => { if (null === tabListRef.current) { @@ -104,9 +95,9 @@ const Sidebar = () => { activeTabName={activeTabName} ref={tabListRef} onActiveTabNameChange={handleActiveTabNameChange}/> - + onResize={handleResize}/>}
); }; From 030036eff4c5d38a1bd19eb95c70bb3d52c51b8c Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 29 Sep 2024 09:27:58 -0400 Subject: [PATCH 67/83] Change the resize handle width when not hovered. --- .../components/CentralContainer/Sidebar/ResizeHandle.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css index 3f2fb1ef..c0df2eb4 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css @@ -3,14 +3,20 @@ z-index: var(--ylv-resize-handle-z-index); + box-sizing: border-box; width: var(--ylv-panel-resize-handle-width); height: 100%; /* stylelint-disable-next-line custom-property-pattern */ - background-color: var(--joy-palette-neutral-outlinedBorder, #cdd7e1); + background-color: var(--joy-palette-background-surface, #fbfcfe); + /* stylelint-disable-next-line custom-property-pattern */ + border-right: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1); } .resize-handle:hover { + box-sizing: initial; + /* stylelint-disable-next-line custom-property-pattern */ background-color: var(--joy-palette-primary-solidHoverBg, #0258a8); + border-right: initial; } From 03e3de199262575dfe50143683326955835be229 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 29 Sep 2024 09:33:00 -0400 Subject: [PATCH 68/83] Add visual feedback on Sidebar resize handle mouse down. --- .../src/components/CentralContainer/Sidebar/ResizeHandle.css | 1 + .../src/components/CentralContainer/Sidebar/ResizeHandle.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css index c0df2eb4..522a8ce7 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.css @@ -13,6 +13,7 @@ border-right: 1px solid var(--joy-palette-neutral-outlinedBorder, #cdd7e1); } +.resize-handle-holding, .resize-handle:hover { box-sizing: initial; diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx index 592d9b38..48198d56 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx @@ -76,7 +76,9 @@ const ResizeHandle = ({ return (
); }; From 6f4613e0ed8ae2adc8aa155babecaaec8c7ecd8e Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 29 Sep 2024 09:33:26 -0400 Subject: [PATCH 69/83] Increase panel resize handle width. --- new-log-viewer/src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/index.css b/new-log-viewer/src/index.css index e5df42d8..ecf9a72c 100644 --- a/new-log-viewer/src/index.css +++ b/new-log-viewer/src/index.css @@ -18,7 +18,7 @@ html { /* size globals */ --ylv-status-bar-height: 32px; --ylv-menu-bar-height: 32px; - --ylv-panel-resize-handle-width: 3px; + --ylv-panel-resize-handle-width: 4px; /* z-index globals * From 71466197bb5a855f181f70744539236b7a2d6977 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 29 Sep 2024 10:00:57 -0400 Subject: [PATCH 70/83] Rename `TooltipTab` to `TabButton`. --- .../Sidebar/SidebarTabs/{TooltipTab.css => TabButton.css} | 0 .../Sidebar/SidebarTabs/{TooltipTab.tsx => TabButton.tsx} | 8 ++++---- .../CentralContainer/Sidebar/SidebarTabs/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) rename new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/{TooltipTab.css => TabButton.css} (100%) rename new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/{TooltipTab.tsx => TabButton.tsx} (87%) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.css b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.css similarity index 100% rename from new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.css rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.css diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx similarity index 87% rename from new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.tsx rename to new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx index c9f42d37..846860f2 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TooltipTab.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx @@ -10,10 +10,10 @@ import { TAB_NAME, } from "../../../../typings/tab"; -import "./TooltipTab.css"; +import "./TabButton.css"; -interface TooltipTabProps { +interface TabButtonProps { tabName: TAB_NAME, Icon: SvgIconComponent, onTabButtonClick: (tabName: TAB_NAME) => void @@ -28,7 +28,7 @@ interface TooltipTabProps { * @param props.onTabButtonClick * @return */ -const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => { +const TabButton = ({tabName, Icon, onTabButtonClick}: TabButtonProps) => { const handleClick = () => { onTabButtonClick(tabName); }; @@ -54,4 +54,4 @@ const TooltipTab = ({tabName, Icon, onTabButtonClick}: TooltipTabProps) => { ); }; -export default TooltipTab; +export default TabButton; diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx index 4f24c3e9..c8a262ed 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx @@ -15,7 +15,7 @@ import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; import {TAB_NAME} from "../../../../typings/tab"; import SettingsModal from "../../../modals/SettingsModal"; import FileInfoTabPanel from "./FileInfoTabPanel"; -import TooltipTab from "./TooltipTab"; +import TabButton from "./TabButton"; import "./index.css"; @@ -77,7 +77,7 @@ const SidebarTabs = forwardRef(( size={"lg"} > {TABS_INFO_LIST.map(({tabName, Icon}) => ( - (( {/* Forces the settings tab to bottom of sidebar. */}
- From f7c38d70b17132f61ffcfa069ce2185cf9e2247f Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 3 Oct 2024 14:02:10 +0800 Subject: [PATCH 71/83] Introduce a constant for file unloaded check in FileInfoTabPanel. --- .../CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx index 67554a06..823e3e9c 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx @@ -25,13 +25,14 @@ import CustomTabPanel from "./CustomTabPanel"; */ const FileInfoTabPanel = () => { const {fileName, originalFileSizeInBytes} = useContext(StateContext); + const isFileUnloaded = 0 === fileName.length; return ( - {0 === fileName.length ? + {isFileUnloaded ? "No file is open." : Date: Thu, 3 Oct 2024 14:07:12 +0800 Subject: [PATCH 72/83] Move DropFileContainer and Editor into CentralContainer directly. --- .../src/components/CentralContainer/index.css | 2 +- .../src/components/CentralContainer/index.tsx | 21 ++++++++----------- new-log-viewer/src/components/Layout.tsx | 8 +------ 3 files changed, 11 insertions(+), 20 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/index.css b/new-log-viewer/src/components/CentralContainer/index.css index b4c9192a..503a9594 100644 --- a/new-log-viewer/src/components/CentralContainer/index.css +++ b/new-log-viewer/src/components/CentralContainer/index.css @@ -8,6 +8,6 @@ width: 100vw; } -.central-container-children-container { +.central-container-children { width: calc(100vw - var(--ylv-panel-width)); } diff --git a/new-log-viewer/src/components/CentralContainer/index.tsx b/new-log-viewer/src/components/CentralContainer/index.tsx index 1e65da63..74f84b2f 100644 --- a/new-log-viewer/src/components/CentralContainer/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/index.tsx @@ -1,27 +1,24 @@ -import React from "react"; - +import DropFileContainer from "../DropFileContainer"; +import Editor from "../Editor"; import Sidebar from "./Sidebar"; import "./index.css"; -interface CentralContainerProps { - children: React.ReactNode, -} - /** - * Locates in the center of the and wraps a children with a sidebar component on its left. + * Locates in the center of the and wraps the -contained + * with a sidebar component on its left. * - * @param props - * @param props.children * @return */ -const CentralContainer = ({children}: CentralContainerProps) => { +const CentralContainer = () => { return (
-
- {children} +
+ + +
); diff --git a/new-log-viewer/src/components/Layout.tsx b/new-log-viewer/src/components/Layout.tsx index c4963d50..66765ffa 100644 --- a/new-log-viewer/src/components/Layout.tsx +++ b/new-log-viewer/src/components/Layout.tsx @@ -3,8 +3,6 @@ import {CssVarsProvider} from "@mui/joy/styles"; import {CONFIG_KEY} from "../typings/config"; import {CONFIG_DEFAULT} from "../utils/config"; import CentralContainer from "./CentralContainer"; -import DropFileContainer from "./DropFileContainer"; -import Editor from "./Editor"; import MenuBar from "./MenuBar"; import StatusBar from "./StatusBar"; import APP_THEME from "./theme"; @@ -23,11 +21,7 @@ const Layout = () => { theme={APP_THEME} > - - - - - + ); From b3d3e03c223351d1d82f19a8d94ca0d4f884ed52 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 3 Oct 2024 14:14:08 +0800 Subject: [PATCH 73/83] Simplify CentralContainer component documentation - apply code review suggestion. --- new-log-viewer/src/components/CentralContainer/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/index.tsx b/new-log-viewer/src/components/CentralContainer/index.tsx index 74f84b2f..e715dd97 100644 --- a/new-log-viewer/src/components/CentralContainer/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/index.tsx @@ -6,8 +6,7 @@ import "./index.css"; /** - * Locates in the center of the and wraps the -contained - * with a sidebar component on its left. + * Located in the center of the . * * @return */ From 7e1000d0a448b7fecd31ce76185d71bebc36f6b0 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 3 Oct 2024 14:17:29 +0800 Subject: [PATCH 74/83] Cache formattedOriginalSize with `useMemo`. --- .../Sidebar/SidebarTabs/FileInfoTabPanel.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx index 823e3e9c..d46ffbb1 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx @@ -1,4 +1,7 @@ -import {useContext} from "react"; +import { + useContext, + useMemo, +} from "react"; import { Divider, @@ -25,7 +28,12 @@ import CustomTabPanel from "./CustomTabPanel"; */ const FileInfoTabPanel = () => { const {fileName, originalFileSizeInBytes} = useContext(StateContext); + const isFileUnloaded = 0 === fileName.length; + const formattedOriginalSize = useMemo( + () => formatSizeInBytes(originalFileSizeInBytes), + [originalFileSizeInBytes] + ); return ( { title={"Name"}/> } title={"Original Size"}/> } From d36a73b4e0b1cbedf9f1a8e88d38583bd878a1c6 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Sun, 6 Oct 2024 04:27:01 +0800 Subject: [PATCH 75/83] Reorder params in docs - Apply suggestions from code review Co-authored-by: davemarco <83603688+davemarco@users.noreply.github.com> --- .../CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx index 85b03a07..30dd7444 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/CustomListItem.tsx @@ -24,8 +24,8 @@ interface CustomListItemProps { * @param props * @param props.content * @param props.icon - * @param props.title * @param props.slotProps + * @param props.title * @return */ const CustomListItem = ({content, icon, slotProps, title}: CustomListItemProps) => ( From cae668b2f57afdb68f0d4397258e6891f53f3b21 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 11 Oct 2024 03:00:20 +0800 Subject: [PATCH 76/83] Remove redundant container "central-container-children" and CSS for CentralContainer layout. --- new-log-viewer/src/components/CentralContainer/index.css | 6 +----- new-log-viewer/src/components/CentralContainer/index.tsx | 8 +++----- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/index.css b/new-log-viewer/src/components/CentralContainer/index.css index 503a9594..7252d1dc 100644 --- a/new-log-viewer/src/components/CentralContainer/index.css +++ b/new-log-viewer/src/components/CentralContainer/index.css @@ -4,10 +4,6 @@ .central-container { display: grid; - grid-template-columns: var(--ylv-panel-width) 1fr; + grid-template-columns: var(--ylv-panel-width) calc(100vw - var(--ylv-panel-width)); width: 100vw; } - -.central-container-children { - width: calc(100vw - var(--ylv-panel-width)); -} diff --git a/new-log-viewer/src/components/CentralContainer/index.tsx b/new-log-viewer/src/components/CentralContainer/index.tsx index e715dd97..810aa489 100644 --- a/new-log-viewer/src/components/CentralContainer/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/index.tsx @@ -14,11 +14,9 @@ const CentralContainer = () => { return (
-
- - - -
+ + +
); }; From 530b352d125ce735c2532a89988bf2b298cd2305 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 11 Oct 2024 03:34:10 +0800 Subject: [PATCH 77/83] Increase eslint rule "max-lines" limit to 500. --- new-log-viewer/src/contexts/StateContextProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index 598efb37..1bf52dcc 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -1,4 +1,4 @@ -/* eslint max-lines: ["error", 450] */ +/* eslint max-lines: ["error", 500] */ import React, { createContext, useCallback, From 02a9eb06dd030b200c55543ce38289e2c67b1464 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Fri, 11 Oct 2024 04:48:21 +0800 Subject: [PATCH 78/83] Avoid leaving mouseup event listener active even when the resize handle is not being held to prevent `onHandleRelease` being called unintentionally. --- .../CentralContainer/Sidebar/ResizeHandle.tsx | 22 +++++++------------ 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx index 48198d56..c170f2b3 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/ResizeHandle.tsx @@ -49,28 +49,22 @@ const ResizeHandle = ({ onHandleRelease(); }, [onHandleRelease]); - // Register the event listener for mouse up. + // On `isMouseDown` change, add / remove event listeners. useEffect(() => { - window.addEventListener("mouseup", handleMouseUp); - - return () => { - window.removeEventListener("mouseup", handleMouseUp); - }; - }, [handleMouseUp]); - - // On mouse down, register the event listener for mouse move. - useEffect(() => { - if (false === isMouseDown) { - return () => null; + if (isMouseDown) { + window.addEventListener("mousemove", handleMouseMove); + window.addEventListener("mouseup", handleMouseUp); } - window.addEventListener("mousemove", handleMouseMove); - return () => { + // Always clean up the event listeners before the hook is re-run due to `isMouseDown` + // changes / when the component is unmounted. window.removeEventListener("mousemove", handleMouseMove); + window.removeEventListener("mouseup", handleMouseUp); }; }, [ handleMouseMove, + handleMouseUp, isMouseDown, ]); From 6ad338ed7113ac0a83fe6c486a38ee04d2677657 Mon Sep 17 00:00:00 2001 From: davemarco <83603688+davemarco@users.noreply.github.com> Date: Thu, 10 Oct 2024 23:55:44 -0400 Subject: [PATCH 79/83] Apply suggestions from code review Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com> --- .../CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx index d46ffbb1..36044080 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx @@ -22,7 +22,7 @@ import CustomTabPanel from "./CustomTabPanel"; /** - * Displays a panel containing the file name and original size of the selected file. + * Displays a panel containing the file name and on-disk size of the selected file. * * @return */ @@ -31,7 +31,7 @@ const FileInfoTabPanel = () => { const isFileUnloaded = 0 === fileName.length; const formattedOriginalSize = useMemo( - () => formatSizeInBytes(originalFileSizeInBytes), + () => formatSizeInBytes(originalFileSizeInBytes, false), [originalFileSizeInBytes] ); From 22f97aae33308ddc4ab3ad6115b145a494d2cd7d Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Fri, 11 Oct 2024 04:03:15 +0000 Subject: [PATCH 80/83] rename onDiskFileSize --- .../Sidebar/SidebarTabs/FileInfoTabPanel.tsx | 6 +++--- .../src/contexts/StateContextProvider.tsx | 14 +++++++------- .../src/services/LogFileManager/index.ts | 12 ++++++------ new-log-viewer/src/services/MainWorker.ts | 2 +- new-log-viewer/src/typings/worker.ts | 2 +- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx index 36044080..9caaea52 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx @@ -27,12 +27,12 @@ import CustomTabPanel from "./CustomTabPanel"; * @return */ const FileInfoTabPanel = () => { - const {fileName, originalFileSizeInBytes} = useContext(StateContext); + const {fileName, onDiskFileSizeInBytes} = useContext(StateContext); const isFileUnloaded = 0 === fileName.length; const formattedOriginalSize = useMemo( - () => formatSizeInBytes(originalFileSizeInBytes, false), - [originalFileSizeInBytes] + () => formatSizeInBytes(onDiskFileSizeInBytes, false), + [onDiskFileSizeInBytes] ); return ( diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index f9ab46b0..99004574 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -53,7 +53,7 @@ interface StateContextType { logData: string, numEvents: number, numPages: number, - originalFileSizeInBytes: number, + onDiskFileSizeInBytes: number, pageNum: number, exportLogs: () => void, @@ -73,7 +73,7 @@ const STATE_DEFAULT: Readonly = Object.freeze({ logData: "No file is open.", numEvents: 0, numPages: 0, - originalFileSizeInBytes: 0, + onDiskFileSizeInBytes: 0, pageNum: 0, exportLogs: () => null, @@ -230,8 +230,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { const [logData, setLogData] = useState(STATE_DEFAULT.logData); const [numEvents, setNumEvents] = useState(STATE_DEFAULT.numEvents); const [numPages, setNumPages] = useState(STATE_DEFAULT.numPages); - const [originalFileSizeInBytes, setOriginalFileSizeInBytes] = - useState(STATE_DEFAULT.originalFileSizeInBytes); + const [onDiskFileSizeInBytes, setonDiskFileSizeInBytes] = + useState(STATE_DEFAULT.onDiskFileSizeInBytes); const [pageNum, setPageNum] = useState(STATE_DEFAULT.pageNum); const beginLineNumToLogEventNumRef = useRef(STATE_DEFAULT.beginLineNumToLogEventNum); @@ -258,7 +258,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { case WORKER_RESP_CODE.LOG_FILE_INFO: setFileName(args.fileName); setNumEvents(args.numEvents); - setOriginalFileSizeInBytes(args.originalFileSizeInBytes); + setonDiskFileSizeInBytes(args.onDiskFileSizeInBytes); break; case WORKER_RESP_CODE.NOTIFICATION: // eslint-disable-next-line no-warning-comments @@ -329,7 +329,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { setFileName("Loading..."); setLogData("Loading..."); - setOriginalFileSizeInBytes(STATE_DEFAULT.originalFileSizeInBytes); + setonDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes); setExportProgress(STATE_DEFAULT.exportProgress); }, [ handleMainWorkerResp, @@ -435,7 +435,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { logData: logData, numEvents: numEvents, numPages: numPages, - originalFileSizeInBytes: originalFileSizeInBytes, + onDiskFileSizeInBytes: onDiskFileSizeInBytes, pageNum: pageNum, exportLogs: exportLogs, diff --git a/new-log-viewer/src/services/LogFileManager/index.ts b/new-log-viewer/src/services/LogFileManager/index.ts index 0f3f29df..d6620d14 100644 --- a/new-log-viewer/src/services/LogFileManager/index.ts +++ b/new-log-viewer/src/services/LogFileManager/index.ts @@ -35,7 +35,7 @@ class LogFileManager { readonly #fileName: string; - readonly #originalFileSizeInBytes: number; + readonly #onDiskFileSizeInBytes: number; #decoder: Decoder; @@ -47,17 +47,17 @@ class LogFileManager { * * @param decoder * @param fileName - * @param originalFileSizeInBytes + * @param onDiskFileSizeInBytes * @param pageSize Page size for setting up pagination. */ constructor ( decoder: Decoder, fileName: string, - originalFileSizeInBytes: number, + onDiskFileSizeInBytes: number, pageSize: number, ) { this.#fileName = fileName; - this.#originalFileSizeInBytes = originalFileSizeInBytes; + this.#onDiskFileSizeInBytes = onDiskFileSizeInBytes; this.#pageSize = pageSize; this.#decoder = decoder; @@ -79,8 +79,8 @@ class LogFileManager { return this.#numEvents; } - get originalFileSizeInBytes () { - return this.#originalFileSizeInBytes; + get onDiskFileSizeInBytes () { + return this.#onDiskFileSizeInBytes; } /** diff --git a/new-log-viewer/src/services/MainWorker.ts b/new-log-viewer/src/services/MainWorker.ts index 01a47700..751d4cfc 100644 --- a/new-log-viewer/src/services/MainWorker.ts +++ b/new-log-viewer/src/services/MainWorker.ts @@ -69,7 +69,7 @@ onmessage = async (ev: MessageEvent) => { postResp(WORKER_RESP_CODE.LOG_FILE_INFO, { fileName: LOG_FILE_MANAGER.fileName, numEvents: LOG_FILE_MANAGER.numEvents, - originalFileSizeInBytes: LOG_FILE_MANAGER.originalFileSizeInBytes, + onDiskFileSizeInBytes: LOG_FILE_MANAGER.onDiskFileSizeInBytes, }); postResp( WORKER_RESP_CODE.PAGE_DATA, diff --git a/new-log-viewer/src/typings/worker.ts b/new-log-viewer/src/typings/worker.ts index 8ee9d1ab..9ceeea4c 100644 --- a/new-log-viewer/src/typings/worker.ts +++ b/new-log-viewer/src/typings/worker.ts @@ -105,7 +105,7 @@ type WorkerRespMap = { [WORKER_RESP_CODE.LOG_FILE_INFO]: { fileName: string, numEvents: number, - originalFileSizeInBytes: number, + onDiskFileSizeInBytes: number, }, [WORKER_RESP_CODE.PAGE_DATA]: { beginLineNumToLogEventNum: BeginLineNumToLogEventNumMap, From 0b66e001022023378412167339fbbac6dae968c4 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Fri, 11 Oct 2024 04:06:36 +0000 Subject: [PATCH 81/83] fix pixels --- .../src/components/CentralContainer/Sidebar/index.tsx | 8 ++++---- new-log-viewer/src/services/LogFileManager/index.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx index 2c26a578..3241f591 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx @@ -11,8 +11,8 @@ import SidebarTabs from "./SidebarTabs"; import "./index.css"; -const PANEL_DEFAULT_WIDTH_IN_PIXEL = 360; -const PANEL_CLIP_THRESHOLD_IN_PIXEL = 250; +const PANEL_DEFAULT_WIDTH_IN_PIXELS = 360; +const PANEL_CLIP_THRESHOLD_IN_PIXELS = 250; const PANEL_MAX_WIDTH_TO_WINDOW_WIDTH_RATIO = 0.8; /** @@ -60,7 +60,7 @@ const Sidebar = () => { return; } setActiveTabName(tabName); - setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXEL); + setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXELS); }, [activeTabName]); const handleResizeHandleRelease = useCallback(() => { @@ -75,7 +75,7 @@ const Sidebar = () => { return; } - if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXEL > resizeHandlePosition) { + if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXELS > resizeHandlePosition) { // If the resize handle is positioned to the right of the 's right edge // with a clipping threshold accounted, close the panel. setPanelWidth(tabListRef.current.clientWidth); diff --git a/new-log-viewer/src/services/LogFileManager/index.ts b/new-log-viewer/src/services/LogFileManager/index.ts index d6620d14..b0012b27 100644 --- a/new-log-viewer/src/services/LogFileManager/index.ts +++ b/new-log-viewer/src/services/LogFileManager/index.ts @@ -75,14 +75,14 @@ class LogFileManager { return this.#fileName; } - get numEvents () { - return this.#numEvents; - } - get onDiskFileSizeInBytes () { return this.#onDiskFileSizeInBytes; } + get numEvents () { + return this.#numEvents; + } + /** * Creates a new LogFileManager. * From efe3a3d768209da6022d955301fa2544d2efc9a5 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Fri, 11 Oct 2024 04:09:14 +0000 Subject: [PATCH 82/83] fix lint --- .../src/components/CentralContainer/Sidebar/index.tsx | 5 ++++- new-log-viewer/src/contexts/StateContextProvider.tsx | 6 +++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx index 3241f591..f6a96d32 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx @@ -75,7 +75,10 @@ const Sidebar = () => { return; } - if (tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXELS > resizeHandlePosition) { + if ( + tabListRef.current.clientWidth + PANEL_CLIP_THRESHOLD_IN_PIXELS > + resizeHandlePosition + ) { // If the resize handle is positioned to the right of the 's right edge // with a clipping threshold accounted, close the panel. setPanelWidth(tabListRef.current.clientWidth); diff --git a/new-log-viewer/src/contexts/StateContextProvider.tsx b/new-log-viewer/src/contexts/StateContextProvider.tsx index 99004574..dec854c2 100644 --- a/new-log-viewer/src/contexts/StateContextProvider.tsx +++ b/new-log-viewer/src/contexts/StateContextProvider.tsx @@ -230,7 +230,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { const [logData, setLogData] = useState(STATE_DEFAULT.logData); const [numEvents, setNumEvents] = useState(STATE_DEFAULT.numEvents); const [numPages, setNumPages] = useState(STATE_DEFAULT.numPages); - const [onDiskFileSizeInBytes, setonDiskFileSizeInBytes] = + const [onDiskFileSizeInBytes, setOnDiskFileSizeInBytes] = useState(STATE_DEFAULT.onDiskFileSizeInBytes); const [pageNum, setPageNum] = useState(STATE_DEFAULT.pageNum); const beginLineNumToLogEventNumRef = @@ -258,7 +258,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { case WORKER_RESP_CODE.LOG_FILE_INFO: setFileName(args.fileName); setNumEvents(args.numEvents); - setonDiskFileSizeInBytes(args.onDiskFileSizeInBytes); + setOnDiskFileSizeInBytes(args.onDiskFileSizeInBytes); break; case WORKER_RESP_CODE.NOTIFICATION: // eslint-disable-next-line no-warning-comments @@ -329,7 +329,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => { setFileName("Loading..."); setLogData("Loading..."); - setonDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes); + setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes); setExportProgress(STATE_DEFAULT.exportProgress); }, [ handleMainWorkerResp, From 9d9901ed234cf4cabba307528192d721f7a5d3a4 Mon Sep 17 00:00:00 2001 From: Dave Marco Date: Fri, 11 Oct 2024 04:18:49 +0000 Subject: [PATCH 83/83] fix original in more places --- .../Sidebar/SidebarTabs/FileInfoTabPanel.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx index 9caaea52..7b487f3d 100644 --- a/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx +++ b/new-log-viewer/src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx @@ -30,7 +30,7 @@ const FileInfoTabPanel = () => { const {fileName, onDiskFileSizeInBytes} = useContext(StateContext); const isFileUnloaded = 0 === fileName.length; - const formattedOriginalSize = useMemo( + const formattedOnDiskSize = useMemo( () => formatSizeInBytes(onDiskFileSizeInBytes, false), [onDiskFileSizeInBytes] ); @@ -50,9 +50,9 @@ const FileInfoTabPanel = () => { title={"Name"}/> } - title={"Original Size"}/> + title={"On-disk Size"}/> } );