Application api

Hyrrokkin Application API

The Application API is based on a JSON document that maps from node and configuration pages to locations in a web page on a CSS grid

{
  "topology_id": "example",
  "metadata": {
    "name": "Textgraph Example Application"
  },
  "layouts": [
    {
      "condition": {
        "min_width": 600
      },
      "gap": 10,
      "row-height": 500,
      "cells": {
        "div1": {
          "node_id": "n6ccd1b_0ccd73",
          "page_name":"settings",
          "x": 1,
          "y": 1,
          "w": 1,
          "h": 1
        },
        "div2": {
          "node_id": "n6cff07_982e5a",
          "page_name": "results",
          "x": 2,
          "y": 1,
          "w": 1,
          "h": 2
        },
        "div3": {
          "node_id":"n6cdf47_ef65e2",
          "page_name": "settings",
          "x": 1,
          "y": 2,
          "w": 1,
          "h": 1
        }
      }
    },
    {
      "condition": {
        "max_width": 600
      },
      "gap": 10,
      "row-height": 500,
      "cells": {
        "div1": {
          "node_id": "n6ccd1b_0ccd73",
          "page_name":"settings",
          "x": 1,
          "y": 1,
          "w": 1,
          "h": 1
        },
        "div2": {
          "node_id":"n6cdf47_ef65e2",
          "page_name": "settings",
          "x": 1,
          "y": 3,
          "w": 1,
          "h": 1
        },
        "div3": {
          "node_id": "n6cff07_982e5a",
          "page_name": "results",
          "x": 1,
          "y": 2,
          "w": 1,
          "h": 1
        }
      }
    }
  ]
}

The first part of the document defines the topology upon which the application is based, and a metadata section which should specify a value for name.

{
    "topology_id": "example",
    "metadata": {
        "name": "Textgraph Example Application"
    },
    ...
}

The remainder of the document specifies one or more layouts

{
    ...
    "layouts": [
        {
          "condition": {
            "min_width": 600
          },
          "gap": 10,
          "row-height": 500,
          "cells": {
             ...
          }
        },
        ...
    ]
}      

Within each layout a condition section specifies one or both of min_width or max_width as pixels. When an application is opened, the first layer where the condition on the screen width is satisfied is rendered. If the window is resized, a different layout may be rendered if it's condition becomes satisfied.

The gap value specifies the gap to use between grid cells and the row-height specifies the height of a grid cell.

The cells section identifies one or more node or configuration pages and maps them to a x,y position and w(idth),h(eight) on the grid, where x, y, w and h are given in grid cells. The top left hand cell has position x=0 and y=0.

{
    ...
    "layouts": [
        {
          ...
            "cells": {
                "div1": {
                  "node_id": "n6ccd1b_0ccd73",
                  "page_name":"settings",
                  "x": 1,
                  "y": 1,
                  "w": 1,
                  "h": 1
                },
                ...
            }
        },
        ...
    ]
}

Each cell also specifies a node_id or a package_id and a valid page_name for the type of node or package configuration.