<template>
  <div>
    <DatasetEditorModal />
    <Toolbar class="toolbar" />
    <div id="cards-right">
      <NodeDetailCard />
      <NodeSelectionCard />
      <LinkDetailCard />
    </div>
    <NodePopover />
    <NetworkGraph />
    <b-message
      v-if="errorMessage != ''"
      class="message"
      title="Error"
      type="is-danger"
      aria-close-label="Close message"
    >
      {{ errorMessage }}
    </b-message>
  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar.vue'
import NetworkGraph from '@/components/NetworkGraph.vue'
import NodeDetailCard from '@/components/Tools/NodeDetailCard.vue'
import NodeSelectionCard from '@/components/Tools/NodeSelectionCard.vue'
import NodePopover from '@/components/NetworkGraph/NodePopover.vue'
import LinkDetailCard from '@/components/Tools/LinkDetailCard.vue'
import DatasetEditorModal from '@/components/DatasetEditorModal.vue'

// @vuese
export default {
  name: 'Workspace',
  components: {
    Toolbar,
    NetworkGraph,
    NodeDetailCard,
    NodeSelectionCard,
    NodePopover,
    LinkDetailCard,
    DatasetEditorModal
  },

  data() {
    return {
      errorMessage: ''
    }
  },

  created() {
    this.$store.dispatch('data/fetchData')
  },

  errorCaptured(err, vm, info) {
    this.errorMessage =
      'Error: application crashed. Data may be in invalid state. See console logs for more: ' + info
  }
}
</script>

<style lang="sass" scoped>
@import _workspace

.toolbar
  position: absolute
  top: 0
  width: 100%
  height: $toolbar-height
  /*pointer-events: none*/
  margin: $workspace-margin

#cards-right
  width: $card-right-width
  position: absolute
  right: 30px
  top: 30px

.message
  position: absolute
  top: 20px
  right: 20px
  width: 30%
</style>
