Skip to content

Commit

Permalink
When serializing nodes for links, only include small subset of data
Browse files Browse the repository at this point in the history
Previously, if an AppLink was rendered from a node, the entire node was
serialized. Since a node is a non-trivially large JSON structure, this
resulted in a lot of wasted serialization, as only a few pieces of
information are necessary to generate a link. As a result, pages that
rendered a non-trival amount of links (in this case, SectionHierarchy)
would be very laggy as the browser struggled to do all that
serialization.

This commit filters only those properties necessary to render a link:
`id`, `category`, `name`, and `in_taxon_label`.

(Note that this stretegy is already used in AssociationSummary.vue).

Fixes #912
  • Loading branch information
Patrick Golden committed Jan 21, 2025
1 parent f772fea commit 7f2715b
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 4 deletions.
12 changes: 11 additions & 1 deletion frontend/src/global/breadcrumbs.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
import { ref } from "vue";
import { pick } from "lodash";
import type { DirectionalAssociation, Node } from "@/api/model";
import { parse } from "@/util/object";

const breadcrumbKeys = ["id", "category", "name", "in_taxon_label"] as const;

export type BreadcrumbNode = Pick<Node, (typeof breadcrumbKeys)[number]>;

export type Breadcrumb = {
/** node we're coming from */
node: Partial<Node>;
node: BreadcrumbNode;
/** association between the previous node and the current node */
association: Partial<DirectionalAssociation>;
/**
Expand All @@ -15,6 +20,11 @@ export type Breadcrumb = {
noEntry?: boolean;
};

export function toBreadcrumbNode(node: Node) {
const obj: BreadcrumbNode = pick(node, breadcrumbKeys);
return obj;
}

/** breadcrumbs object for breadcrumbs section on node page */
export const breadcrumbs = ref<Breadcrumb[]>([]);

Expand Down
7 changes: 4 additions & 3 deletions frontend/src/pages/node/SectionHierarchy.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
:node="_class"
:breadcrumbs="[
{
node,
node: toBreadcrumbNode(node),
association: {
predicate: 'is super class of',
direction: AssociationDirectionEnum.incoming,
Expand All @@ -40,7 +40,7 @@

<!-- nodes that are "children" of node -->
<AppDetail
title="Sub-classes"
:title="`Sub-classes (${node.node_hierarchy?.sub_classes.length})`"
icon="angle-down"
:blank="!node.node_hierarchy?.sub_classes.length"
:full="true"
Expand All @@ -53,7 +53,7 @@
:node="_class"
:breadcrumbs="[
{
node,
node: toBreadcrumbNode(node),
association: { predicate: 'is sub class of' },
},
]"
Expand All @@ -69,6 +69,7 @@ import { AssociationDirectionEnum, type Node } from "@/api/model";
import AppDetail from "@/components/AppDetail.vue";
import AppDetails from "@/components/AppDetails.vue";
import AppNodeBadge from "@/components/AppNodeBadge.vue";
import { toBreadcrumbNode } from "@/global/breadcrumbs";

type Props = {
/** current node */
Expand Down

0 comments on commit 7f2715b

Please sign in to comment.