From eaaa7771248084b880335ca107f9a0bd714c31f0 Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:18:07 -0500
Subject: [PATCH 1/2] add popover to view info in node selector list

---
 .../textEditor/textEditorRow/NodeSelector.jsx | 33 +++++++++++++++++++
 .../textEditorRow/textEditorRow.css           |  5 +++
 2 files changed, 38 insertions(+)

diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx b/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx
index ccd7f924..c1bd5a10 100644
--- a/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx
+++ b/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx
@@ -5,6 +5,8 @@ import axios from 'axios';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import TextField from '@material-ui/core/TextField';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Tooltip from '@material-ui/core/Tooltip';
+import { withStyles } from '@material-ui/core';
 
 import AlertContext from '~/context/alert';
 import BiolinkContext from '~/context/biolink';
@@ -204,6 +206,7 @@ export default function NodeSelector({
       onOpen={() => toggleOpen(true)}
       onClose={() => toggleOpen(false)}
       onInputChange={(e, v) => updateInputText(v)}
+      renderOption={(props) => <Option {...props} />}
       renderInput={(params) => (
         <TextField
           {...params}
@@ -237,3 +240,33 @@ export default function NodeSelector({
     />
   );
 }
+
+const CustomTooltip = withStyles((theme) => ({
+  tooltip: {
+    fontSize: theme.typography.pxToRem(14),
+  },
+}))(Tooltip);
+
+function Option({ name, ids, categories }) {
+  return (
+    <CustomTooltip
+      interactive
+      arrow
+      title={(
+        <div className="node-option-tooltip-wrapper">
+          {Array.isArray(ids) && ids.length > 0 && (
+            <span>{ids[0]}</span>
+          )}
+          {Array.isArray(categories) && categories.length > 0 && (
+            <span>{categories[0]}</span>
+          )}
+        </div>
+      )}
+      placement="left"
+    >
+      <div>
+        { name }
+      </div>
+    </CustomTooltip>
+  );
+}
diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css b/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css
index 72c446a5..b8928316 100644
--- a/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css
+++ b/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css
@@ -4,4 +4,9 @@
 }
 .referenceNode > .nodeDropdown {
     background-color: #f2f2f2;
+}
+.node-option-tooltip-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
\ No newline at end of file

From 9b01e905068c68101ca44d084910e1127105c09b Mon Sep 17 00:00:00 2001
From: David Glymph <Woozl@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:57:38 -0500
Subject: [PATCH 2/2] add copy button for curie

---
 .../textEditor/textEditorRow/NodeSelector.jsx | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx b/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx
index c1bd5a10..02b8986f 100644
--- a/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx
+++ b/src/pages/queryBuilder/textEditor/textEditorRow/NodeSelector.jsx
@@ -5,6 +5,9 @@ import axios from 'axios';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import TextField from '@material-ui/core/TextField';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import IconButton from '@material-ui/core/IconButton';
+import FileCopy from '@material-ui/icons/FileCopy';
+import Check from '@material-ui/icons/Check';
 import Tooltip from '@material-ui/core/Tooltip';
 import { withStyles } from '@material-ui/core';
 
@@ -255,7 +258,10 @@ function Option({ name, ids, categories }) {
       title={(
         <div className="node-option-tooltip-wrapper">
           {Array.isArray(ids) && ids.length > 0 && (
-            <span>{ids[0]}</span>
+            <div>
+              <span>{ids[0]}</span>
+              <CopyButton textToCopy={ids[0]} />
+            </div>
           )}
           {Array.isArray(categories) && categories.length > 0 && (
             <span>{categories[0]}</span>
@@ -270,3 +276,27 @@ function Option({ name, ids, categories }) {
     </CustomTooltip>
   );
 }
+
+function CopyButton({ textToCopy }) {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const handleCopy = (e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(textToCopy);
+    setHasCopied(true);
+  };
+
+  if (
+    navigator.clipboard === 'undefined' ||
+    typeof navigator.clipboard.writeText !== 'function' ||
+    typeof textToCopy !== 'string'
+  ) {
+    return null;
+  }
+
+  return (
+    <IconButton color="inherit" size="small" onClick={handleCopy}>
+      { hasCopied ? <Check /> : <FileCopy /> }
+    </IconButton>
+  );
+}