From 5d7e7832b8645d5e9d995bd8da1fa0be642ca5d1 Mon Sep 17 00:00:00 2001
From: Nicholas Larus-Stone <7347808+nlarusstone@users.noreply.github.com>
Date: Fri, 30 Jun 2023 16:22:35 -0400
Subject: [PATCH] Add documentation about how to instantiate a selection
 callback

---
 docs/selections.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/docs/selections.md b/docs/selections.md
index 1c79487..752628a 100644
--- a/docs/selections.md
+++ b/docs/selections.md
@@ -11,3 +11,35 @@ const ligandLoci = Structure.toStructureElementLoci(ligandData as any);
 plugin.managers.camera.focusLoci(ligandLoci);
 plugin.managers.interactivity.lociSelects.select({ loci: ligandLoci });
 ```
+
+## Selection callbacks
+If you want to subscribe to selection events (e.g. to change external state in your application based on a user selection), you can use: `plugin.behaviors.interaction.click.subscribe`
+
+Here's an example of passing in a React "set" function to update selected residue positions.
+```typescript
+import {
+  Structure,
+  StructureProperties,
+} from "molstar/lib/mol-model/structure"
+// setSelected is assumed to be a "set" function returned by useState
+// (selected: any[]) => void
+plugin.behaviors.interaction.click.subscribe(
+  (event: InteractivityManager.ClickEvent) => {
+    const selections = Array.from(
+      plugin.managers.structure.selection.entries.values()
+    );
+    // This bit can be customized to record any piece information you want
+    const localSelected: any[] = [];
+    for (const { structure } of selections) {
+      if (!structure) continue;
+      Structure.eachAtomicHierarchyElement(structure, {
+        residue: (loc) => {
+          const position = StructureProperties.residue.label_seq_id(loc);
+          localSelected.push({ position });
+        },
+      });
+    }
+    setSelected(localSelected);
+  }
+)
+```
\ No newline at end of file