From f760e66191f1fb28bd0c79ab635281771998ecd3 Mon Sep 17 00:00:00 2001 From: pacholoamit Date: Thu, 23 May 2024 23:53:24 +0800 Subject: [PATCH] refactor: Improve responsiveness of Disks analytics page --- CHANGELOG.md | 3 +- .../metrics/pages/disk-analytics.page.tsx | 157 +++++++++--------- 2 files changed, 79 insertions(+), 81 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9c63d26..236f2563 100644 --- 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 index 8949f622..d40b252c 100644 --- 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 = () => { const { id = "" } = useParams(); const disk = useDisksStore.use.selectedDisk(); + const { colors } = useMantineTheme(); const [diskAnalysis, setDiskAnalysis] = React.useState[]>([]); const [isLoading, setIsLoading] = React.useState(false); @@ -71,100 +72,96 @@ const DiskAnalyticsPage: React.FC = () => { // 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 ( - + - + File Explorer {isDiskAnalysisEmpty ? : } - + Disk Usage - {/* */} +