Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(web): reduce the queries to get assets (#1072)
Browse files Browse the repository at this point in the history
* unify GetAssets and GetAssetsItems

* remove joinning asset's names

* remove redundant codes

* refactor: item fields

* refactor: item metadata

* Apply suggestions from code review

Co-authored-by: Nour Balaha <[email protected]>

---------

Co-authored-by: Nour Balaha <[email protected]>
2 people authored and yk-eukarya committed Oct 1, 2024

Verified

This commit was signed with the committer’s verified signature.
cnasikas Christos Nasikas
1 parent 918b654 commit 793ae11
Showing 9 changed files with 106 additions and 145 deletions.
22 changes: 4 additions & 18 deletions web/src/components/molecules/Asset/Viewers/MvtViewer/Imagery.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,6 @@ const normalOffset = new HeadingPitchRange(0, Math.toRadians(-90.0), 200000);
type Props = {
url: string;
handleProperties: (prop: Property) => void;
selectFeature?: (selected: boolean) => void;
};

export type Property = { [k: string]: string | number | boolean };
@@ -27,7 +26,7 @@ type TileCoordinates = {
level: number;
};

export const Imagery: React.FC<Props> = ({ url, handleProperties, selectFeature }) => {
export const Imagery: React.FC<Props> = ({ url, handleProperties }) => {
const { viewer } = useCesium();
const [selectedFeature, setSelectFeature] = useState<string>();
const [urlTemplate, setUrlTemplate] = useState<URLTemplate>(url as URLTemplate);
@@ -81,11 +80,10 @@ export const Imagery: React.FC<Props> = ({ url, handleProperties, selectFeature
const onSelectFeature = useCallback(
(feature: VectorTileFeature, tileCoords: TileCoordinates) => {
const id = idFromGeometry(feature.loadGeometry(), tileCoords);
selectFeature?.(true);
setSelectFeature(id);
handleProperties(feature.properties);
},
[handleProperties, selectFeature],
[handleProperties],
);

useEffect(() => {
@@ -110,19 +108,7 @@ export const Imagery: React.FC<Props> = ({ url, handleProperties, selectFeature
layers.remove(currentLayer);
};
}
}, [
viewer,
selectedFeature,
url,
urlTemplate,
currentLayer,
layers,
handleProperties,
selectFeature,
onSelectFeature,
style,
maximumLevel,
]);
}, [currentLayer, maximumLevel, onSelectFeature, style, urlTemplate, viewer]);

const handleChange = useCallback((value: unknown) => {
if (typeof value !== "string") return;
@@ -187,7 +173,7 @@ const idFromGeometry = (
export function parseMetadata(json: any):
| {
layers: string[];
center: [lng: number, lat: number, height: number] | undefined;
center?: [lng: number, lat: number, height: number];
maximumLevel?: number;
}
| undefined {
60 changes: 19 additions & 41 deletions web/src/components/organisms/Project/Asset/AssetList/hooks.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useState, useCallback, Key, useMemo } from "react";
import { useState, useCallback, Key, useMemo } from "react";
import { useNavigate, useParams } from "react-router-dom";

import Notification from "@reearth-cms/components/atoms/Notification";
@@ -22,14 +22,13 @@ export type AssetSortType = "DATE" | "NAME" | "SIZE";
export type SortDirection = "ASC" | "DESC";
type UploadType = "local" | "url";

export default () => {
export default (isItemsRequired: boolean) => {
const t = useT();

const [uploadModalVisibility, setUploadModalVisibility] = useState(false);

const { workspaceId, projectId } = useParams();
const navigate = useNavigate();
const [assetList, setAssetList] = useState<Asset[]>([]);
const [selection, setSelection] = useState<{ selectedRowKeys: Key[] }>({
selectedRowKeys: [],
});
@@ -71,8 +70,8 @@ export default () => {
[getAsset],
);

const { data, refetch, loading, networkStatus } = useGetAssetsQuery({
fetchPolicy: "no-cache",
const params = {
fetchPolicy: "no-cache" as const,
variables: {
projectId: projectId ?? "",
pagination: { first: pageSize, offset: (page - 1) * pageSize },
@@ -83,21 +82,19 @@ export default () => {
},
notifyOnNetworkStatusChange: true,
skip: !projectId,
});
};

const { data: assetsItems, refetch: refetchAssetsItems } = useGetAssetsItemsQuery({
fetchPolicy: "no-cache",
variables: {
projectId: projectId ?? "",
pagination: { first: pageSize, offset: (page - 1) * pageSize },
sort: sort
? { sortBy: sort.type as GQLSortType, direction: sort.direction as GQLSortDirection }
: undefined,
keyword: searchTerm,
},
notifyOnNetworkStatusChange: true,
skip: !projectId,
});
const { data, refetch, loading, networkStatus } = isItemsRequired
? useGetAssetsItemsQuery(params)
: useGetAssetsQuery(params);

const assetList = useMemo(
() =>
(data?.assets.nodes
.map(asset => convertAsset(asset as GQLAsset))
.filter(asset => !!asset) as Asset[]) ?? [],
[data?.assets.nodes],
);

const isRefetching = networkStatus === 3;

@@ -161,7 +158,6 @@ export default () => {
if (results?.length > 0) {
Notification.success({ message: t("Successfully added one or more assets!") });
await refetch();
refetchAssetsItems();
}
handleUploadModalCancel();
return results;
@@ -173,7 +169,6 @@ export default () => {
createAssetUploadMutation,
t,
refetch,
refetchAssetsItems,
],
);

@@ -193,7 +188,6 @@ export default () => {
if (result.data?.createAsset) {
Notification.success({ message: t("Successfully added asset!") });
await refetch();
refetchAssetsItems();
return convertAsset(result.data.createAsset.asset as GQLAsset);
}
return undefined;
@@ -203,7 +197,7 @@ export default () => {
handleUploadModalCancel();
}
},
[projectId, createAssetMutation, t, refetch, refetchAssetsItems, handleUploadModalCancel],
[projectId, createAssetMutation, t, refetch, handleUploadModalCancel],
);

const [deleteAssetMutation] = useDeleteAssetMutation();
@@ -223,12 +217,11 @@ export default () => {
);
if (results) {
await refetch();
refetchAssetsItems();
Notification.success({ message: t("One or more assets were successfully deleted!") });
setSelection({ selectedRowKeys: [] });
}
})(),
[t, deleteAssetMutation, refetch, refetchAssetsItems, projectId],
[t, deleteAssetMutation, refetch, projectId],
);

const handleSearchTerm = useCallback((term?: string) => {
@@ -238,27 +231,12 @@ export default () => {

const handleAssetsReload = useCallback(() => {
refetch();
refetchAssetsItems();
}, [refetch, refetchAssetsItems]);
}, [refetch]);

const handleNavigateToAsset = (assetId: string) => {
navigate(`/workspace/${workspaceId}/project/${projectId}/asset/${assetId}`);
};

useEffect(() => {
const assets =
(data?.assets.nodes
.map(asset => asset as GQLAsset)
.map(convertAsset)
.filter(asset => !!asset) as Asset[]) ?? [];
setAssetList(
assets.map(asset => ({
...asset,
items: assetsItems?.assets.nodes.find(assetItem => assetItem?.id === asset.id)?.items ?? [],
})),
);
}, [data?.assets.nodes, assetsItems?.assets.nodes, setAssetList]);

const handleAssetSelect = useCallback(
(id: string) => {
setSelectedAssetId(id);
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@ const AssetList: React.FC = () => {
handleAssetsReload,
handleNavigateToAsset,
handleAssetTableChange,
} = useHooks();
} = useHooks(true);

return (
<AssetListBody
Original file line number Diff line number Diff line change
@@ -80,7 +80,7 @@ const ContentDetails: React.FC = () => {
pageSize,
handleAssetTableChange,
handleGetAsset,
} = useAssetHooks();
} = useAssetHooks(false);

return (
<ContentDetailsMolecule
105 changes: 60 additions & 45 deletions web/src/components/organisms/Project/Content/ContentList/hooks.ts
Original file line number Diff line number Diff line change
@@ -4,7 +4,12 @@ import { useNavigate, useParams } from "react-router-dom";
import Notification from "@reearth-cms/components/atoms/Notification";
import { renderField } from "@reearth-cms/components/molecules/Content/RenderField";
import { ExtendedColumns } from "@reearth-cms/components/molecules/Content/Table/types";
import { ContentTableField, ItemStatus } from "@reearth-cms/components/molecules/Content/types";
import {
ContentTableField,
Item,
ItemStatus,
ItemField,
} from "@reearth-cms/components/molecules/Content/types";
import { Request } from "@reearth-cms/components/molecules/Request/types";
import {
AndConditionInput,
@@ -193,6 +198,57 @@ export default () => {
[createNewItem, currentModel, data?.searchItem.nodes, t, updateItemMutation],
);

const fieldValueGet = useCallback((field: ItemField, item: Item) => {
if (field.type === "Asset") {
if (Array.isArray(field.value)) {
if (field.value.length > 0) {
return field.value.map(value =>
fileName((item?.assets as GQLAsset[])?.find(asset => asset?.id === value)?.url),
);
} else {
return null;
}
} else {
return fileName(
(item?.assets as GQLAsset[])?.find(asset => asset?.id === field.value)?.url,
);
}
} else {
if (field.type === "Reference") {
return item.referencedItems?.find(ref => ref.id === field.value)?.title ?? "";
} else {
if (Array.isArray(field.value) && field.value.length > 0) {
return field.value.map(v => "" + v);
} else {
return field.value === null ? null : "" + field.value;
}
}
}
}, []);

const fieldsGet = useCallback(
(item: Item) => {
const result: { [key: string]: any } = {};
item?.fields?.map(field => {
result[field.schemaFieldId] = fieldValueGet(field, item);
});
return result;
},
[fieldValueGet],
);

const metadataGet = useCallback((fields?: ItemField[]) => {
const result: { [key: string]: any } = {};
fields?.forEach(field => {
if (Array.isArray(field.value) && field.value.length > 0) {
result[field.schemaFieldId] = field.value.map(v => "" + v);
} else {
result[field.schemaFieldId] = field.value === null ? null : "" + field.value;
}
});
return result;
}, []);

const contentTableFields: ContentTableField[] | undefined = useMemo(() => {
return data?.searchItem.nodes
?.map(item =>
@@ -203,59 +259,18 @@ export default () => {
status: item.status as ItemStatus,
createdBy: item.createdBy?.name,
updatedBy: item.updatedBy?.name || "",
fields: item?.fields?.reduce(
(obj, field) =>
Object.assign(obj, {
[field.schemaFieldId]:
field.type === "Asset"
? Array.isArray(field.value)
? field.value
.map(value =>
fileName(
(item?.assets as GQLAsset[])?.find(asset => asset?.id === value)
?.url,
),
)
.join(", ")
: fileName(
(item?.assets as GQLAsset[])?.find(asset => asset?.id === field.value)
?.url,
)
: field.type === "Reference"
? item.referencedItems?.find(ref => ref.id === field.value)?.title ?? ""
: Array.isArray(field.value)
? field.value.length > 0
? field.value.map(v => "" + v)
: null
: field.value === null
? null
: "" + field.value,
}),
{},
),
fields: fieldsGet(item as unknown as Item),
comments: item.thread.comments.map(comment => convertComment(comment as GQLComment)),
createdAt: item.createdAt,
updatedAt: item.updatedAt,
metadata: item?.metadata?.fields?.reduce(
(obj, field) =>
Object.assign(obj, {
[field.schemaFieldId]: Array.isArray(field.value)
? field.value.length > 0
? field.value.map(v => "" + v)
: null
: field.value === null
? null
: "" + field.value,
}),
{},
),
metadata: metadataGet(item?.metadata?.fields as ItemField[] | undefined),
metadataId: item.metadata?.id,
version: item.metadata?.version,
}
: undefined,
)
.filter((contentTableField): contentTableField is ContentTableField => !!contentTableField);
}, [data?.searchItem.nodes]);
}, [data?.searchItem.nodes, fieldsGet, metadataGet]);

const contentTableColumns: ExtendedColumns[] | undefined = useMemo(() => {
if (!currentModel) return;
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@ const RequestDetails: React.FC = () => {
pageSize,
handleAssetTableChange,
handleGetAsset,
} = useAssetHooks();
} = useAssetHooks(false);

const { workspaceUserMembers, handleRequestUpdate } = useContentHooks();

2 changes: 1 addition & 1 deletion web/src/components/organisms/Project/Schema/index.tsx
Original file line number Diff line number Diff line change
@@ -34,7 +34,7 @@ const ProjectSchema: React.FC = () => {
pageSize,
handleAssetTableChange,
handleGetAsset,
} = useAssetHooks();
} = useAssetHooks(false);

const {
isModel,
Loading

0 comments on commit 793ae11

Please sign in to comment.