use-coordination

Installation

npm install use-coordination

Demo

Coordinated Multiple Views

In this most basic example, the views are sliders, coordinated on a single property (their numeric value). Watch how the JSON representation updates in response to changes.

Coordination scope for slider1:

Coordination scope for slider2:

Coordination scope for slider3:

{
  "key": 1,
  "coordinationSpace": {
    "sliderValue": {
      "A": 0.5,
      "B": 0.75,
      "C": 0.25
    }
  },
  "viewCoordination": {
    "slider1": {
      "coordinationScopes": {
        "sliderValue": "A"
      }
    },
    "slider2": {
      "coordinationScopes": {
        "sliderValue": "B"
      }
    },
    "slider3": {
      "coordinationScopes": {
        "sliderValue": "C"
      }
    }
  }
}

Multiple view types

Different view types can be coordinated on the same set of coordination types. For example, both the slider views and the numeric text views are coordinated on the sliderValue coordination type below.

Coordination scope for view1:

Coordination scope for view2:

Coordination scope for view3:

Coordination scope for view4:

{
  "key": 1,
  "coordinationSpace": {
    "value": {
      "A": 0.5,
      "B": 0.75,
      "C": 0.25,
      "D": 0.1
    }
  },
  "viewCoordination": {
    "view1": {
      "coordinationScopes": {
        "value": "A"
      }
    },
    "view2": {
      "coordinationScopes": {
        "value": "A"
      }
    },
    "view3": {
      "coordinationScopes": {
        "value": "B"
      }
    },
    "view4": {
      "coordinationScopes": {
        "value": "B"
      }
    }
  }
}

Multiple coordination types

Views can be coordinated on multiple coordination types. For example, these "colorful slider" views support both a numeric value and an RGB color array.

value scope for view1: color scope for view1:

value scope for view2: color scope for view2:

value scope for view3: color scope for view3:

{
  "key": 1,
  "coordinationSpace": {
    "value": {
      "A": 0.5,
      "B": 0.75,
      "C": 0.25
    },
    "color": {
      "A": [
        255,
        0,
        0
      ],
      "B": [
        0,
        255,
        0
      ],
      "C": [
        0,
        0,
        255
      ]
    }
  },
  "viewCoordination": {
    "view1": {
      "coordinationScopes": {
        "value": "A",
        "color": "A"
      }
    },
    "view2": {
      "coordinationScopes": {
        "value": "B",
        "color": "B"
      }
    },
    "view3": {
      "coordinationScopes": {
        "value": "C",
        "color": "C"
      }
    }
  }
}

Meta-coordination

We introduce the concept of meta-coordination, i.e., storage of view--coordination scope mappings in the coordination space itself.

Meta-scope for slider1: sliderValue scope for meta-scope A:

Meta-scope for slider2: sliderValue scope for meta-scope B:

Meta-scope for slider3: sliderValue scope for meta-scope C:

{
  "key": 1,
  "coordinationSpace": {
    "sliderValue": {
      "A": 0.5,
      "B": 0.75,
      "C": 0.25
    },
    "metaCoordinationScopes": {
      "A": {
        "sliderValue": "A"
      },
      "B": {
        "sliderValue": "B"
      },
      "C": {
        "sliderValue": "C"
      }
    }
  },
  "viewCoordination": {
    "slider1": {
      "coordinationScopes": {
        "metaCoordinationScopes": "A"
      }
    },
    "slider2": {
      "coordinationScopes": {
        "metaCoordinationScopes": "B"
      }
    },
    "slider3": {
      "coordinationScopes": {
        "metaCoordinationScopes": "C"
      }
    }
  }
}

Multi-level coordination

We introduce the concept of multi-level coordination. This enables using a hierarchy of coordination scope mappings, while retaining access to the most fine-grained level of coordination. In this example, views 4, 5, and 6 are coordinated directly on the channelValues, while views 1, 2, and 3 are coordinated on arrays of channels.

{
  "key": 1,
  "coordinationSpace": {
    "channel": {
      "R": "__dummy__",
      "G": "__dummy__",
      "B": "__dummy__"
    },
    "channelValue": {
      "X": 128,
      "Y": 128,
      "Z": 255
    }
  },
  "viewCoordination": {
    "view1": {
      "coordinationScopes": {
        "channel": [
          "R",
          "G",
          "B"
        ]
      },
      "coordinationScopesBy": {
        "channel": {
          "channelValue": {
            "R": "X",
            "G": "Y",
            "B": "Z"
          }
        }
      }
    },
    "view2": {
      "coordinationScopes": {
        "channel": [
          "R",
          "G",
          "B"
        ]
      },
      "coordinationScopesBy": {
        "channel": {
          "channelValue": {
            "R": "X",
            "G": "Y",
            "B": "Z"
          }
        }
      }
    },
    "view3": {
      "coordinationScopes": {
        "channel": [
          "R",
          "G",
          "B"
        ]
      },
      "coordinationScopesBy": {
        "channel": {
          "channelValue": {
            "R": "X",
            "G": "Y",
            "B": "Z"
          }
        }
      }
    },
    "view4": {
      "coordinationScopes": {
        "channelValue": "X"
      }
    },
    "view5": {
      "coordinationScopes": {
        "channelValue": "Y"
      }
    },
    "view6": {
      "coordinationScopes": {
        "channelValue": "Z"
      }
    }
  }
}

Multi-level coordination and meta-coordination

Multi-level coordination works well with meta-coordination. We can store both the coordinationScopes and the coordinationScopesBy mappings in the coordination space.

{
  "key": 1,
  "coordinationSpace": {
    "channel": {
      "R": "__dummy__",
      "G": "__dummy__",
      "B": "__dummy__"
    },
    "channelValue": {
      "X": 128,
      "Y": 128,
      "Z": 255
    },
    "metaCoordinationScopes": {
      "A": {
        "channel": [
          "R",
          "G",
          "B"
        ]
      },
      "B": {
        "channelValue": "X"
      },
      "C": {
        "channelValue": "Y"
      },
      "D": {
        "channelValue": "Z"
      }
    },
    "metaCoordinationScopesBy": {
      "A": {
        "channel": {
          "channelValue": {
            "R": "X",
            "G": "Y",
            "B": "Z"
          }
        }
      }
    }
  },
  "viewCoordination": {
    "view1": {
      "coordinationScopes": {
        "metaCoordinationScopes": [
          "A"
        ],
        "metaCoordinationScopesBy": [
          "A"
        ]
      }
    },
    "view2": {
      "coordinationScopes": {
        "metaCoordinationScopes": [
          "A"
        ],
        "metaCoordinationScopesBy": [
          "A"
        ]
      }
    },
    "view3": {
      "coordinationScopes": {
        "metaCoordinationScopes": [
          "A"
        ],
        "metaCoordinationScopesBy": [
          "A"
        ]
      }
    },
    "view4": {
      "coordinationScopes": {
        "metaCoordinationScopes": [
          "B"
        ]
      }
    },
    "view5": {
      "coordinationScopes": {
        "metaCoordinationScopes": [
          "C"
        ]
      }
    },
    "view6": {
      "coordinationScopes": {
        "metaCoordinationScopes": [
          "D"
        ]
      }
    }
  }
}