refactor: Improve responsiveness of Disks analytics page

pacholoamit · May 23, 2024 · f760e66 · f760e66
1 parent c1088b9
commit f760e66
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,10 +2,11 @@
 
 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org/).
 
-## 0.10.0
+## 0.9.2
 - Performance improvements for disk analysis 
 - Added System information metrics to dashboard
 - UI performance improvements
+- Improve responsiveness of Disks analytics page
 
 
 ## 0.9.1

diff --git a/src/features/metrics/pages/disk-analytics.page.tsx b/src/features/metrics/pages/disk-analytics.page.tsx
@@ -9,7 +9,7 @@ import TreemapChart, { useTreemapChartState } from "@/components/treemap-chart";
 import DiskDirectoryTreeView from "@/features/metrics/components/disks/disk.directory-treeview";
 import DiskInformationAnalyticsCard from "@/features/metrics/components/disks/disk.information-analytics";
 import { commands } from "@/lib";
-import { Grid, LoadingOverlay, Stack, Text, Title } from "@mantine/core";
+import { Grid, LoadingOverlay, Stack, Text, Title, useMantineTheme } from "@mantine/core";
 
 import useDisksStore from "../stores/disk.store";
 import formatBytes from "../utils/format-bytes";
@@ -44,6 +44,7 @@ const MemoizedDiskDirectoryTreeView = React.memo(DiskDirectoryTreeView);
 const DiskAnalyticsPage: React.FC<DiskAnalyticsPageProps> = () => {
   const { id = "" } = useParams();
   const disk = useDisksStore.use.selectedDisk();
+  const { colors } = useMantineTheme();
 
   const [diskAnalysis, setDiskAnalysis] = React.useState<INode<IFlatMetadata>[]>([]);
   const [isLoading, setIsLoading] = React.useState(false);
@@ -71,100 +72,96 @@ const DiskAnalyticsPage: React.FC<DiskAnalyticsPageProps> = () => {
     // Navigate into the root since it's a directory
     setDiskAnalysis(item.children as any);
 
-    // console.log(item.children);
-
-    // const flattened = flattenTree(item as any);
-
-    // console.log(item.children);
-
-    // // TODO: Move to rust?
-    // const stortedBySize = flattened.sort((a, b) => {
-    //   return (b.metadata?.size as number) - (a.metadata?.size as number);
-    // });
-
-    // // Remove roout node and get top 500
-    // const sample = stortedBySize.slice(1, 100);
-
-    // console.log(sample);
-
-    // const data = sample.map((i) => {
-    //   const id = i.id.toString();
-    //   const name = i.name || "unknown";
-    //   const value = i.metadata?.size ?? 0;
-
-    //   if (!i.parent) {
-    //     return { id, name, value };
-    //   }
-
-    //   return {
-    //     id,
-    //     name,
-    //     parent: i.parent.toString(),
-    //     value,
-    //   };
-    // });
-
-    // setChartOptions((prev) => ({
-    //   series: [
-    //     {
-    //       type: "treemap",
-    //       layoutAlgorithm: "squarified",
-    //       animationLimit: 1000,
-    //       allowTraversingTree: true,
-    //       allowPointSelect: true,
-    //       accessibility: {
-    //         exposeAsGroupOnly: true,
-    //       },
-    //       dataLabels: {
-    //         enabled: false,
-    //       },
-    //       levels: [
-    //         {
-    //           level: 1,
-    //           dataLabels: {
-    //             enabled: true,
-    //           },
-    //           borderWidth: 3,
-    //           layoutAlgorithm: "squarified",
-    //           color: colors.dark[6], // TODO: Create own color for this
-    //           borderColor: colors.dark[3], // TODO: Create own color for this
-    //         },
-    //         {
-    //           level: 1,
-    //           dataLabels: {
-    //             style: {
-    //               fontSize: "14px",
-    //             },
-    //           },
-    //           color: colors.dark[6], // TODO: Create own color for this
-    //           borderColor: colors.dark[3], // TODO: Create own color for this
-    //         },
-    //       ],
-    //       data: data as any, //TODO: Crutch fix this later
-    //     },
-    //   ],
-    // }));
-
-    // console.log("Done");
+    const flattened = flattenTree(item as any);
+
+    // TODO: Move to rust?
+    const stortedBySize = flattened.sort((a, b) => {
+      return (b.metadata?.size as number) - (a.metadata?.size as number);
+    });
+
+    // Remove roout node and get top 500
+    const sample = stortedBySize.slice(1, 500);
+
+    console.log(sample);
+
+    const data = sample.map((i) => {
+      const id = i.id.toString();
+      const name = i.name || "unknown";
+      const value = i.metadata?.size ?? 0;
+
+      if (!i.parent) {
+        return { id, name, value };
+      }
+
+      return {
+        id,
+        name,
+        parent: i.parent.toString(),
+        value,
+      };
+    });
+
+    setChartOptions((prev) => ({
+      series: [
+        {
+          type: "treemap",
+          layoutAlgorithm: "squarified",
+          animationLimit: 1000,
+          allowTraversingTree: true,
+          allowPointSelect: true,
+          accessibility: {
+            exposeAsGroupOnly: true,
+          },
+          dataLabels: {
+            enabled: false,
+          },
+          levels: [
+            {
+              level: 1,
+              dataLabels: {
+                enabled: true,
+              },
+              borderWidth: 3,
+              layoutAlgorithm: "squarified",
+              color: colors.dark[6], // TODO: Create own color for this
+              borderColor: colors.dark[3], // TODO: Create own color for this
+            },
+            {
+              level: 1,
+              dataLabels: {
+                style: {
+                  fontSize: "14px",
+                },
+              },
+              color: colors.dark[6], // TODO: Create own color for this
+              borderColor: colors.dark[3], // TODO: Create own color for this
+            },
+          ],
+          data: data as any, //TODO: Crutch fix this later
+        },
+      ],
+    }));
+
+    console.log("Done");
   }, [disk.mountPoint]);
 
   return (
     <PageWrapper name={id}>
       <Grid>
-        <Grid.Col span={3}>
+        <Grid.Col md={12} lg={4} xl={3}>
           <DiskInformationAnalyticsCard startDiskAnalysis={startDiskAnalysis} />
         </Grid.Col>
-        <Grid.Col span={9}>
+        <Grid.Col md={12} lg={8} xl={9}>
           <Card height="350px">
             <LoadingOverlay visible={isLoading} overlayBlur={3} />
             <Title order={4}>File Explorer</Title>
             {isDiskAnalysisEmpty ? <FileExplorerNoData /> : <MemoizedDiskDirectoryTreeView data={diskAnalysis} />}
           </Card>
         </Grid.Col>
-        <Grid.Col span={12}>
+        <Grid.Col xl={12}>
           <Card height="560px">
             Disk Usage
-            {/* <MemoizedTreemapChart options={chartOptions} /> */}
+            <MemoizedTreemapChart options={chartOptions} />
           </Card>
         </Grid.Col>
       </Grid>