From 0755850c8e7b1b4ef9e10e4f4a7bff5ae8438fd9 Mon Sep 17 00:00:00 2001
From: Dario Del Piano <dario@metacell.us>
Date: Fri, 8 May 2026 11:53:33 +0200
Subject: [PATCH] fixing term info buttons disabled if is class

---
 .../frontend/src/components/TermInfo.jsx         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx b/applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx
index 2892feb7..0cab883f 100644
--- a/applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx
+++ b/applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx
@@ -283,6 +283,7 @@ const TermInfo = ({ open, setOpen }) => {
   );
 
   const [termInfoData, setTermInfoData] = useState(data);
+  const isClass = !!termInfoData?.metadata?.IsClass;
   const [toggleReadMore, setToggleReadMore] = useState(false);
   const [currentOpenQuery, setCurrentOpenQuery] = useState(null);
   const [confirmationModal, setConfirmationModal] = useState({
@@ -895,7 +896,9 @@ const TermInfo = ({ open, setOpen }) => {
                     >
                       <div ref={popover}>
                         <Tooltip title={"Edit 3D Canvas Color"}>
+                          <span>
                           <Button
+                            disabled={isClass}
                             sx={{
                               width: 75,
                               height: "1.875rem",
@@ -929,6 +932,7 @@ const TermInfo = ({ open, setOpen }) => {
                             />
                             Edit
                           </Button>
+                          </span>
                         </Tooltip>
                         {displayColorPicker ? (
                           <ChromePicker
@@ -961,7 +965,7 @@ const TermInfo = ({ open, setOpen }) => {
                         <Tooltip
                           title={getInstance()?.visible ? "Hide" : "Show"}
                         >
-                          <Button onClick={() => handleVisibility()}>
+                          <Button disabled={isClass} onClick={() => handleVisibility()}>
                             {getInstance()?.visible ? <EyeOff /> : <Eye />}
                           </Button>
                         </Tooltip>
@@ -970,7 +974,7 @@ const TermInfo = ({ open, setOpen }) => {
                             getInstance()?.selected ? "Deselect" : "Select"
                           }
                         >
-                          <Button onClick={(event) => handleSelection(event)}>
+                          <Button disabled={isClass} onClick={(event) => handleSelection(event)}>
                             {getInstance()?.selected ? (
                               <SelectOff />
                             ) : (
@@ -979,7 +983,7 @@ const TermInfo = ({ open, setOpen }) => {
                           </Button>
                         </Tooltip>
                         <Tooltip title={"Focus on 3D Mesh"}>
-                          <Button onClick={(event) => handleFocus(event, true)}>
+                          <Button disabled={isClass} onClick={(event) => handleFocus(event, true)}>
                             <Target />
                           </Button>
                         </Tooltip>
@@ -990,7 +994,7 @@ const TermInfo = ({ open, setOpen }) => {
                               : "Show 3D Mesh"
                           }
                         >
-                          <Button onClick={() => handleMeshVisibility()}>
+                          <Button disabled={isClass} onClick={() => handleMeshVisibility()}>
                             {getInstance()?.visibleMesh ? (
                               <ArViewOff />
                             ) : (
@@ -1008,7 +1012,7 @@ const TermInfo = ({ open, setOpen }) => {
                                 : "Enable 3D Skeleton"
                             }
                           >
-                            <Button onClick={(event) => handleSkeleton(event)}>
+                            <Button disabled={isClass} onClick={(event) => handleSkeleton(event)}>
                               {getInstance()?.skeleton?.[SKELETON]?.visible ? (
                                 <SkeletonOff />
                               ) : (
@@ -1027,7 +1031,7 @@ const TermInfo = ({ open, setOpen }) => {
                                 : "Show 3D Cylinder Skeleton"
                             }
                           >
-                            <Button onClick={(event) => handleCylinder(event)}>
+                            <Button disabled={isClass} onClick={(event) => handleCylinder(event)}>
                               {getInstance()?.skeleton?.[CYLINDERS]?.visible ? (
                                 <CylinderOff id={SKELETON} />
                               ) : (