Graph Editable Attributes

To show editable fields on the UI, the server must send additional information when responding to the convert request.

The type for the convert response looks like this, with important properties expanded:

export declare interface AdapterConvertResponse {
  // ...

  graphs?: Graph[];

  // ...
}

export declare interface Graph {
  // ...

  nodes: GraphNode[];

  // ...
}

export declare interface GraphNode {
  // ...

  attrs?: EditableAttributeList;

  // ...
}

export interface EditableAttribute extends KeyValue {
  editable?: EditableAttributeTypes;
}

export type EditableAttributeList = EditableAttribute[];

The important part here is the EditableAttributeList, it tells information about the atributes of a GraphNode. When that information includes the editable property, it tells the UI to make those attributes editable.

Here is an example of how that looks like:

{
  "graphs": [
    {
      "id": "ttir-graph",
      "nodes": [
        {
          "id": "forward0",
          "label": "forward",
          "namespace": "",
          "subgraphIds": [],
          "attrs": [
            {
              "key": "function_type",
              "value": "(tensor<8x64x128xf32>, tensor<8x64x128xf32>) -> tensor<8x64x128xf32>"
            },
            {
              "key": "sym_name",
              "value": "\"forward\"",
              // Atribute is a editable using a value list
              "editable": {
                "input_type": "value_list",
                "options": [
                  "foo",
                  "bar",
                  "baz"
                ]
              }
            },
            {
              "key": "shape",
              "value": "[8, 64, 128]",
              // Attribute is editable using an integer list
              "editable": {
                "input_type": "int_list",
                "min_size": 1,
                "max_size": 3,
                "min_value": 0,
                "max_value": 128,
                "step": 32
              }
            }

            // ...
          ],
          "incomingEdges": [],
          "outputsMetadata": [],
          "inputsMetadata": [],
          "style": null
        }

        // ...
      ]
    }
  ]
}

Editable attribute types

Value list

If you want to display a list of value for the node attribute, you need to use the EditableValueListAttribute type when sending the editable property.

Here is the type:

export interface EditableValueListAttribute {
  input_type: 'value_list';
  options: string[];
}

The input_type property is fixed to value_list.

The options property is a list of strings containing the options to display. If the list doesn't include the current value of the node attribute, the current value will be added to the list.

Here is an example of the editable property:

{
  "input_type": "value_list",
  "options": [
    "foo",
    "bar",
    "baz"
  ]
}

Integer list

It you want to display a list of integers, you need to use the EditableIntAttribute type when sending the editable property.

Here is the type:

export interface EditableIntAttribute {
  input_type: 'int_list';
  min_size: number;
  max_size: number;
  min_value: number;
  max_value: number;
  step: number;
}

The input_type property is fixed to int_list.

The min_size and max_size properties define the number of integers on the list. If your list size is dynamic, set both to different numbers.

The min_value and max_value properties are used to define the range used by the numbers, for example, the number has to be in the 0 to 10 range.

The step property is used to define the how much to jump each time, for example, a step of 8 means it goes like this: 8, 16, 24, 32, etc.

Here is an example of the editable property:

{
  "input_type": "int_list",
  "min_size": 1,
  "max_size": 3,
  "min_value": 0,
  "max_value": 128,
  "step": 32
}

Grid

Similar to the integer list, the gird type allows showing numbers representing a grid. You need to use the EditableGridAttribute type when sending the editable property.

Here is the type:

export interface EditableGridAttribute {
  input_type: 'grid';
  separator?: string;
  min_value: number;
  max_value: number;
  step: number;
}

The input_type property is fixed to grid.

The separator property is the string to use when displaying the grid in the UI. It defaults to "x".

The min_value and max_value properties are used to define the range used by the numbers, for example, the number has to be in the 0 to 10 range.

The step property is used to define the how much to jump each time, for example, a step of 8 means it goes like this: 8, 16, 24, 32, etc.

Here is an example of the editable property:

{
  "input_type": "grid",
  "min_value": 0,
  "max_value": 8,
  "step": 4
}