Structure

Structure defines the navigable graph—nodes and edges.

Why a Graph?

Unlike HTML's tree-based DOM, graphs let us express direct relationships. A user can jump from "Apple at Store A" directly to "Banana at Store A" without traversing parent containers.

Building a List Structure

Step 1: Define Nodes

const structure = {
  nodes: {
    _0: {
      id: '_0',
      data: { fruit: 'apple', store: 'a', cost: 3 },
      edges: ['_0-_1']
    },
    _1: {
      id: '_1',
      data: { fruit: 'banana', store: 'a', cost: 0.75 },
      edges: ['_0-_1', '_1-_2']
    },
    _2: {
      id: '_2',
      data: { fruit: 'apple', store: 'b', cost: 2.75 },
      edges: ['_1-_2', '_2-_3']
    },
    _3: {
      id: '_3',
      data: { fruit: 'banana', store: 'b', cost: 1.25 },
      edges: ['_2-_3']
    }
  },
  edges: {}
}

Step 2: Define Edges

edges: {
  '_0-_1': { source: '_0', target: '_1' },
  '_1-_2': { source: '_1', target: '_2' },
  '_2-_3': { source: '_2', target: '_3' }
}

Visualizing the Structure

Our structure is a linked list:

[_0] ←→ [_1] ←→ [_2] ←→ [_3]
apple/a  banana/a  apple/b  banana/b

What's Missing?

This structure defines what can be navigated, but not how. For that, we need navigation rules.

Next Steps

Continue to Input to add navigation rules.