Merge branch 'main' into 184773092-scroll-row-values

src/components/app.scss

@@ -1,8 +1,9 @@
 .selectView {
   padding: 10px;
-
+  height: 100vh;
+
   .buttons {
     display: flex;
     gap: 5px;
   }
-}
+}

src/components/app.tsx

@@ -9,7 +9,7 @@ function App() {
   const {connected, selectedDataSet, dataSets, collections, items, interactiveState,
          updateInteractiveState: _updateInteractiveState,
          handleSelectDataSet: _handleSelectDataSet, handleUpdateAttributePosition,
-         handleAddCollection, handleAddAttribute, handleSetCollections
+         handleAddCollection, handleAddAttribute, handleSetCollections, handleSelectSelf
         } = useCodapState();
 
   const updateInteractiveState = useCallback((update: Partial<InteractiveState>) => {
@@ -29,6 +29,10 @@ function App() {
     updateInteractiveState({dataSetName});
   }, [_handleSelectDataSet, updateInteractiveState]);
 
+  const handleShowComponent = () => {
+    handleSelectSelf();
+  };
+
   const renderSelectView = () => {
     return (
       <div className={css.selectView}>
@@ -71,6 +75,7 @@ function App() {
           interactiveState={interactiveState}
           handleSelectDataSet={handleSelectDataSet}
           updateInteractiveState={updateInteractiveState}
+          handleShowComponent={handleShowComponent}
         />
       );
 
@@ -88,11 +93,16 @@ function App() {
           handleAddCollection={handleAddCollection}
           handleAddAttribute={handleAddAttribute}
           handleSetCollections={handleSetCollections}
+          handleShowComponent={handleShowComponent}
         />
       );
 
     default:
-      return renderSelectView();
+      return (
+        <div onClick={handleShowComponent}>
+          {renderSelectView()}
+        </div>
+      );
   }
 }
 

src/components/hierarchy-view/hierarchy.scss

@@ -1,3 +1,7 @@
+.hierarchyWrapper {
+  height: 100vh;
+}
+
 .hierarchy {
   display: flex;
   flex-direction: row;

src/components/hierarchy-view/hierarchy.tsx

@@ -24,11 +24,12 @@ interface IProps {
   handleAddCollection: (newCollectionName: string) => void
   handleAddAttribute: (collection: ICollection, newAttrName: string) => void,
   handleSetCollections: (collections: Array<ICollection>) => void
+  handleShowComponent: () => void
 }
 
 export const Hierarchy = (props: IProps) => {
   const {selectedDataSet, dataSets, collections, handleSelectDataSet, handleSetCollections,
-    handleUpdateAttributePosition, handleAddCollection, handleAddAttribute} = props;
+    handleUpdateAttributePosition, handleAddCollection, handleAddAttribute, handleShowComponent} = props;
 
   const {activeAttr, handleDragStart, handleDragOver, handleDragEnd} = useDragging({collections,
     handleSetCollections, handleUpdateAttributePosition});
@@ -44,7 +45,7 @@ export const Hierarchy = (props: IProps) => {
     };
 
     return (
-      <>
+      <div className={css.hierarchyWrapper} onClick={handleShowComponent}>
         <div className={css.hierarchy} style={{gap: CollectionGap}}>
         <DndContext
           collisionDetection={closestCorners}
@@ -76,7 +77,7 @@ export const Hierarchy = (props: IProps) => {
             {JSON.stringify(selectedDataSet, null, 2)}
           </div>
         }
-      </>
+      </div>
     );
   };
 

src/components/nested-table.scss

@@ -0,0 +1,3 @@
+.nestedTableWrapper {
+  height: 100vh;
+}

src/components/nested-table.tsx

@@ -6,6 +6,8 @@ import { Menu } from "./menu";
 import { LandscapeView } from "./landscape-view";
 import { FlatTable } from "./flat-table";
 
+import css from "./nested-table.scss";
+
 const portrait = "Portrait";
 const landscape = "Landscape";
 const none = "";
@@ -18,11 +20,12 @@ interface IProps {
   interactiveState: InteractiveState
   handleSelectDataSet: (e: React.ChangeEvent<HTMLSelectElement>) => void
   updateInteractiveState: (update: Partial<InteractiveState>) => void
+  handleShowComponent: () => void
 }
 
 export const NestedTable = (props: IProps) => {
   const {selectedDataSet, dataSets, collections, items, interactiveState,
-         handleSelectDataSet, updateInteractiveState} = props;
+         handleSelectDataSet, updateInteractiveState, handleShowComponent} = props;
   const [collectionClasses, setCollectionClasses] = useState<Array<ICollectionClass>>([]);
   const [paddingStyle, setPaddingStyle] = useState<Record<string, string>>({padding: "0px"});
 
@@ -127,7 +130,7 @@ export const NestedTable = (props: IProps) => {
   };
 
   return (
-    <div>
+    <div className={css.nestedTableWrapper} onClick={handleShowComponent}>
       <Menu
         dataSets={dataSets}
         collections={collections}

src/hooks/useCodapState.tsx

@@ -201,7 +201,12 @@ export const useCodapState = () => {
     setInteractiveState(newState);
   }, [interactiveState, setInteractiveState]);
 
+  const handleSelectSelf = async () => {
+    connect.selectSelf();
+  };
+
   return {
+    handleSelectSelf,
     dataSets,
     selectedDataSet,
     collections,

src/scripts/connect.js

@@ -175,6 +175,28 @@ export const connect = {
       await codapInterface.sendRequest(message);
     },
 
+
+  // Selects this component. In CODAP this will bring this component to the front.
+    selectSelf: async function () {
+      let myCODAPId = null;
+      const selectComponent = async function (id) {
+        return await codapInterface.sendRequest({
+            action: "notify",
+            resource:  `component[${id}]`,
+            values: {request: "select"}
+        });
+      }
+      if (myCODAPId == null) {
+           const r1 = await codapInterface.sendRequest({action: 'get', resource: 'interactiveFrame'});
+          if (r1.success) {
+              myCODAPId = r1.values.id;
+          }
+      }
+      if (myCODAPId != null) {
+          return await selectComponent(myCODAPId);
+      }
+    },
+
     iFrameDescriptor: {
       version: '0.0.1',
       name: 'multidata-plugin',