From 90169a1092596e51054be289689722eb2ed07062 Mon Sep 17 00:00:00 2001
From: Krishna Ravishankar <25255817+krsh732@users.noreply.github.com>
Date: Fri, 23 Dec 2022 12:14:50 -0500
Subject: [PATCH] Handle copy gesture for flame graph and stack chart (Fixes
 #3695)

---
 src/components/app/KeyboardShortcut.js        |  5 ++++
 src/components/flame-graph/FlameGraph.js      | 26 +++++++++++++++++++
 src/components/stack-chart/index.js           | 23 ++++++++++++++++
 .../KeyboardShortcut.test.js.snap             | 19 ++++++++++++++
 4 files changed, 73 insertions(+)

diff --git a/src/components/app/KeyboardShortcut.js b/src/components/app/KeyboardShortcut.js
index 30602fc26a..d310b8bfe5 100644
--- a/src/components/app/KeyboardShortcut.js
+++ b/src/components/app/KeyboardShortcut.js
@@ -186,6 +186,11 @@ export class KeyboardShortcut extends React.PureComponent<Props, State> {
             <Shortcut label="Move selection down" shortcut="ArrowDown" />
             <Shortcut label="Move selection left" shortcut="ArrowLeft" />
             <Shortcut label="Move selection right" shortcut="ArrowRight" />
+            <Shortcut
+              label="Copy call node label"
+              shortcut="ctrl,c"
+              macShortcut="cmd,c"
+            />
 
             <h2>Marker Table</h2>
             <Shortcut
diff --git a/src/components/flame-graph/FlameGraph.js b/src/components/flame-graph/FlameGraph.js
index af3fd081f1..91dac18d33 100644
--- a/src/components/flame-graph/FlameGraph.js
+++ b/src/components/flame-graph/FlameGraph.js
@@ -103,6 +103,14 @@ type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 class FlameGraphImpl extends React.PureComponent<Props> {
   _viewport: HTMLDivElement | null = null;
 
+  componentDidMount() {
+    document.addEventListener('copy', this._onCopy, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('copy', this._onCopy, false);
+  }
+
   _onSelectedCallNodeChange = (
     callNodeIndex: IndexIntoCallNodeTable | null
   ) => {
@@ -301,6 +309,24 @@ class FlameGraphImpl extends React.PureComponent<Props> {
     }
   };
 
+  _onCopy = (event: ClipboardEvent) => {
+    if (document.activeElement === this._viewport) {
+      event.preventDefault();
+      const {
+        callNodeInfo: { callNodeTable },
+        selectedCallNodeIndex,
+        thread,
+      } = this.props;
+      if (selectedCallNodeIndex !== null) {
+        const funcIndex = callNodeTable.func[selectedCallNodeIndex];
+        const funcName = thread.stringTable.getString(
+          thread.funcTable.name[funcIndex]
+        );
+        event.clipboardData.setData('text/plain', funcName);
+      }
+    }
+  };
+
   render() {
     const {
       thread,
diff --git a/src/components/stack-chart/index.js b/src/components/stack-chart/index.js
index 3ae0949c70..4b1d7e5e9c 100644
--- a/src/components/stack-chart/index.js
+++ b/src/components/stack-chart/index.js
@@ -158,10 +158,33 @@ class StackChartImpl extends React.PureComponent<Props> {
     handleCallNodeTransformShortcut(event, threadsKey, nodeIndex);
   };
 
+  _onCopy = (event: ClipboardEvent) => {
+    if (document.activeElement === this._viewport) {
+      event.preventDefault();
+      const {
+        callNodeInfo: { callNodeTable },
+        selectedCallNodeIndex,
+        thread,
+      } = this.props;
+      if (selectedCallNodeIndex !== null) {
+        const funcIndex = callNodeTable.func[selectedCallNodeIndex];
+        const funcName = thread.stringTable.getString(
+          thread.funcTable.name[funcIndex]
+        );
+        event.clipboardData.setData('text/plain', funcName);
+      }
+    }
+  };
+
   componentDidMount() {
+    document.addEventListener('copy', this._onCopy, false);
     this._focusViewport();
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('copy', this._onCopy, false);
+  }
+
   render() {
     const {
       thread,
diff --git a/src/test/components/__snapshots__/KeyboardShortcut.test.js.snap b/src/test/components/__snapshots__/KeyboardShortcut.test.js.snap
index db73498a83..048259aaa3 100644
--- a/src/test/components/__snapshots__/KeyboardShortcut.test.js.snap
+++ b/src/test/components/__snapshots__/KeyboardShortcut.test.js.snap
@@ -225,6 +225,25 @@ exports[`app/KeyboardShortcut matches the snapshot when open 1`] = `
               ArrowRight
             </kbd>
           </div>
+          <div
+            class="appKeyboardShortcutsRow"
+          >
+            <div
+              class="appKeyboardShortcutsLabel"
+            >
+              Copy call node label
+            </div>
+            <kbd
+              class="appKeyboardShortcutsShortcut"
+            >
+              ctrl
+            </kbd>
+            <kbd
+              class="appKeyboardShortcutsShortcut"
+            >
+              c
+            </kbd>
+          </div>
           <h2>
             Marker Table
           </h2>