Show which panels files and resources are attached to.

src/components/AttachedToComponent.js

@@ -0,0 +1,53 @@
+import { Component, $$, domHelpers } from 'substance'
+import getLabel from './_getLabel'
+
+export default class AttachedToComponent extends Component {
+  constructor (...args) {
+    super(...args)
+
+    this._relationshipIndex = this.props.document.getIndex('relationships')
+    this._lastVersion = this._relationshipIndex.sha
+  }
+
+  didMount () {
+    this.context.editorState.addObserver(['document'], this._onDocumentChange, this, { stage: 'render' })
+  }
+
+  dispose () {
+    this.context.editorState.off(this)
+  }
+
+  render () {
+    const { document, nodeId } = this.props
+    const relationships = Array.from(this._relationshipIndex.get(nodeId))
+    const el = $$('div', { class: 'sc-attached-to' })
+    if (relationships.length > 0) {
+      const items = relationships.map(targetId => {
+        // ATTENTION: this assumes that we have ony Figure panels where files are attached to
+        const target = document.get(targetId)
+        const targetLabel = `Panel ${getLabel(target)}`
+        return { id: targetId, label: targetLabel }
+      })
+      if (items.length > 1) {
+        items.sort((a, b) => a.label.localeCompare(b.label))
+      }
+      el.append($$('span', { class: 'se-label' }, 'Attached to: '))
+      for (const item of items) {
+        el.append(
+          $$('button', { class: 'se-panel-link' }, item.label).on('click', (e) => {
+            domHelpers.stopAndPrevent(e)
+            this.context.api.selectItem(item.id)
+          }).ref(item.id)
+        )
+      }
+    }
+    return el
+  }
+
+  _onDocumentChange () {
+    if (this._relationshipIndex.sha !== this._lastVersion) {
+      this._lastVersion = this._relationshipIndex.sha
+      this.rerender()
+    }
+  }
+}

src/components/FileComponent.js

@@ -1,6 +1,7 @@
-import { SelectableNodeComponent, $$, renderProperty, domHelpers } from 'substance'
+import { SelectableNodeComponent, $$, renderProperty, domHelpers, HorizontalStack } from 'substance'
 import Section from './Section'
 import getLabel from './_getLabel'
+import AttachedToComponent from './AttachedToComponent'
 
 export default class FileComponent extends SelectableNodeComponent {
   didMount () {
@@ -38,6 +39,10 @@ export default class FileComponent extends SelectableNodeComponent {
       )
     )
 
+    el.append(
+      $$(AttachedToComponent, { document, nodeId: node.id })
+    )
+
     el.on('mousedown', this._onMousedown)
 
     return el

src/components/ResourceComponent.js

@@ -1,6 +1,7 @@
 import { SelectableNodeComponent, $$, renderProperty, domHelpers } from 'substance'
 import Section from './Section'
 import getLabel from './_getLabel'
+import AttachedToComponent from './AttachedToComponent'
 
 export default class ResourceComponent extends SelectableNodeComponent {
   render () {
@@ -31,6 +32,10 @@ export default class ResourceComponent extends SelectableNodeComponent {
       )
     )
 
+    el.append(
+      $$(AttachedToComponent, { document, nodeId: node.id })
+    )
+
     el.on('mousedown', this._onMousedown)
 
     return el

styles/_attached-to.scss

@@ -0,0 +1,13 @@
+.sc-attached-to {
+  @include ts-interface;
+  margin-top: var(--default-spacing);
+
+  button {
+    display: inline-block;
+    color: var(--link-color);
+  }
+
+  button + button::before {
+    content: ', '
+  }
+}

styles/index.css

@@ -13,6 +13,7 @@
 @import './_attach-resource-modal.scss';
 @import './_attached-file.scss';
 @import './_attached-resource.scss';
+@import './_attached-to.scss';
 @import './_author-modal.scss';
 @import './_authors-list.scss';
 @import './_button.scss';