diff --git a/src/components/layout/traffic-graph.tsx b/src/components/layout/traffic-graph.tsx index 81311255..c8dc5731 100644 --- a/src/components/layout/traffic-graph.tsx +++ b/src/components/layout/traffic-graph.tsx @@ -173,7 +173,11 @@ export function TrafficGraph({ ref }: { ref?: Ref }) { context.globalAlpha = upLineAlpha; context.lineWidth = upLineWidth; context.strokeStyle = upLineColor; - lineStyle ? drawBezier(listUp, offset) : drawLine(listUp, offset); + if (lineStyle) { + drawBezier(listUp, offset); + } else { + drawLine(listUp, offset); + } context.stroke(); context.closePath(); @@ -181,7 +185,11 @@ export function TrafficGraph({ ref }: { ref?: Ref }) { context.globalAlpha = downLineAlpha; context.lineWidth = downLineWidth; context.strokeStyle = downLineColor; - lineStyle ? drawBezier(listDown, offset) : drawLine(listDown, offset); + if (lineStyle) { + drawBezier(listDown, offset); + } else { + drawLine(listDown, offset); + } context.stroke(); context.closePath(); diff --git a/src/components/log/log-item.tsx b/src/components/log/log-item.tsx index 3b7a8dee..4b1b2569 100644 --- a/src/components/log/log-item.tsx +++ b/src/components/log/log-item.tsx @@ -1,4 +1,5 @@ import { styled, Box } from "@mui/material"; +import type { ReactNode } from "react"; import { SearchState } from "@/components/base/base-search-box"; @@ -67,17 +68,38 @@ const LogItem = ({ value, searchState }: Props) => { } const flags = searchState.matchCase ? "g" : "gi"; - const parts = text.split(new RegExp(`(${pattern})`, flags)); + const regex = new RegExp(pattern, flags); + const elements: ReactNode[] = []; + let lastIndex = 0; + let match: RegExpExecArray | null; - return parts.map((part, index) => { - return index % 2 === 1 ? ( - - {part} - - ) : ( - part + while ((match = regex.exec(text)) !== null) { + const start = match.index; + const matchText = match[0]; + + if (matchText === "") { + regex.lastIndex += 1; + continue; + } + + if (start > lastIndex) { + elements.push(text.slice(lastIndex, start)); + } + + elements.push( + + {matchText} + , ); - }); + + lastIndex = start + matchText.length; + } + + if (lastIndex < text.length) { + elements.push(text.slice(lastIndex)); + } + + return elements.length ? elements : text; } catch { return text; }