Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add modal context to panel and operator views & fix zIndex of ArrowNavView #5052

Merged
merged 2 commits into from
Nov 6, 2024
Merged

add modal context to panel and operator views & fix zIndex of ArrowNavView #5052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f469f06
add modal context to panel and operator views
imanjra Nov 6, 2024
ab8a832
fix zIndex of ArrowNavView
imanjra Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/packages/core/src/plugins/OperatorIO/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ function OperatorIOComponent(props) {
initialData,
id,
shouldClearUseKeyStores,
...otherProps
} = props;
const ioSchema = operatorToIOSchema(schema, { isOutput: type === "output" });

Expand All @@ -29,6 +30,7 @@ function OperatorIOComponent(props) {
errors={getErrorsByPath(errors)}
initialData={initialData}
layout={layout}
otherProps={otherProps}
/>
);
}
Expand Down
10 changes: 7 additions & 3 deletions app/packages/core/src/plugins/SchemaIO/components/ArrowNavView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from "react";
import { ViewPropsType } from "../utils/types";

export default function ArrowNavView(props: ViewPropsType) {
const { schema } = props;
const { schema, otherProps } = props;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Update type definitions for better type safety.

The component's props type definition doesn't match its usage. The otherProps is implicitly typed as any, which bypasses TypeScript's type checking benefits.

Apply this diff to improve type safety:

-export default function ArrowNavView(props: ViewPropsType) {
+interface ArrowNavViewProps extends ViewPropsType {
+  otherProps: {
+    isModalPanel?: boolean;
+  };
+}
+
+export default function ArrowNavView(props: ArrowNavViewProps) {

Also, consider extracting the zIndex values as named constants:

+const Z_INDEX = {
+  DEFAULT: 1000,
+  MODAL: 1501,
+} as const;
+
 export default function ArrowNavView(props: ArrowNavViewProps) {
   // ...
-  const zIndex = isModalPanel ? 1501 : 1000;
+  const zIndex = isModalPanel ? Z_INDEX.MODAL : Z_INDEX.DEFAULT;

Also applies to: 25-26

const { view = {} } = schema;
const {
on_backward,
Expand All @@ -20,12 +20,16 @@ export default function ArrowNavView(props: ViewPropsType) {
} = view;
const panelId = usePanelId();
const handleClick = usePanelEvent();
const backwardStyles = positionBasedStyleBackward[position] || {};
const forwardStyles = positionBasedStyleForward[position] || {};
const { isModalPanel } = otherProps;
const zIndex = isModalPanel ? 1501 : 1000;

return (
<>
{backward && (
<Arrow
style={positionBasedStyleBackward[position]}
style={{ ...backwardStyles, zIndex }}
onClick={() => {
if (on_backward) {
handleClick(panelId, { operator: on_backward });
Expand All @@ -38,7 +42,7 @@ export default function ArrowNavView(props: ViewPropsType) {
{forward && (
<Arrow
$isRight
style={positionBasedStyleForward[position]}
style={{ ...forwardStyles, zIndex }}
onClick={() => {
if (on_forward) {
handleClick(panelId, { operator: on_forward });
Expand Down
1 change: 1 addition & 0 deletions app/packages/core/src/plugins/SchemaIO/utils/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export type ViewPropsType<Schema extends SchemaType = SchemaType> = {
ROWS: number;
};
autoFocused?: React.MutableRefObject<boolean>;
otherProps: { [key: string]: any };
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using a more specific type for otherProps.

Instead of using a loose index signature with any, consider creating a specific interface for the known additional properties. This will provide better type safety and IDE support.

-  otherProps: { [key: string]: any };
+  otherProps: {
+    isModalPanel?: boolean;
+    // Add other known properties here
+  };

Committable suggestion skipped: line range outside the PR's diff.

};

export type CustomComponentsType = {
Expand Down
47 changes: 26 additions & 21 deletions app/packages/operators/src/CustomPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
import { useTrackEvent } from "@fiftyone/analytics";

export function CustomPanel(props: CustomPanelProps) {
const { panelId, dimensions, panelName, panelLabel } = props;
const { panelId, dimensions, panelName, panelLabel, isModalPanel } = props;
const { height, width } = dimensions?.bounds || {};
const { count } = useActivePanelEventsCount(panelId);
const [_, setLoading] = usePanelLoading(panelId);
Expand All @@ -37,7 +37,7 @@
clearUseKeyStores(panelId);
trackEvent("close_panel", { panel: panelName });
});
}, []);

Check warning on line 40 in app/packages/operators/src/CustomPanel.tsx

View workflow job for this annotation

GitHub Actions / lint / eslint 

React Hook useEffect has missing dependencies: 'panelId', 'panelName', 'setPanelCloseEffect', and 'trackEvent'. Either include them or remove the dependency array

useEffect(() => {
setLoading(count > 0);
Expand Down Expand Up @@ -89,6 +89,7 @@
layout={{ height, width }}
onPathChange={handlePanelStatePathChange}
shouldClearUseKeyStores={false}
isModalPanel={isModalPanel}
/>
</DimensionRefresher>
</Box>
Expand All @@ -101,7 +102,7 @@

useEffect(() => {
dimensions?.refresh();
}, []);

Check warning on line 105 in app/packages/operators/src/CustomPanel.tsx

View workflow job for this annotation

GitHub Actions / lint / eslint 

React Hook useEffect has a missing dependency: 'dimensions'. Either include it or remove the dependency array

return children;
}
Expand All @@ -122,24 +123,28 @@
panel_name,
panel_label,
}) {
return ({ panelNode, dimensions }) => (
<CustomPanel
panelId={panelNode?.id}
onLoad={on_load}
onUnLoad={on_unload}
onChange={on_change}
onChangeCtx={on_change_ctx}
onChangeView={on_change_view}
onChangeDataset={on_change_dataset}
onChangeCurrentSample={on_change_current_sample}
onChangeSelected={on_change_selected}
onChangeSelectedLabels={on_change_selected_labels}
onChangeExtendedSelection={on_change_extended_selection}
onChangeGroupSlice={on_change_group_slice}
onChangeSpaces={on_change_spaces}
dimensions={dimensions}
panelName={panel_name}
panelLabel={panel_label}
/>
);
return (props) => {
const { dimensions, panelNode, isModalPanel } = props;
return (
<CustomPanel
panelId={panelNode?.id}
onLoad={on_load}
onUnLoad={on_unload}
onChange={on_change}
onChangeCtx={on_change_ctx}
onChangeView={on_change_view}
onChangeDataset={on_change_dataset}
onChangeCurrentSample={on_change_current_sample}
onChangeSelected={on_change_selected}
onChangeSelectedLabels={on_change_selected_labels}
onChangeExtendedSelection={on_change_extended_selection}
onChangeGroupSlice={on_change_group_slice}
onChangeSpaces={on_change_spaces}
dimensions={dimensions}
panelName={panel_name}
panelLabel={panel_label}
isModalPanel={isModalPanel}
/>
);
};
}
1 change: 1 addition & 0 deletions app/packages/operators/src/useCustomPanelHooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface CustomPanelProps {
dimensions: DimensionsType | null;
panelName?: string;
panelLabel?: string;
isModalPanel?: boolean;
}

export interface CustomPanelHooks {
Expand Down
1 change: 1 addition & 0 deletions app/packages/plugins/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,6 +382,7 @@ type PanelOptions = {
type PluginComponentProps<T> = T & {
panelNode?: unknown;
dimensions?: unknown;
isModalPanel?: boolean;
};

/**
Expand Down
1 change: 1 addition & 0 deletions app/packages/spaces/src/components/Panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ function Panel(props: PanelProps) {
key={shouldKeyComponent ? thisModalUniqueId : panelName}
panelNode={node}
dimensions={dimensions}
isModalPanel={isModalPanel}
/>
</PanelContext.Provider>
</StyledPanel>
Expand Down
Loading