fix(scene): only show selected tags overlay

awslabs · Nov 3, 2023 · 20b7c57 · 20b7c57
1 parent 7b25a13
commit 20b7c57
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 45 deletions.
diff --git a/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx b/...s/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
@@ -7,16 +7,7 @@ import { sceneComposerIdContext } from '../../../common/sceneComposerIdContext';
 import { applyDataBindingTemplate } from '../../../utils/dataBindingTemplateUtils';
 
 import { DataOverlayRows } from './DataOverlayRows';
-import {
-  tmAnnotationContainer,
-  tmArrow,
-  tmArrowInner,
-  tmArrowOuter,
-  tmCloseButton,
-  tmCloseButtonDiv,
-  tmContainer,
-  tmPanelContainer,
-} from './styles';
+import { tmAnnotationContainer, tmArrow, tmArrowInner, tmArrowOuter, tmContainer, tmPanelContainer } from './styles';
 
 export interface DataOverlayContainerProps {
   node: ISceneNodeInternal;
@@ -47,14 +38,20 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
   useEffect(() => {
     if (selectedSceneNodeRef === node.ref) {
       setVisible(true);
+    } else if (!isAnnotation && !componentVisible) {
+      setVisible(false);
     }
   }, [selectedSceneNodeRef, node.ref]);
 
   // Toggle visibility on view option change. Skip the first call to make sure the
   // isPinned config can keep panel open initially.
   useEffect(() => {
     if (initialVisibilitySkipped.current) {
-      setVisible(componentVisible);
+      if (!isAnnotation && selectedSceneNodeRef === node.ref) {
+        setVisible(true);
+      } else {
+        setVisible(componentVisible);
+      }
     }
     initialVisibilitySkipped.current = true;
   }, [componentVisible]);
@@ -92,28 +89,13 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
     [selectedSceneNodeRef, node.ref, onWidgetClick],
   );
 
-  const onClickCloseButton = useCallback(
-    (e) => {
-      setVisible(false);
-      e.stopPropagation();
-    },
-    [setVisible],
-  );
-
   return visible ? (
     <>
       <div
         ref={containerRef}
         onClick={onClickContainer}
         style={{ ...tmContainer, ...(isAnnotation ? tmAnnotationContainer : tmPanelContainer) }}
       >
-        {!isAnnotation && !componentVisible && (
-          <div style={tmCloseButtonDiv}>
-            <button style={tmCloseButton} onClick={onClickCloseButton}>
-              X
-            </button>
-          </div>
-        )}
         <DataOverlayRows component={component} />
         {subType == Component.DataOverlaySubType.OverlayPanel && (
           <div style={tmArrow}>

diff --git a/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayContainerSnap.spec.tsx.snap b/...fiber/DataOverlayComponent/__tests__/__snapshots__/DataOverlayContainerSnap.spec.tsx.snap
@@ -47,15 +47,6 @@ exports[`DataOverlayContainer should render with panel visible correctly when th
   <div
     style="overflow: auto; border-radius: 2px; box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5); padding-top: 12px; padding-bottom: 12px; width: 210px; min-height: 2em;"
   >
-    <div
-      style="float: right; margin-top: 8px; margin-right: 8px;"
-    >
-      <button
-        style="background-color: transparent; border-color: transparent; color: white;"
-      >
-        X
-      </button>
-    </div>
     <div
       data-testid="rows"
     >

diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/styles.ts
@@ -30,16 +30,6 @@ export const tmAnnotationContainer: CSSProperties = {
   paddingLeft: '12px',
   paddingRight: '12px',
 };
-export const tmCloseButtonDiv: CSSProperties = {
-  float: 'right',
-  marginTop: '8px',
-  marginRight: '8px',
-};
-export const tmCloseButton: CSSProperties = {
-  backgroundColor: 'transparent',
-  borderColor: 'transparent',
-  color: 'white',
-};
 
 // Overlay panel arrow
 export const tmArrow: CSSProperties = {