fix(pointcloud): Fix size changed and init point cloud result

open-mmlab · Mar 27, 2023 · f940e42 · f940e42
1 parent cf2d147
commit f940e42
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 23 deletions.
diff --git a/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx b/packages/lb-components/src/components/pointCloudView/PointCloud3DView.tsx
@@ -131,9 +131,6 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
     }
   };
 
-  /**
-   * Listen for data changes.
-   */
   useEffect(() => {
     if (ref.current && currentData?.url) {
       let pointCloud = ptCtx.mainViewInstance;
@@ -156,8 +153,16 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
         });
         ptCtx.setMainViewInstance(pointCloud);
       }
+    }
+  }, [size]);
 
-      if (currentData.result) {
+  /**
+   * Listen for data changes.
+   */
+  useEffect(() => {
+    if (ref.current && currentData?.url) {
+      if (currentData.result && ptCtx.mainViewInstance) {
+        let pointCloud = ptCtx.mainViewInstance;
         const boxParamsList = PointCloudUtils.getBoxParamsFromResultList(currentData.result);
 
         // Add Init Box
@@ -175,7 +180,7 @@ const PointCloud3D: React.FC<IA2MapStateProps> = ({ currentData, config }) => {
         ptCtx.setPointCloudValid(jsonParser(currentData.result)?.valid);
       }
     }
-  }, [currentData, size]);
+  }, [currentData, ptCtx.mainViewInstance]);
 
   /**
    *  Observe selectedID and reset camera to target top-view

diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
@@ -1253,6 +1253,7 @@ $hotkey-container-padding: 7px;
 .#{$prefix}-annotated-attribute {
   width: 240px;
   background: white;
+  padding-bottom: 12px;
 
   &__popover .ant-popover-inner-content {
     padding: 0;

diff --git a/packages/lb-components/src/views/MainView/toolFooter/AnnotatedAttributes/index.tsx b/packages/lb-components/src/views/MainView/toolFooter/AnnotatedAttributes/index.tsx
@@ -1,6 +1,6 @@
 import { PointCloudContext } from '@/components/pointCloudView/PointCloudContext';
 import { Modal } from 'antd';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { stepConfigSelector } from '@/store/annotation/selectors';
 import { useSelector } from '@/store/ctx';
 import { i18n, IPointCloudConfig } from '@labelbee/lb-utils';
@@ -22,7 +22,6 @@ import FooterPopover from '../FooterPopover';
 
 const AnnotatedAttributesItem = ({ attribute }: { attribute: IInputList }) => {
   const pointCloudCtx = useContext(PointCloudContext);
-  const { t } = useTranslation();
   const {
     pointCloudBoxList,
     hideAttributes,
@@ -33,7 +32,7 @@ const AnnotatedAttributesItem = ({ attribute }: { attribute: IInputList }) => {
     reRender,
   } = pointCloudCtx;
 
-  const [expanded, setExpanded] = useState(false);
+  const [expanded, setExpanded] = useState(true);
 
   const { pushHistoryWithList } = useHistory();
 
@@ -102,26 +101,33 @@ const AnnotatedAttributesItem = ({ attribute }: { attribute: IInputList }) => {
       </div>
 
       {expanded &&
-        (pointCloudListForSpecAttribute.length > 0 ? (
-          pointCloudListForSpecAttribute.map((box) => {
-            return (
-              <div key={getBoxKey(box)} style={{ paddingLeft: 54 }}>
-                {`${getBoxID(box)}.${attribute.key}`}
-              </div>
-            );
-          })
-        ) : (
-          <div style={{ textAlign: 'center' }}>{t('NoData')}</div>
-        ))}
+        pointCloudListForSpecAttribute.map((box) => {
+          return (
+            <div key={getBoxKey(box)} style={{ paddingLeft: 54 }}>
+              {`${getBoxID(box)}.${attribute.key}`}
+            </div>
+          );
+        })}
     </>
   );
 };
 
 export const AnnotatedAttributesPanel = () => {
   const stepConfig: IPointCloudConfig = useSelector(stepConfigSelector);
-  const { attrPanelLayout, setAttrPanelLayout } = useContext(PointCloudContext);
+  const { attrPanelLayout, setAttrPanelLayout, pointCloudBoxList, polygonList } =
+    useContext(PointCloudContext);
   const { t } = useTranslation();
 
+  const existAttributes = useMemo(() => {
+    return [...pointCloudBoxList, ...polygonList].map((i) => i.attribute);
+  }, [pointCloudBoxList, polygonList]);
+
+  const displayAttrList = useMemo(() => {
+    return (stepConfig.attributeList as IInputList[]).filter((i) =>
+      existAttributes.includes(i.value),
+    );
+  }, [existAttributes]);
+
   return (
     <div className={getClassName('annotated-attribute')}>
       {attrPanelLayout ? (
@@ -161,9 +167,11 @@ export const AnnotatedAttributesPanel = () => {
       )}
 
       <div>
-        {stepConfig.attributeList.map((i) => (
-          <AnnotatedAttributesItem attribute={i} key={i.value} />
-        ))}
+        {displayAttrList.length > 0 ? (
+          displayAttrList.map((i) => <AnnotatedAttributesItem attribute={i} key={i.value} />)
+        ) : (
+          <div style={{ textAlign: 'center', height: 200, lineHeight: '200px' }}>{t('NoData')}</div>
+        )}
       </div>
     </div>
   );