Entities with many subclasses load super slowly

[kevinschaper]

example: http://dev.monarchinitiative.org/PATO:0000001

I'm not sure if this is a backend problem (something about the hierarchy code is silly, like making one request per subclass entity), or if it's a rendering problem (something in the AppNodeBadge is expensive?).

If there's lots of associations, but few subclasses, everything seems fine, so it does seem to be specific to the hierarchy API request or UI components.

[ptgolden]

It's a rendering issue. I'll check it out.

[ptgolden]

The biggest issue is (obviously) rendering all of the subclasses.

[ptgolden]

The bottleneck is happening in AppLink inside AppNodeBadge, in this component:

monarch-app/frontend/src/components/AppLink.vue

Lines 23 to 30 in 84dab5f

	<router-link
	v-else
	:to="{
	...routeTo,
	state: mapValues(state, (value) => stringify(value)),
	}"
	:replace="replace"
	>

[ptgolden]

The issue is that for every single AppLink, the breadcrumbs part of the state includes a reference to the (very large) entity with tons of subclasses, and it's getting stringified N times (where N is the number of rendered subclasses)

[ptgolden]

A further issue here is that the entire node is stored in the browser's history state. That can end up being quite a bit of data for nodes like this one.

The easiest solution here would be to only store a minimal amount of a node's information in the breadcrumb state. That is, the smallest representation of an entity that could be rendered by SectionBreadcrumbs. That component only renders the node as an AppNodeBadge, so that means having a representation that only includes the following elements:

• id
• category
• name
• label
• in_taxon_label
• info

[ptgolden]

Note that this is already done in the AssociationsSummary component:

monarch-app/frontend/src/pages/node/AssociationsSummary.vue

Lines 70 to 86 in 84dab5f

	export function getBreadcrumbs(
	node: Node,
	association: DirectionalAssociation,
	side: "subject" | "object",
	) {
	const subject = {
	id: association.subject,
	name: association.subject_label,
	category: association.subject_category,
	in_taxon_label: association.subject_taxon_label,
	};
	const object = {
	id: association.object,
	name: association.object_label,
	category: association.object_category,
	in_taxon_label: association.object_taxon_label,
	};

[sagehrke]

@ptgolden I am moving this to the January 2025 milestone. Please update it to a later date if you need more time.