refactor: layout and log components

src/components/layout/traffic-graph.tsx

@@ -173,7 +173,11 @@ export function TrafficGraph({ ref }: { ref?: Ref<TrafficRef> }) {
       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<TrafficRef> }) {
       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();
 

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 ? (
-          <span key={index} className="highlight">
-            {part}
-          </span>
-        ) : (
-          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(
+          <span key={`highlight-${start}`} className="highlight">
+            {matchText}
+          </span>,
         );
-      });
+
+        lastIndex = start + matchText.length;
+      }
+
+      if (lastIndex < text.length) {
+        elements.push(text.slice(lastIndex));
+      }
+
+      return elements.length ? elements : text;
     } catch {
       return text;
     }