Skip to content

Supply-tree page heading never renders (non-reactive var instead of ref) #108

Description

@NimeshaKahingala

What's happening

packages/front-end/pages/products/[id]/supplyTree.vue:26 declares:

var selectedOKHname : string;

as a plain, non-reactive module/setup-scope variable — not a Vue ref. It's assigned inside sendToSupplyGraphAI (line 53: selectedOKHname = selectedOkh.value.name;) and rendered in the template at line 159: <h1>{{ selectedOKHname }}</h1>.

Because it's a plain var, Vue's reactivity system never picks up the assignment, so the <h1> renders whatever selectedOKHname was at the component's first render (undefined/empty) and never updates, no matter how long the match request takes or what it returns.

Impact

The supply-tree page's heading is permanently blank — regardless of whether the OHM match call succeeds, fails, or is still loading.

Evidence

Confirmed via a standalone diagnostic script that clicked through to the page and waited well past any fetch/render delay — the heading stayed empty. Captured as the expected current behavior (not "fixed" to look correct) in packages/e2e/tests/main-workflow.spec.ts.

Likely fix

Change var selectedOKHname : string; to const selectedOKHname = ref<string>(""); (or fold it into the existing selectedOkh ref) and update the template binding to {{ selectedOKHname }} → {{ selectedOKHname.value }} is not needed in <template> (auto-unwrapped), just switch the declaration and the one assignment site to .value.

Tracked as a known issue in dev-docs/TESTING.md / AGENT.md.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions