Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(filter): Clear existing log level filter when opening a new file (fixes #133). #141

Merged
merged 9 commits into from
Dec 3, 2024
Merged

fix(filter): Clear existing log level filter when opening a new file (fixes #133). #141

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4b39b5a
fix sticky log level
davemarco Nov 29, 2024
0b7439f
fix lint
davemarco Nov 29, 2024
c35dd5a
small change
davemarco Nov 29, 2024
ebdfe5e
small change
davemarco Nov 29, 2024
90fd230
small change
davemarco Nov 29, 2024
db8eecc
junhao review
davemarco Dec 2, 2024
22848ca
fix lint
davemarco Dec 2, 2024
b7373cc
Update src/components/StatusBar/LogLevelSelect/index.tsx
davemarco Dec 3, 2024
bf170f0
Merge branch 'main' into fixLog
davemarco Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions src/components/StatusBar/LogLevelSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, {
useCallback,
useContext,
useEffect,
useState,
} from "react";

import {SelectValue} from "@mui/base/useSelect";
Expand Down Expand Up @@ -151,8 +149,7 @@ const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => {
* @return
*/
const LogLevelSelect = () => {
const {uiState, setLogLevelFilter} = useContext(StateContext);
const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
const {uiState, filterLogs, selectedLogLevels, setSelectedLogLevels} = useContext(StateContext);
const disabled = isDisabled(uiState, UI_ELEMENT.LOG_LEVEL_FILTER);

const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
Expand All @@ -169,6 +166,18 @@ const LogLevelSelect = () => {
</Box>
);

const updateFilter = useCallback((logLevels: LOG_LEVEL[]) => {
setSelectedLogLevels(logLevels);

// Filter logs in backend worker.
filterLogs((0 === logLevels.length ?
null :
logLevels));
}, [
filterLogs,
setSelectedLogLevels,
]);

const handleCheckboxClick = useCallback((ev: React.MouseEvent<HTMLInputElement>) => {
ev.preventDefault();
ev.stopPropagation();
Expand All @@ -184,8 +193,11 @@ const LogLevelSelect = () => {
value,
];
}
setSelectedLogLevels(newSelectedLogLevels.sort((a, b) => a - b));
}, [selectedLogLevels]);
updateFilter(newSelectedLogLevels.sort((a, b) => a - b));
}, [
selectedLogLevels,
updateFilter,
]);
Comment on lines +201 to +205
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Sorting log levels is unnecessary and can be removed

The log level filtering is implemented through a worker interface that simply accepts an array of log levels as a filter, with no indication that order matters. The filterLogs function in StateContextProvider passes the log levels directly to the worker without any ordering requirements.

  • Remove the .sort((a, b) => a - b) from line 202 in src/components/StatusBar/LogLevelSelect/index.tsx
  • The order of log levels in the filter array doesn't affect the filtering functionality
🔗 Analysis chain

Verify the necessity of sorting log levels.

The implementation looks correct, but let's verify if sorting the log levels is necessary for the backend processing.

Also applies to: 217-218, 221-221

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for log level array usage in backend processing
rg -A 5 "logLevels?.sort" 
# Search for order-dependent log level processing
ast-grep --pattern 'function $_(logLevels: $_) {
  $$$
  for ($_ of logLevels) {
    $$$
  }
  $$$
}'

Length of output: 131

Script:

#!/bin/bash
# Search for log level filtering or processing patterns
rg -A 5 "logLevel.*filter" 

# Search for any log level array handling
rg -A 5 "LogLevel\[]"

# Look for log level type definitions and interfaces
ast-grep --pattern 'type $_ = {
  $$$
  logLevel$_: $_
  $$$
}'

# Search for log level comparisons or ordering
rg -A 5 "LogLevel.*compare|LogLevel.*order"

Length of output: 531

Script:

#!/bin/bash
# Search for the LogLevelSelect component's interface and state handling
rg -A 10 "interface.*LogLevelSelect" 

# Look for filter state updates in the context
rg -A 10 "updateFilter.*LogLevel" 

# Search for log level enum or type definition
ast-grep --pattern 'enum LogLevel {
  $$$
}'

# Check how log levels are used in filtering
rg -A 10 "filterLogs|applyFilter.*logLevel"

Length of output: 6574


const handleOptionClick = useCallback((ev: React.MouseEvent) => {
const currentTarget = ev.currentTarget as HTMLElement;
Expand All @@ -196,22 +208,13 @@ const LogLevelSelect = () => {
}

const selectedValue = Number(currentTarget.dataset.value);
setSelectedLogLevels(range({begin: selectedValue, end: 1 + MAX_LOG_LEVEL}));
}, []);
updateFilter(range({begin: selectedValue, end: 1 + MAX_LOG_LEVEL}));
}, [updateFilter]);

const handleSelectClearButtonClick = () => {
setSelectedLogLevels([]);
updateFilter([]);
};

useEffect(() => {
setLogLevelFilter((0 === selectedLogLevels.length ?
null :
selectedLogLevels));
}, [
setLogLevelFilter,
selectedLogLevels,
]);

return (
<Select
className={`log-level-select ${ignorePointerIfFastLoading(uiState)}`}
Expand Down
17 changes: 13 additions & 4 deletions src/contexts/StateContextProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,14 +73,16 @@ interface StateContextType {
numPages: number,
onDiskFileSizeInBytes: number,
pageNum: number,
selectedLogLevels: LOG_LEVEL[],
queryProgress: number,
queryResults: QueryResults,

exportLogs: () => void,
filterLogs: (filter: LogLevelFilter) => void,
loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
loadPageByAction: (navAction: NavigationAction) => void,
setIsSettingsModalOpen: (isOpen: boolean) => void,
setLogLevelFilter: (filter: LogLevelFilter) => void,
setSelectedLogLevels: (levels: LOG_LEVEL[]) => void,
startQuery: (queryString: string, isRegex: boolean, isCaseSensitive: boolean) => void,
}
const StateContext = createContext<StateContextType>({} as StateContextType);
Expand All @@ -100,13 +102,15 @@ const STATE_DEFAULT: Readonly<StateContextType> = Object.freeze({
pageNum: 0,
queryProgress: QUERY_PROGRESS_INIT,
queryResults: new Map(),
selectedLogLevels: [],
uiState: UI_STATE.UNOPENED,

exportLogs: () => null,
filterLogs: () => null,
loadFile: () => null,
loadPageByAction: () => null,
setIsSettingsModalOpen: () => null,
setLogLevelFilter: () => null,
setSelectedLogLevels: () => null,
startQuery: () => null,
});

Expand Down Expand Up @@ -259,6 +263,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
const [pageNum, setPageNum] = useState<number>(STATE_DEFAULT.pageNum);
const [queryProgress, setQueryProgress] = useState<number>(STATE_DEFAULT.queryProgress);
const [queryResults, setQueryResults] = useState<QueryResults>(STATE_DEFAULT.queryResults);
const [selectedLogLevels, setSelectedLogLevels] =
useState<LOG_LEVEL[]>(STATE_DEFAULT.selectedLogLevels);
const [uiState, setUiState] = useState<UI_STATE>(STATE_DEFAULT.uiState);

// Refs
Expand Down Expand Up @@ -407,6 +413,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
setLogData("Loading...");
setOnDiskFileSizeInBytes(STATE_DEFAULT.onDiskFileSizeInBytes);
setExportProgress(STATE_DEFAULT.exportProgress);
setSelectedLogLevels(STATE_DEFAULT.selectedLogLevels);

if ("string" !== typeof fileSrc) {
updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
Expand Down Expand Up @@ -446,7 +453,7 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
loadPageByCursor(mainWorkerRef.current, cursor);
}, []);

const setLogLevelFilter = useCallback((filter: LogLevelFilter) => {
const filterLogs = useCallback((filter: LogLevelFilter) => {
if (null === mainWorkerRef.current) {
return;
}
Expand Down Expand Up @@ -546,13 +553,15 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
pageNum: pageNum,
queryProgress: queryProgress,
queryResults: queryResults,
selectedLogLevels: selectedLogLevels,
uiState: uiState,

exportLogs: exportLogs,
filterLogs: filterLogs,
loadFile: loadFile,
loadPageByAction: loadPageByAction,
setIsSettingsModalOpen: setIsSettingsModalOpen,
setLogLevelFilter: setLogLevelFilter,
setSelectedLogLevels: setSelectedLogLevels,
startQuery: startQuery,
}}
>
Expand Down