Skip to content

Commit

Permalink
labels - performance fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@manishiwa
manishiwa committed Jul 30, 2024
1 parent af1ca30 commit 8b83f15
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 79 deletions.
5 changes: 3 additions & 2 deletions app/(labels)/labels/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,11 @@ export default function Header({
<Image
src="/logo_labels_full.svg"
alt="Forest"
className="hidden dark:block"
className="w-[288px] h-[63px] md:w-[206px] md:h-[45px]"
width={isMobile ? 288 : 206}
height={isMobile ? 63 : 45}
sizes="100vw"
sizes="33vw"
loading="eager"
/>
</Link>
</div>
Expand Down
33 changes: 13 additions & 20 deletions app/(labels)/labels/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function Search() {
gas_fees_usd_change: number[];
daa: number[];
daa_change: number[];
}>("labelsFilters", {
}>("labelsFiltersObj", {
address: [],
origin_key: [],
name: [],
Expand Down Expand Up @@ -109,14 +109,14 @@ export default function Search() {
);

useEffect(() => {
// remove deployer_address from filters if it's not selected
// empty the deployer address filter if it is not shown
if (!showDeployerAddress) {
setLabelsFilters({
...labelsFilters,
setLabelsFilters((prev) => ({
...prev,
deployer_address: [],
});
}));
}
}, [showDeployerAddress, setLabelsFilters, labelsFilters]);
}, [showDeployerAddress, setLabelsFilters]);

const [search, setSearch] = useState<string>("");

Expand Down Expand Up @@ -315,13 +315,6 @@ export default function Search() {
return;
}

if (!labelsAutocomplete.deployer_address) {
setLabelsAutocomplete({
...labelsAutocomplete,
deployer_address: [],
});
}

const categoryAutocomplete = Object.keys(
master.blockspace_categories.main_categories,
).filter((category) =>
Expand Down Expand Up @@ -355,7 +348,7 @@ export default function Search() {
subcategory: subcategoryAutocomplete,
origin_key: chainAutocomplete,
});
}, [labelsAutocomplete, labelsDeployerAddresses, labelsOwnerProjects, master, search, setLabelsAutocomplete]);
}, [labelsDeployerAddresses, labelsOwnerProjects, master, search, setLabelsAutocomplete]);

return (
<div className="relative w-full">
Expand Down Expand Up @@ -446,11 +439,11 @@ export default function Search() {
>
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="25" height="24" rx="12" stroke="url(#paint0_linear_8794_34411)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7435 17.2426C18.8688 16.1174 19.5009 14.5913 19.5009 13C19.5009 11.4087 18.8688 9.88258 17.7435 8.75736C16.6183 7.63214 15.0922 7 13.5009 7C11.9096 7 10.3835 7.63214 9.25827 8.75736C8.13305 9.88258 7.50091 11.4087 7.50091 13C7.50091 14.5913 8.13305 16.1174 9.25827 17.2426C10.3835 18.3679 11.9096 19 13.5009 19C15.0922 19 16.6183 18.3679 17.7435 17.2426V17.2426ZM12.4402 10.8787C12.2996 10.738 12.1088 10.659 11.9099 10.659C11.711 10.659 11.5202 10.738 11.3796 10.8787C11.2389 11.0193 11.1599 11.2101 11.1599 11.409C11.1599 11.6079 11.2389 11.7987 11.3796 11.9393L12.4402 13L11.3796 14.0607C11.2389 14.2013 11.1599 14.3921 11.1599 14.591C11.1599 14.7899 11.2389 14.9807 11.3796 15.1213C11.5202 15.262 11.711 15.341 11.9099 15.341C12.1088 15.341 12.2996 15.262 12.4402 15.1213L13.5009 14.0607L14.5616 15.1213C14.7022 15.262 14.893 15.341 15.0919 15.341C15.2908 15.341 15.4816 15.262 15.6222 15.1213C15.7629 14.9807 15.8419 14.7899 15.8419 14.591C15.8419 14.3921 15.7629 14.2013 15.6222 14.0607L14.5616 13L15.6222 11.9393C15.7629 11.7987 15.8419 11.6079 15.8419 11.409C15.8419 11.2101 15.7629 11.0193 15.6222 10.8787C15.4816 10.738 15.2908 10.659 15.0919 10.659C14.893 10.659 14.7022 10.738 14.5616 10.8787L13.5009 11.9393L12.4402 10.8787Z" fill="#CDD8D3" />
<path fillRule="evenodd" clipRule="evenodd" d="M17.7435 17.2426C18.8688 16.1174 19.5009 14.5913 19.5009 13C19.5009 11.4087 18.8688 9.88258 17.7435 8.75736C16.6183 7.63214 15.0922 7 13.5009 7C11.9096 7 10.3835 7.63214 9.25827 8.75736C8.13305 9.88258 7.50091 11.4087 7.50091 13C7.50091 14.5913 8.13305 16.1174 9.25827 17.2426C10.3835 18.3679 11.9096 19 13.5009 19C15.0922 19 16.6183 18.3679 17.7435 17.2426V17.2426ZM12.4402 10.8787C12.2996 10.738 12.1088 10.659 11.9099 10.659C11.711 10.659 11.5202 10.738 11.3796 10.8787C11.2389 11.0193 11.1599 11.2101 11.1599 11.409C11.1599 11.6079 11.2389 11.7987 11.3796 11.9393L12.4402 13L11.3796 14.0607C11.2389 14.2013 11.1599 14.3921 11.1599 14.591C11.1599 14.7899 11.2389 14.9807 11.3796 15.1213C11.5202 15.262 11.711 15.341 11.9099 15.341C12.1088 15.341 12.2996 15.262 12.4402 15.1213L13.5009 14.0607L14.5616 15.1213C14.7022 15.262 14.893 15.341 15.0919 15.341C15.2908 15.341 15.4816 15.262 15.6222 15.1213C15.7629 14.9807 15.8419 14.7899 15.8419 14.591C15.8419 14.3921 15.7629 14.2013 15.6222 14.0607L14.5616 13L15.6222 11.9393C15.7629 11.7987 15.8419 11.6079 15.8419 11.409C15.8419 11.2101 15.7629 11.0193 15.6222 10.8787C15.4816 10.738 15.2908 10.659 15.0919 10.659C14.893 10.659 14.7022 10.738 14.5616 10.8787L13.5009 11.9393L12.4402 10.8787Z" fill="#CDD8D3" />
<defs>
<linearGradient id="paint0_linear_8794_34411" x1="13.5" y1="1" x2="29.4518" y2="24.361" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE5468" />
<stop offset="1" stop-color="#FFDF27" />
<stop stopColor="#FE5468" />
<stop offset="1" stopColor="#FFDF27" />
</linearGradient>
</defs>
</svg>
Expand Down Expand Up @@ -509,11 +502,11 @@ export default function Search() {
>
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="25" height="24" rx="12" stroke="url(#paint0_linear_8794_34411)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7435 17.2426C18.8688 16.1174 19.5009 14.5913 19.5009 13C19.5009 11.4087 18.8688 9.88258 17.7435 8.75736C16.6183 7.63214 15.0922 7 13.5009 7C11.9096 7 10.3835 7.63214 9.25827 8.75736C8.13305 9.88258 7.50091 11.4087 7.50091 13C7.50091 14.5913 8.13305 16.1174 9.25827 17.2426C10.3835 18.3679 11.9096 19 13.5009 19C15.0922 19 16.6183 18.3679 17.7435 17.2426V17.2426ZM12.4402 10.8787C12.2996 10.738 12.1088 10.659 11.9099 10.659C11.711 10.659 11.5202 10.738 11.3796 10.8787C11.2389 11.0193 11.1599 11.2101 11.1599 11.409C11.1599 11.6079 11.2389 11.7987 11.3796 11.9393L12.4402 13L11.3796 14.0607C11.2389 14.2013 11.1599 14.3921 11.1599 14.591C11.1599 14.7899 11.2389 14.9807 11.3796 15.1213C11.5202 15.262 11.711 15.341 11.9099 15.341C12.1088 15.341 12.2996 15.262 12.4402 15.1213L13.5009 14.0607L14.5616 15.1213C14.7022 15.262 14.893 15.341 15.0919 15.341C15.2908 15.341 15.4816 15.262 15.6222 15.1213C15.7629 14.9807 15.8419 14.7899 15.8419 14.591C15.8419 14.3921 15.7629 14.2013 15.6222 14.0607L14.5616 13L15.6222 11.9393C15.7629 11.7987 15.8419 11.6079 15.8419 11.409C15.8419 11.2101 15.7629 11.0193 15.6222 10.8787C15.4816 10.738 15.2908 10.659 15.0919 10.659C14.893 10.659 14.7022 10.738 14.5616 10.8787L13.5009 11.9393L12.4402 10.8787Z" fill="#CDD8D3" />
<path fillRule="evenodd" clipRule="evenodd" d="M17.7435 17.2426C18.8688 16.1174 19.5009 14.5913 19.5009 13C19.5009 11.4087 18.8688 9.88258 17.7435 8.75736C16.6183 7.63214 15.0922 7 13.5009 7C11.9096 7 10.3835 7.63214 9.25827 8.75736C8.13305 9.88258 7.50091 11.4087 7.50091 13C7.50091 14.5913 8.13305 16.1174 9.25827 17.2426C10.3835 18.3679 11.9096 19 13.5009 19C15.0922 19 16.6183 18.3679 17.7435 17.2426V17.2426ZM12.4402 10.8787C12.2996 10.738 12.1088 10.659 11.9099 10.659C11.711 10.659 11.5202 10.738 11.3796 10.8787C11.2389 11.0193 11.1599 11.2101 11.1599 11.409C11.1599 11.6079 11.2389 11.7987 11.3796 11.9393L12.4402 13L11.3796 14.0607C11.2389 14.2013 11.1599 14.3921 11.1599 14.591C11.1599 14.7899 11.2389 14.9807 11.3796 15.1213C11.5202 15.262 11.711 15.341 11.9099 15.341C12.1088 15.341 12.2996 15.262 12.4402 15.1213L13.5009 14.0607L14.5616 15.1213C14.7022 15.262 14.893 15.341 15.0919 15.341C15.2908 15.341 15.4816 15.262 15.6222 15.1213C15.7629 14.9807 15.8419 14.7899 15.8419 14.591C15.8419 14.3921 15.7629 14.2013 15.6222 14.0607L14.5616 13L15.6222 11.9393C15.7629 11.7987 15.8419 11.6079 15.8419 11.409C15.8419 11.2101 15.7629 11.0193 15.6222 10.8787C15.4816 10.738 15.2908 10.659 15.0919 10.659C14.893 10.659 14.7022 10.738 14.5616 10.8787L13.5009 11.9393L12.4402 10.8787Z" fill="#CDD8D3" />
<defs>
<linearGradient id="paint0_linear_8794_34411" x1="13.5" y1="1" x2="29.4518" y2="24.361" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE5468" />
<stop offset="1" stop-color="#FFDF27" />
<stop stopColor="#FE5468" />
<stop offset="1" stopColor="#FFDF27" />
</linearGradient>
</defs>
</svg>
Expand Down
65 changes: 8 additions & 57 deletions app/(labels)/labels/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ export default function LabelsPage() {
gas_fees_usd_change: number[];
daa: number[];
daa_change: number[];
}>("labelsFilters", {
}>("labelsFiltersObj", {
address: [],
origin_key: [],
name: [],
Expand Down Expand Up @@ -755,32 +755,14 @@ export default function LabelsPage() {
</div>
</div>
</div>
{/* <LabelsContainer className="fixed 2xl:hidden inset-0 flex flex-col items-center justify-center bg-[#151a19] z-[999]">
<div className="text-forest-400 text-center font-semibold text-[20px]">
This page is not currently supported on small screens
</div>
<div className="text-forest-400 text-center">
Please view on a larger device or make your browser window wider.
</div>
</LabelsContainer> */}
{/* <div className="bg-black h-10 w-32 text-white fixed top-0 left-0 z-50">
{SparklineTimestampRange}
</div> */}
{/* <div className="bg-black h-10 w-32 text-white fixed top-0 left-0 z-50">
{JSON.stringify(sort)} - {currentMetric}
</div> */}

<LabelsTableContainer
className="block"
// className="w-full h-screen"
// forcedMinWidth={1272 + 200}
includeMargin={false}
header={
<>
{filteredLabelsData && (
<GridTableHeader
className="pb-[4px] text-[12px] gap-x-[20px] z-[2]"
// gridDefinitionColumns="pb-[4px] text-[12px] grid-cols-[15px,minmax(160px,1600px),150px,200px,105px,105px,175px,192px] gap-x-[20px] z-[2]"
style={{
gridTemplateColumns: gridTemplateColumns
}}
Expand Down Expand Up @@ -872,7 +854,6 @@ export default function LabelsPage() {
}}
/>
</div>
{/* <div className="flex items-center justify-start">Category</div> */}
<div
className="flex items-center justify-start cursor-pointer"
onClick={() => {
Expand Down Expand Up @@ -1106,7 +1087,6 @@ export default function LabelsPage() {
>
<GridTableRow
className="group text-[12px] h-[34px] inline-grid transition-all duration-300 gap-x-[20px] mb-[3px]"
// gridDefinitionColumns="grid-cols-[15px,minmax(160px,1600px),150px,200px,105px,105px,175px,192px] x-has-[span:hover]:grid-cols-[15px,minmax(390px,800px),150px,200px,105px,105px,175px,192px]"
style={{
gridTemplateColumns: gridTemplateColumns
}}
Expand Down Expand Up @@ -1336,12 +1316,6 @@ export default function LabelsPage() {
</div>
)}
</div>

{/* <div className="flex h-full items-center gap-x-[3px]">
<div>{master?.blockspace_categories.main_categories[subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category]]}</div>
{filteredLabelsData[item.index].usage_category && <AddIcon />}
</div> */}

<div className="flex h-full items-center gap-x-[3px] whitespace-nowrap">
<div className="flex h-full items-center gap-x-[3px] whitespace-nowrap max-w-[100%] hover:max-w-[300px] transition-all duration-300 z-10">
{filteredLabelsData[item.index].usage_category && (
Expand Down Expand Up @@ -1436,7 +1410,6 @@ export default function LabelsPage() {
/>
)}
</div>
{/* {filteredLabelsData[item.index].usage_category && <Badge size="sm" label={master?.blockspace_categories.sub_categories[filteredLabelsData[item.index].usage_category]} leftIcon={null} leftIconColor="#FFFFFF" rightIcon="heroicons-solid:plus-circle" />} */}
</div>

<div className="flex h-full items-center justify-end gap-x-[3px]">
Expand All @@ -1451,7 +1424,6 @@ export default function LabelsPage() {
day: "numeric",
})}
</div>
{/* <AddIcon /> */}
</div>
)}
</div>
Expand Down Expand Up @@ -1538,27 +1510,6 @@ export default function LabelsPage() {
}}
/>
</div>
{/* <div
className="truncate transition-all duration-300"
style={{ direction: 'ltr' }}
onClick={() => {
navigator.clipboard.writeText(filteredLabelsData[item.index].deployer_address)
}}
>
{filteredLabelsData[item.index].deployer_address.slice(0, filteredLabelsData[item.index].deployer_address.length - 6)}
</div>
<div className="transition-all duration-300">
{filteredLabelsData[item.index].deployer_address.slice(-6)}
</div>
<div className="pl-[10px]">
<Icon
icon={copiedAddress === filteredLabelsData[item.index].deployer_address ? "feather:check-circle" : "feather:copy"}
className="w-[14px] h-[14px] cursor-pointer"
onClick={() => {
handleCopyAddress(filteredLabelsData[item.index].deployer_address);
}}
/>
</div> */}
</>
)}
</div>
Expand Down Expand Up @@ -1605,7 +1556,7 @@ export default function LabelsPage() {
</LabelsTableContainer >
{/* </div> */}

<Footer downloadCSV={downloadCSV} downloadJSON={downloadJSON} />
{/* <Footer downloadCSV={downloadCSV} downloadJSON={downloadJSON} /> */}
</>
);
}
Expand Down Expand Up @@ -1832,20 +1783,20 @@ const WorldIcon = () => (
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M7.52757 1.86364C4.12609 1.86364 1.36865 4.61098 1.36865 8C1.36865 11.389 4.12609 14.1364 7.52757 14.1364C10.9291 14.1364 13.6865 11.389 13.6865 8C13.6865 4.61098 10.9291 1.86364 7.52757 1.86364ZM0 8C0 3.85786 3.37021 0.5 7.52757 0.5C11.6849 0.5 15.0551 3.85786 15.0551 8C15.0551 12.1421 11.6849 15.5 7.52757 15.5C3.37021 15.5 0 12.1421 0 8Z"
fill="#CDD8D3"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M0 8C0 7.62344 0.306383 7.31818 0.684325 7.31818H14.3708C14.7488 7.31818 15.0551 7.62344 15.0551 8C15.0551 8.37656 14.7488 8.68182 14.3708 8.68182H0.684325C0.306383 8.68182 0 8.37656 0 8Z"
fill="#CDD8D3"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M5.47476 8C5.52166 10.0965 6.24532 12.1149 7.52757 13.7608C8.80982 12.1149 9.53349 10.0965 9.58039 8C9.53349 5.90352 8.80982 3.88512 7.52757 2.23918C6.24532 3.88512 5.52166 5.90352 5.47476 8ZM7.52757 1.18182L7.02231 0.721984C5.19874 2.71107 4.16242 5.2924 4.1061 7.9858C4.1059 7.99527 4.1059 8.00473 4.1061 8.0142C4.16242 10.7076 5.19874 13.2889 7.02231 15.278C7.15196 15.4194 7.33533 15.5 7.52757 15.5C7.71981 15.5 7.90319 15.4194 8.03284 15.278C9.85641 13.2889 10.8927 10.7076 10.949 8.0142C10.9492 8.00473 10.9492 7.99527 10.949 7.9858C10.8927 5.2924 9.85641 2.71107 8.03284 0.721984L7.52757 1.18182Z"
fill="#CDD8D3"
/>
Expand Down

0 comments on commit 8b83f15

Please sign in to comment.