fix(web): jsonviewer support to render large data (labring#1731)

* fix(web): add support to large database data * highlight react window
HUAHUAI23 · Dec 12, 2023 · 382d8f2 · 382d8f2
1 parent 2b87cb7
commit 382d8f2
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 28 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -50,6 +50,7 @@
     "react-markdown": "^8.0.7",
     "react-router-dom": "^6.11.2",
     "react-syntax-highlighter": "^15.5.0",
+    "react-window": "^1.8.10",
     "recharts": "^2.7.2",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
@@ -66,6 +67,7 @@
     "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.2.4",
     "@types/react-syntax-highlighter": "^15.5.6",
+    "@types/react-window": "^1.8.8",
     "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react-swc": "^3.3.1",
     "autoprefixer": "^10.4.14",
@@ -81,7 +83,6 @@
   },
   "lint-staged": {
     "*.{ts,tsx,js}": "eslint --fix",
-    "*.css": "stylelint --fix",
-    "*.scss": "stylelint --syntax=scss --fix"
+    "*.{css,scss}": "stylelint --fix"
   }
 }
diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
@@ -1,8 +1,11 @@
-import SyntaxHighlighter from "react-syntax-highlighter";
+import SyntaxHighlighter, { Prism } from "react-syntax-highlighter";
+import { FixedSizeList as List } from "react-window";
 import SimpleBar from "simplebar-react";
 
 import { COLOR_MODE } from "@/constants";
 
+import "./index.scss";
+
 type JSONViewerProps = {
   code: string;
   language?: string;
@@ -238,28 +241,60 @@ const JSONViewerDarkStyle: any = {
     fontWeight: "bold",
   },
 };
+
 export default function JSONViewer(props: JSONViewerProps) {
   const { code, language = "json", colorMode = COLOR_MODE.light, ...rest } = props;
-  const lightTheme = { background: "#fdfdfe" };
+  const lightTheme = { background: "#fdfdfe", padding: 0 };
   const darkTheme = {
     background: "#202631",
     color: "#f0f0f0",
   };
 
-  return (
-    <SimpleBar
-      style={{
-        maxHeight: 390,
-      }}
-      {...rest}
-    >
-      <SyntaxHighlighter
+  const rowHeight = 22;
+
+  const renderRow = ({ index, style }: { index: number; style: any }) => (
+    <div style={style} className="code">
+      <Prism
         language={language}
         style={colorMode === COLOR_MODE.dark ? JSONViewerDarkStyle : JSONViewerStyle}
         customStyle={colorMode === COLOR_MODE.dark ? darkTheme : lightTheme}
       >
-        {code}
-      </SyntaxHighlighter>
-    </SimpleBar>
+        {code.split(`\n`)[index]}
+      </Prism>
+    </div>
   );
+
+  if (code.split(`\n`).length <= 100) {
+    return (
+      <SimpleBar
+        style={{
+          maxHeight: 390,
+        }}
+        {...rest}
+      >
+        <SyntaxHighlighter
+          language={language}
+          style={colorMode === COLOR_MODE.dark ? JSONViewerDarkStyle : JSONViewerStyle}
+          customStyle={colorMode === COLOR_MODE.dark ? darkTheme : lightTheme}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </SimpleBar>
+    );
+  } else {
+    return (
+      <List
+        height={390}
+        itemCount={code.split(`\n`).length}
+        itemSize={rowHeight}
+        width="100%"
+        style={{
+          paddingTop: 0,
+        }}
+        {...rest}
+      >
+        {renderRow}
+      </List>
+    );
+  }
 }
diff --git a/web/src/components/Editor/index.scss b/web/src/components/Editor/index.scss
@@ -0,0 +1,23 @@
+.code .property {
+  color: #A31515
+}
+
+.code .number {
+  color: #01a99d
+}
+
+.code .string {
+  color: #0451a5
+}
+
+[data-theme="dark"] .code .property {
+  color: #9BDCFE
+}
+
+[data-theme="dark"] .code .number {
+  color: #B0CAA4
+}
+
+[data-theme="dark"] .code .string {
+  color: #CE9178
+}
diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx
@@ -55,8 +55,10 @@ export default function Pagination(props: {
           <Button
             variant="link"
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             isDisabled={page === 1 || maxPage === -1}
@@ -74,8 +76,10 @@ export default function Pagination(props: {
           <Button
             variant="link"
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             isDisabled={page === 1 || maxPage === -1}
@@ -97,8 +101,10 @@ export default function Pagination(props: {
             variant="link"
             isDisabled={maxPage === page || maxPage === -1}
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             onClick={() => {
@@ -115,8 +121,10 @@ export default function Pagination(props: {
           <Button
             variant="link"
             className={clsx(
-              "!h-6 !w-6 !rounded-full bg-lafWhite-600 !p-0",
-              darkMode ? "" : "!text-[#262A32]",
+              "!h-6 !w-6 !rounded-full !p-0",
+              darkMode
+                ? "hover:bg-grayModern-600"
+                : "bg-lafWhite-600 !text-[#262A32] hover:bg-grayModern-200",
             )}
             style={{ minWidth: "24px" }}
             isDisabled={maxPage === page || maxPage === -1}

diff --git a/...llectionDataList/mods/DataPanel/index.css → ...lectionDataList/mods/DataPanel/index.scss b/...llectionDataList/mods/DataPanel/index.css → ...lectionDataList/mods/DataPanel/index.scss
@@ -1,4 +1,4 @@
-.dataList .simplebar-scrollbar::before {
+.simplebar-scrollbar::before {
   background: #7b838b;
   width: 4px;
   transform: translateX(100%);

diff --git a/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx b/web/src/pages/app/database/CollectionDataList/mods/DataPanel/index.tsx
@@ -30,7 +30,7 @@ import RightPanelList from "../../../RightComponent/List";
 import { useDeleteDataMutation, useEntryDataQuery, useUpdateDataMutation } from "../../../service";
 import useDBMStore from "../../../store";
 
-import "./index.css";
+import "./index.scss";
 
 import useGlobalStore from "@/pages/globalStore";
 
@@ -62,6 +62,7 @@ export default function DataPanel() {
   };
 
   const [queryData, setQueryData] = useState<QueryData>();
+  const darkMode = colorMode === COLOR_MODE.dark;
 
   useEffect(() => {
     if (store.currentDB !== undefined) {
@@ -300,15 +301,15 @@ export default function DataPanel() {
                     hideToolTip
                     text={text}
                     tip={String(t("Copied"))}
-                    className="ml-2 hover:bg-gray-200"
+                    className={darkMode ? "ml-2 hover:bg-gray-600" : "ml-2 hover:bg-gray-200"}
                   >
                     <IconWrap
                       showBg
                       tooltip={t("Copy").toString()}
                       size={32}
                       className="group/icon"
                     >
-                      <OutlineCopyIcon size="14" color="#24282C" />
+                      <OutlineCopyIcon size="14" color={darkMode ? "#ffffff" : "#24282C"} />
                     </IconWrap>
                   </CopyText>
                 );

diff --git a/web/src/pages/app/database/PolicyDataList/index.tsx b/web/src/pages/app/database/PolicyDataList/index.tsx
@@ -157,7 +157,7 @@ export default function PolicyDataList() {
                       size={32}
                       className="group/icon"
                     >
-                      <OutlineCopyIcon size="14" color="#24282C" />
+                      <OutlineCopyIcon size="14" color={darkMode ? "#ffffff" : "#24282C"} />
                     </IconWrap>
                   </CopyText>
                 );