HydrographApp.vue

<template>
  <div>
    <CursorSlider />
    <GraphBrush />
    <div class="ts-legend-controls-container">
      <HydrographLegend
        :legend-marker-rows="legendMarkerRows"
        :layout="layout"
      />
      <div class="graph-controls-container">
        <GraphControls />
      </div>
    </div>
  </div>
</template>

<script>
import GraphBrush from './vue-components/graph-brush.vue';
import CursorSlider from './vue-components/cursor-slider.vue';
import HydrographLegend from './vue-components/hydrograph-legend.vue';
import GraphControls from './vue-components/graph-controls.vue';
import {useState} from 'redux-connect-vue';

import {getMainLayout} from './selectors/layout';
import {getLegendMarkerRows} from './selectors/legend-data';
export default {
  name: 'HydrographApp',
  components: {
    GraphBrush,
    CursorSlider,
    HydrographLegend,
    GraphControls
  },
  setup() {
    const state = useState({
      legendMarkerRows: getLegendMarkerRows,
      layout: (state) => getMainLayout(state)
    });

    return {
      ...state
    };
  }
};
</script>