Made suggested changes

Author: Gauss-Taylor-Euler

packages/base/src/index.ts

@@ -8,8 +8,8 @@ export * from './icons';
 export * from './mainview';
 export * from './menus';
 export * from './panelview';
-export * from './stacBrowser';
 export * from './store';
+export * from './stacBrowser';
 export * from './toolbar';
 export * from './tools';
 export * from './types';

packages/base/src/mainview/mainView.tsx

@@ -93,7 +93,7 @@ import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
-import { LeftPanelComponent, RightPanelComponent } from '../panelview';
+import { LeftPanel, RightPanel } from '../panelview';
 
 type OlLayerTypes =
   | TileLayer
@@ -2234,18 +2234,18 @@ export class MainView extends React.Component<IProps, IStates> {
         </div>
 
         {this._state && (
-          <LeftPanelComponent
+          <LeftPanel
             model={this._model}
             commands={this._mainViewModel.commands}
             state={this._state}
-          ></LeftPanelComponent>
+          ></LeftPanel>
         )}
         {this._formSchemaRegistry && this._annotationModel && (
-          <RightPanelComponent
+          <RightPanel
             model={this._model}
             formSchemaRegistry={this._formSchemaRegistry}
             annotationModel={this._annotationModel}
-          ></RightPanelComponent>
+          ></RightPanel>
         )}
       </>
     );

packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx

@@ -13,13 +13,14 @@ interface IIdentifyComponentProps {
   model: IJupyterGISModel;
 }
 
-export const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
+export const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
+  model,
+}) => {
   const [features, setFeatures] = useState<IDict<any>>();
   const [visibleFeatures, setVisibleFeatures] = useState<IDict<any>>({
     0: true,
   });
   const [remoteUser, setRemoteUser] = useState<User.IIdentity | null>(null);
-  const jgisModel = options.model;
 
   const featuresRef = useRef(features);
 
@@ -34,7 +35,7 @@ export const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
       sender: IJupyterGISModel,
       clients: Map<number, IJupyterGISClientState>,
     ) => {
-      const remoteUserId = jgisModel?.localState?.remoteUser;
+      const remoteUserId = model?.localState?.remoteUser;
 
       // If following a collaborator
       if (remoteUserId) {
@@ -50,34 +51,30 @@ export const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
       }
 
       // If not following a collaborator
-      const identifiedFeatures =
-        jgisModel?.localState?.identifiedFeatures?.value;
+      const identifiedFeatures = model?.localState?.identifiedFeatures?.value;
 
       if (!identifiedFeatures) {
         setFeatures({});
         return;
       }
 
-      if (
-        jgisModel.isIdentifying &&
-        featuresRef.current !== identifiedFeatures
-      ) {
+      if (model.isIdentifying && featuresRef.current !== identifiedFeatures) {
         setFeatures(identifiedFeatures);
       }
     };
 
-    jgisModel?.clientStateChanged.connect(handleClientStateChanged);
+    model?.clientStateChanged.connect(handleClientStateChanged);
 
     return () => {
-      jgisModel?.clientStateChanged.disconnect(handleClientStateChanged);
+      model?.clientStateChanged.disconnect(handleClientStateChanged);
     };
-  }, [jgisModel]);
+  }, [model]);
 
   const highlightFeatureOnMap = (feature: any) => {
-    jgisModel?.highlightFeatureSignal?.emit(feature);
+    model?.highlightFeatureSignal?.emit(feature);
 
     const geometry = feature.geometry || feature._geometry;
-    jgisModel?.flyToGeometrySignal?.emit(geometry);
+    model?.flyToGeometrySignal?.emit(geometry);
   };
 
   const toggleFeatureVisibility = (index: number) => {
@@ -91,7 +88,7 @@ export const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
     <div
       className="jgis-identify-wrapper"
       style={{
-        border: jgisModel?.localState?.remoteUser
+        border: model?.localState?.remoteUser
           ? `solid 3px ${remoteUser?.color}`
           : 'unset',
       }}

packages/base/src/panelview/components/layers.tsx

@@ -30,19 +30,13 @@ const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
 const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
 
-/**
- * Properties of the layers body component.
- */
 interface IBodyProps {
   model: IJupyterGISModel;
   commands: CommandRegistry;
   state: IStateDB;
 }
 
-/**
- * The body component of the panel.
- */
-export function LayersBodyComponent(props: IBodyProps): JSX.Element {
+export const LayersBodyComponent: React.FC<IBodyProps> = props => {
   const model = props.model;
   const id = UUID.uuid4();
 
@@ -57,15 +51,13 @@ export function LayersBodyComponent(props: IBodyProps): JSX.Element {
   };
 
   const _onDragOver = (e: React.DragEvent) => {
-    console.log('_onDragOver');
     e.stopPropagation();
     e.preventDefault();
     Private.dragInfo.dragOverElement = null;
     Private.dragInfo.dragOverPosition = null;
   };
 
   const _onDrop = (e: React.DragEvent) => {
-    console.log('_onDrop');
     Private.dragIndicator.style.display = 'none';
 
     if (model === undefined) {
@@ -247,7 +239,7 @@ export function LayersBodyComponent(props: IBodyProps): JSX.Element {
         )}
     </div>
   );
-}
+};
 
 /**
  * Properties of the layer group component.

packages/base/src/panelview/leftpanel.tsx

@@ -11,35 +11,25 @@ import {
   TabsList,
   TabsTrigger,
 } from '../shared/components/Tabs';
-import StacBrowser from '../stacBrowser/StacBrowser';
+import StacPanel from '../stacBrowser/components/StacPanel';
 import FilterComponent from './components/filter-panel/Filter';
 
-/**
- * Options of the left panel widget.
- */
-export interface ILeftPanelOptions {
-  model: IJupyterGISModel;
-  onSelect: ({ type, item, nodeId }: ILeftPanelClickHandlerParams) => void;
-}
-
-export interface ILayerPanelOptions extends ILeftPanelOptions {
-  state: IStateDB;
-}
-
 export interface ILeftPanelClickHandlerParams {
   type: SelectionType;
   item: string;
   nodeId?: string;
   event: ReactMouseEvent;
 }
 
-interface ILeftComponentProps {
+interface ILeftPanelProps {
   model: IJupyterGISModel;
   state: IStateDB;
   commands: CommandRegistry;
 }
 
-export const LeftPanelComponent = (options: ILeftComponentProps) => {
+export const LeftPanel: React.FC<ILeftPanelProps> = (
+  props: ILeftPanelProps,
+) => {
   const tabInfo = [
     { name: 'layers', title: 'Layers' },
     { name: 'stac', title: 'Stac Browser' },
@@ -73,16 +63,16 @@ export const LeftPanelComponent = (options: ILeftComponentProps) => {
         </TabsList>
         <TabsContent value="layers" className="jgis-panel-tab-content">
           <LayersBodyComponent
-            model={options.model}
-            commands={options.commands}
-            state={options.state}
+            model={props.model}
+            commands={props.commands}
+            state={props.state}
           ></LayersBodyComponent>
         </TabsContent>
         <TabsContent value="stac">
-          <StacBrowser model={options.model}></StacBrowser>
+          <StacPanel model={props.model}></StacPanel>
         </TabsContent>
         <TabsContent value="filters" className="jgis-panel-tab-content">
-          <FilterComponent model={options.model}></FilterComponent>,
+          <FilterComponent model={props.model}></FilterComponent>,
         </TabsContent>
       </PanelTabs>
     </div>

packages/base/src/panelview/objectproperties.tsx

@@ -3,7 +3,6 @@ import {
   IJupyterGISClientState,
   IJupyterGISModel,
 } from '@jupytergis/schema';
-import { Panel } from '@lumino/widgets';
 import * as React from 'react';
 import { v4 as uuid } from 'uuid';
 
@@ -120,13 +119,3 @@ export class ObjectPropertiesReact extends React.Component<IProps, IStates> {
     );
   }
 }
-
-export namespace ObjectProperties {
-  /**
-   * Instantiation options for `ObjectProperties`.
-   */
-  export interface IOptions extends Panel.IOptions {
-    model: IJupyterGISModel;
-    formSchemaRegistry: IJGISFormSchemaRegistry;
-  }
-}

packages/base/src/panelview/rightpanel.tsx

@@ -15,20 +15,20 @@ import {
   TabsTrigger,
 } from '../shared/components/Tabs';
 
-interface IRightComponentProps {
+interface IRightPanelProps {
   formSchemaRegistry: IJGISFormSchemaRegistry;
   annotationModel: IAnnotationModel;
   model: IJupyterGISModel;
 }
 
-export const RightPanelComponent = (options: IRightComponentProps) => {
+export const RightPanel: React.FC<IRightPanelProps> = props => {
   const [selectedObjectProperties, setSelectedObjectProperties] =
     React.useState(undefined);
 
   const tabInfo = [
     { name: 'objectProperties', title: 'Object Properties' },
     { name: 'annotations', title: 'Annotations' },
-    { name: 'identifyPanel', title: 'Identify Panels' },
+    { name: 'identifyPanel', title: 'Identify Features' },
   ];
 
   const [curTab, setCurTab] = React.useState<string | undefined>(
@@ -64,20 +64,18 @@ export const RightPanelComponent = (options: IRightComponentProps) => {
           <ObjectPropertiesReact
             setSelectedObject={setSelectedObjectProperties}
             selectedObject={selectedObjectProperties}
-            formSchemaRegistry={options.formSchemaRegistry}
-            model={options.model}
+            formSchemaRegistry={props.formSchemaRegistry}
+            model={props.model}
           />
         </TabsContent>
         <TabsContent value="annotations">
           <AnnotationsPanel
-            annotationModel={options.annotationModel}
-            jgisModel={options.model}
+            annotationModel={props.annotationModel}
+            jgisModel={props.model}
           ></AnnotationsPanel>
         </TabsContent>
         <TabsContent value="identifyPanel" className="jgis-panel-tab-content">
-          <IdentifyPanelComponent
-            model={options.model}
-          ></IdentifyPanelComponent>
+          <IdentifyPanelComponent model={props.model}></IdentifyPanelComponent>
         </TabsContent>
       </PanelTabs>
     </div>

packages/base/src/stacBrowser/StacBrowser.tsx

@@ -14,7 +14,7 @@ import StacPanelResults from './StacPanelResults';
 interface IStacViewProps {
   model?: IJupyterGISModel;
 }
-const StacPanelView = ({ model }: IStacViewProps) => {
+const StacPanel = ({ model }: IStacViewProps) => {
   const {
     filterState,
     filterSetters,
@@ -76,4 +76,4 @@ const StacPanelView = ({ model }: IStacViewProps) => {
   );
 };
 
-export default StacPanelView;
+export default StacPanel;

…stacBrowser/components/StacPanelView.tsx …src/stacBrowser/components/StacPanel.tsxpackages/base/src/stacBrowser/components/StacPanelView.tsx renamed to packages/base/src/stacBrowser/components/StacPanel.tsx packages/base/src/stacBrowser/components/StacPanelView.tsx renamed to packages/base/src/stacBrowser/components/StacPanel.tsx

@@ -1 +1 @@
-export * from './StacBrowser';
+export * from './components/StacPanel';