Adds ability to bring component forward when clicked anywhere in the …

…component

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,9 +29,13 @@ function App() {
     updateInteractiveState({dataSetName});
   }, [_handleSelectDataSet, updateInteractiveState]);
 
+  const handleShowComponent = () => {
+    handleSelectSelf();
+  };
+
   const renderSelectView = () => {
     return (
-      <div className={css.selectView}>
+      <div className={css.selectView} onClick={handleShowComponent}>
         <p>Which MultiData view do you want to use?</p>
 
         <div className={css.buttons}>
@@ -71,6 +75,7 @@ function App() {
           interactiveState={interactiveState}
           handleSelectDataSet={handleSelectDataSet}
           updateInteractiveState={updateInteractiveState}
+          handleShowComponent={handleShowComponent}
         />
       );
 
@@ -88,6 +93,7 @@ function App() {
           handleAddCollection={handleAddCollection}
           handleAddAttribute={handleAddAttribute}
           handleSetCollections={handleSetCollections}
+          handleShowComponent={handleShowComponent}
         />
       );
 

src/components/flat-table.tsx

@@ -8,12 +8,13 @@ interface IFlatProps extends ITableProps {
 }
 
 export const FlatTable = (props: IFlatProps) => {
-  const {selectedDataSet, collections, collectionClasses, items, mapCellsFromValues, showHeaders} = props;
+  const {selectedDataSet, collections, collectionClasses, items, mapCellsFromValues, showHeaders,
+          handleShowComponent} = props;
   const collection = collections[0];
   const {className} = collectionClasses[0];
 
   return (
-    <table className={`${css.mainTable} ${css.flatTable} ${css[className]}}`}>
+    <table className={`${css.mainTable} ${css.flatTable} ${css[className]}}`} onClick={handleShowComponent}>
       <tbody>
         <tr className={css.mainHeader}>
           <th colSpan={items.length}>{selectedDataSet.title}</th>

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 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/landscape-view.tsx

@@ -5,7 +5,7 @@ import css from "./tables.scss";
 
 export const LandscapeView = (props: ITableProps) => {
   const {mapCellsFromValues, mapHeadersFromValues, showHeaders, collectionClasses,
-    getClassName, selectedDataSet, collections, getValueLength, paddingStyle} = props;
+    getClassName, selectedDataSet, collections, getValueLength, paddingStyle, handleShowComponent} = props;
 
   const renderNestedTable = (parentColl: ICollection) => {
     const firstRowValues = parentColl.cases.map(caseObj => caseObj.values);
@@ -95,7 +95,7 @@ export const LandscapeView = (props: ITableProps) => {
   };
 
   return (
-    <div>
+    <div onClick={handleShowComponent}>
       {collections.length && collectionClasses.length && renderTable()}
     </div>
   );

src/components/nested-table.tsx

@@ -18,11 +18,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"});
 
@@ -111,7 +112,7 @@ export const NestedTable = (props: IProps) => {
     const isNoHierarchy = collections.length === 1;
     const classesExist = collectionClasses.length > 0;
     const tableProps = {showHeaders: interactiveState.showHeaders, collectionClasses, collections, selectedDataSet,
-      getClassName, mapHeadersFromValues, mapCellsFromValues, getValueLength, paddingStyle};
+      getClassName, mapHeadersFromValues, mapCellsFromValues, getValueLength, paddingStyle, handleShowComponent};
     const flatProps = {...tableProps, items};
     if (isNoHierarchy && classesExist) {
       return <FlatTable {...flatProps}/>;

src/components/portrait-view.tsx

@@ -5,7 +5,7 @@ import css from "./tables.scss";
 
 export const PortraitView = (props: ITableProps) => {
   const {paddingStyle, mapCellsFromValues, mapHeadersFromValues, showHeaders, collectionClasses,
-    getClassName, selectedDataSet, collections, getValueLength} = props;
+    getClassName, selectedDataSet, collections, getValueLength, handleShowComponent} = props;
 
   const renderNestedTable = (parentColl: ICollection) => {
     const firstRowValues = parentColl.cases.map(caseObj => caseObj.values);
@@ -80,7 +80,7 @@ export const PortraitView = (props: ITableProps) => {
   };
 
   return (
-    <div>
+    <div onClick={handleShowComponent}>
       {collections.length && collectionClasses.length && renderTable()}
     </div>
   );

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',

src/types.tsx

@@ -59,6 +59,7 @@ export interface ITableProps {
   mapHeadersFromValues: (values: IValues) => void,
   getValueLength: (firstRow: Array<IValues>) => number
   paddingStyle: Record<string, string>
+  handleShowComponent: () => void
 }
 
 export interface IBoundingBox {