Small UX stuff

etowahadams · Oct 31, 2024 · 8c1b04a · 8c1b04a
1 parent 8b688c0
commit 8c1b04a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 31 deletions.
diff --git a/viz/src/components/CustomSeqPlayground.tsx b/viz/src/components/CustomSeqPlayground.tsx
@@ -165,7 +165,7 @@ const CustomSeqPlayground = ({ feature }: CustomSeqPlaygroundProps) => {
       {/* Once we have SAE activations, display sequence and structure */}
       {customSeqActivations.length > 0 && (
         <>
-          <div className="overflow-x-auto" style={{ margin: 20 }}>
+          <div className="overflow-x-auto my-4">
             <SeqViewer
               seq={{
                 tokens_acts_list: customSeqActivations,
@@ -212,7 +212,7 @@ const CustomSeqPlayground = ({ feature }: CustomSeqPlaygroundProps) => {
 
             {steeredActivations.length > 0 && (
               <>
-                <div className="overflow-x-auto" style={{ margin: 20 }}>
+                <div className="overflow-x-auto my-4">
                   <SeqViewer
                     seq={{
                       tokens_acts_list: steeredActivations,

diff --git a/viz/src/components/CustomStructureViewer.tsx b/viz/src/components/CustomStructureViewer.tsx
@@ -206,21 +206,19 @@ const CustomStructureViewer = ({
     );
   }
   return (
-    <>
+    <div>
       {!error && (
-        <div style={{ padding: "16px" }}>
-          <div
-            id={viewerId}
-            style={{
-              width: "100%",
-              height: isMobile ? 300 : 400,
-            }}
-          />
-        </div>
+        <div
+          id={viewerId}
+          style={{
+            width: "100%",
+            height: isMobile ? 300 : 400,
+          }}
+        />
       )}
       {message && <small>{message}</small>}
       {error && <small className="text-red-500">{error}</small>}
-    </>
+    </div>
   );
 };
 

diff --git a/viz/src/components/SeqViewer.tsx b/viz/src/components/SeqViewer.tsx
@@ -1,7 +1,8 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { redColorMapHex, tokenToResidue } from "../utils";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { tokensToSequence } from "../utils";
+import { Copy, Check } from "lucide-react";
 
 export interface SeqFormat {
   dimension: number;
@@ -32,6 +33,7 @@ function getFirstNonZeroIndex(arr: Array<number>) {
  * This component takes in a SingleSeq and renders the sequence with the corresponding colors
  */
 const SeqViewer: React.FC<SeqViewerProps> = ({ seq }) => {
+  const [copied, setCopied] = useState(false);
   const maxValue = useMemo(() => {
     return Math.max(...seq.tokens_acts_list);
   }, [seq.tokens_acts_list]);
@@ -44,26 +46,18 @@ const SeqViewer: React.FC<SeqViewerProps> = ({ seq }) => {
 
   const copySequenceToClipboard = () => {
     navigator.clipboard.writeText(tokensToSequence(seq.tokens_list));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500); // Reset after 1.5 seconds
   };
 
   return (
-    <div className="inline-flex" style={{ cursor: "pointer" }}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="14"
-        height="14"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        onClick={copySequenceToClipboard}
-        style={{ marginRight: 4, position: "relative", top: "50%", transform: "translateY(40%)" }}
-      >
-        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-      </svg>
+    <div className="inline-flex" style={{ cursor: "pointer" }} onClick={copySequenceToClipboard}>
+      {copied ? (
+        <Check width={14} height={14} style={{ marginTop: 6, marginRight: 4, color: "green" }} />
+      ) : (
+        <Copy width={14} height={14} style={{ marginTop: 6, marginRight: 4 }} />
+      )}
+
       {startIdx > 0 && (
         <TooltipProvider delayDuration={100}>
           <Tooltip>