From 27c3bf8682a50ae13e8a193f517ff8c554e189b9 Mon Sep 17 00:00:00 2001 From: Br2850 Date: Wed, 23 Oct 2024 00:43:18 -0600 Subject: [PATCH 01/11] add toastView to python panels --- .../components/src/components/Toast/Toast.tsx | 73 +++++++++++++------ .../plugins/SchemaIO/components/ToastView.tsx | 18 +++++ .../src/plugins/SchemaIO/components/index.ts | 1 + app/packages/operators/src/types.ts | 15 ++++ fiftyone/operators/types.py | 15 ++++ fiftyone/server/main.py | 8 +- 6 files changed, 105 insertions(+), 25 deletions(-) create mode 100644 app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx diff --git a/app/packages/components/src/components/Toast/Toast.tsx b/app/packages/components/src/components/Toast/Toast.tsx index c16c7ec733..29c799650b 100644 --- a/app/packages/components/src/components/Toast/Toast.tsx +++ b/app/packages/components/src/components/Toast/Toast.tsx @@ -2,12 +2,22 @@ import React from "react"; import { atom, useRecoilState } from "recoil"; import { Box, Snackbar, SnackbarContent } from "@mui/material"; -// Define types for the props interface ToastProps { message: React.ReactNode; - primary: (setOpen: React.Dispatch>) => React.ReactNode; - secondary: (setOpen: React.Dispatch>) => React.ReactNode; - duration?: number; // Optional duration, with a default value + primary: ( + setOpen: React.Dispatch> + ) => React.ReactNode; + secondary: ( + setOpen: React.Dispatch> + ) => React.ReactNode; + duration?: number; + layout?: { + vertical?: "top" | "bottom"; + horizontal?: "left" | "center" | "right"; + height?: number | string; + backgroundColor?: string; + color?: string; + }; } const toastStateAtom = atom({ @@ -15,41 +25,56 @@ const toastStateAtom = atom({ default: true, }); -const Toast: React.FC = ({message, primary, secondary, duration = 5000 }) => { - - const [open, setOpen] = useRecoilState(toastStateAtom); // State management for toast visibility +const Toast: React.FC = ({ + message, + primary, + secondary, + duration = 5000, + layout = {}, +}) => { + const [open, setOpen] = useRecoilState(toastStateAtom); - const handleClose = (event, reason) => { - if (reason === "clickaway") { - return; - } - setOpen(false); - }; + const handleClose = React.useCallback( + (event, reason) => { + if (reason === "clickaway") return; + setOpen(false); + }, + [setOpen] + ); - const action = ( -
- - {primary(setOpen)} {/* Pass setOpen to primary button */} - {secondary(setOpen)} {/* Pass setOpen to secondary button */} - -
+ const action = React.useMemo( + () => ( +
+ + {primary(setOpen)} + {secondary(setOpen)} + +
+ ), + [primary, secondary, setOpen] ); return ( ); -} +}; export default Toast; diff --git a/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx new file mode 100644 index 0000000000..52458d2d06 --- /dev/null +++ b/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import { Toast } from "@fiftyone/components"; + +export default function ToastView(props) { + const { schema } = props; + const { view = {} } = schema; + const { message, primary, secondary, duration, layout } = view; + + return ( + + ); +} diff --git a/app/packages/core/src/plugins/SchemaIO/components/index.ts b/app/packages/core/src/plugins/SchemaIO/components/index.ts index ed79e70f65..6e2e35e567 100644 --- a/app/packages/core/src/plugins/SchemaIO/components/index.ts +++ b/app/packages/core/src/plugins/SchemaIO/components/index.ts @@ -50,5 +50,6 @@ export { default as TabsView } from "./TabsView"; export { default as TagsView } from "./TagsView"; export { default as TextView } from "./TextView"; export { default as TextFieldView } from "./TextFieldView"; +export { default as ToastView } from "./ToastView"; export { default as TupleView } from "./TupleView"; export { default as UnsupportedView } from "./UnsupportedView"; diff --git a/app/packages/operators/src/types.ts b/app/packages/operators/src/types.ts index 1f8d1b414c..1051765ff2 100644 --- a/app/packages/operators/src/types.ts +++ b/app/packages/operators/src/types.ts @@ -1196,6 +1196,20 @@ export class ModalView extends Button { } } +/** + * Operator class for describing a ToastView {@link View} for an + * operator type. + */ +export class ToastView extends View { + constructor(options: ViewProps) { + super(options); + this.name = "ToastView"; + } + static fromJSON(json) { + return new ToastView(json); + } +} + /** * Places where you can have your operator placement rendered. */ @@ -1267,6 +1281,7 @@ const VIEWS = { LazyFieldView, PillBadgeView, ModalView, + ToastView, }; export function typeFromJSON({ name, ...rest }): ANY_TYPE { diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py index a0205ca1b7..5931dce8e8 100644 --- a/fiftyone/operators/types.py +++ b/fiftyone/operators/types.py @@ -1813,6 +1813,21 @@ def to_json(self): return {**super().to_json(), "severity": self.severity} +class ToastView(View): + """Displays a snackbar style toast element. + + Args: + message: the message to display + primary (None): the primary button text + secondary (None): the secondary button text + duration (None): the duration to stay on screen in milliseconds + layout (None): the layout of the toast + """ + + def __init__(self, **kwargs): + super().__init__(**kwargs) + + class CheckboxView(View): """Displays a checkbox. diff --git a/fiftyone/server/main.py b/fiftyone/server/main.py index 13bd357d5e..4fbc65a1cb 100644 --- a/fiftyone/server/main.py +++ b/fiftyone/server/main.py @@ -21,10 +21,12 @@ import fiftyone as fo import fiftyone.constants as foc +import fiftyone.zoo as foz from fiftyone.server.app import app from fiftyone.server.events import set_port + DEBUG_LOGGING = fo.config.logging_level == "DEBUG" if DEBUG_LOGGING: @@ -47,4 +49,8 @@ if args.clean_start: fo.delete_datasets("*") - asyncio.run(serve(app, config), debug=DEBUG_LOGGING) + dataset_directory = "." + dataset = foz.load_zoo_dataset("quickstart") + + +asyncio.run(serve(app, config), debug=DEBUG_LOGGING) From a37b4f802a28532029d82f0ec07cb4f279faa463 Mon Sep 17 00:00:00 2001 From: Br2850 Date: Wed, 23 Oct 2024 01:54:23 -0600 Subject: [PATCH 02/11] top and bottom positioning --- .../components/src/components/Toast/Toast.tsx | 76 ++++++++++++------- .../plugins/SchemaIO/components/ToastView.tsx | 12 +-- fiftyone/operators/types.py | 16 +++- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/app/packages/components/src/components/Toast/Toast.tsx b/app/packages/components/src/components/Toast/Toast.tsx index 29c799650b..ca5f509a49 100644 --- a/app/packages/components/src/components/Toast/Toast.tsx +++ b/app/packages/components/src/components/Toast/Toast.tsx @@ -4,17 +4,15 @@ import { Box, Snackbar, SnackbarContent } from "@mui/material"; interface ToastProps { message: React.ReactNode; - primary: ( - setOpen: React.Dispatch> - ) => React.ReactNode; - secondary: ( - setOpen: React.Dispatch> - ) => React.ReactNode; + primary?: any; + secondary?: any; duration?: number; layout?: { vertical?: "top" | "bottom"; horizontal?: "left" | "center" | "right"; height?: number | string; + top?: number | string; + bottom?: number | string; backgroundColor?: string; color?: string; }; @@ -32,45 +30,65 @@ const Toast: React.FC = ({ duration = 5000, layout = {}, }) => { - const [open, setOpen] = useRecoilState(toastStateAtom); + const snackbarStyle = { + height: layout?.height || 5, + ...(layout?.top && { + top: { + xs: layout.top, + sm: layout.top, + md: layout.top, + lg: layout.top, + xl: layout.top, + }, + }), + ...(layout?.bottom && { + bottom: { + xs: layout.bottom, + sm: layout.bottom, + md: layout.bottom, + lg: layout.bottom, + xl: layout.bottom, + }, + }), + }; - const handleClose = React.useCallback( - (event, reason) => { - if (reason === "clickaway") return; - setOpen(false); - }, - [setOpen] - ); + const [open, setOpen] = useRecoilState(toastStateAtom); // State management for toast visibility + + const handleClose = (event, reason) => { + if (reason === "clickaway") { + return; + } + setOpen(false); + }; - const action = React.useMemo( - () => ( -
- - {primary(setOpen)} - {secondary(setOpen)} - -
- ), - [primary, secondary, setOpen] + const action = ( +
+ + {/* note: Not implemented within Python Panels context */} + {primary && primary(setOpen)} {/* Pass setOpen to primary button */} + {secondary && secondary(setOpen)}{" "} + {/* Pass setOpen to secondary button */} + +
); return ( diff --git a/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx b/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx index 52458d2d06..b5a8708cd5 100644 --- a/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx +++ b/app/packages/core/src/plugins/SchemaIO/components/ToastView.tsx @@ -4,15 +4,7 @@ import { Toast } from "@fiftyone/components"; export default function ToastView(props) { const { schema } = props; const { view = {} } = schema; - const { message, primary, secondary, duration, layout } = view; + const { message, duration, layout } = view; - return ( - - ); + return ; } diff --git a/fiftyone/operators/types.py b/fiftyone/operators/types.py index 5931dce8e8..407e9956ff 100644 --- a/fiftyone/operators/types.py +++ b/fiftyone/operators/types.py @@ -1816,10 +1816,22 @@ def to_json(self): class ToastView(View): """Displays a snackbar style toast element. + Examples:: + + schema = { + "message": "Test", + "duration": 30000, + "layout": { + "vertical": "top", + "horizontal": "center", + "top": "200px" + }, + } + snackbar = types.ToastView(**schema) + panel.obj("toast", view=snackbar) + Args: message: the message to display - primary (None): the primary button text - secondary (None): the secondary button text duration (None): the duration to stay on screen in milliseconds layout (None): the layout of the toast """ From 57711116f0959dc92b4bb55cdee3338af44fa4df Mon Sep 17 00:00:00 2001 From: Br2850 Date: Wed, 23 Oct 2024 01:57:53 -0600 Subject: [PATCH 03/11] cleanup --- app/packages/components/src/components/Toast/Toast.tsx | 2 +- fiftyone/server/main.py | 8 +------- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/app/packages/components/src/components/Toast/Toast.tsx b/app/packages/components/src/components/Toast/Toast.tsx index ca5f509a49..04d0b93f7a 100644 --- a/app/packages/components/src/components/Toast/Toast.tsx +++ b/app/packages/components/src/components/Toast/Toast.tsx @@ -75,7 +75,7 @@ const Toast: React.FC = ({ return ( Date: Wed, 23 Oct 2024 02:29:28 -0600 Subject: [PATCH 04/11] Update Toast.tsx --- app/packages/components/src/components/Toast/Toast.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/packages/components/src/components/Toast/Toast.tsx b/app/packages/components/src/components/Toast/Toast.tsx index 04d0b93f7a..5048016eb6 100644 --- a/app/packages/components/src/components/Toast/Toast.tsx +++ b/app/packages/components/src/components/Toast/Toast.tsx @@ -86,7 +86,7 @@ const Toast: React.FC = ({ Date: Wed, 23 Oct 2024 02:43:27 -0600 Subject: [PATCH 05/11] font styling --- app/packages/components/src/components/Toast/Toast.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/packages/components/src/components/Toast/Toast.tsx b/app/packages/components/src/components/Toast/Toast.tsx index 04d0b93f7a..d429e6476c 100644 --- a/app/packages/components/src/components/Toast/Toast.tsx +++ b/app/packages/components/src/components/Toast/Toast.tsx @@ -15,6 +15,8 @@ interface ToastProps { bottom?: number | string; backgroundColor?: string; color?: string; + fontSize?: string; + textAlign?: string; }; } @@ -86,9 +88,12 @@ const Toast: React.FC = ({ From ae6a482ca07866ae6ebb2c0b2e257ceb977f90d4 Mon Sep 17 00:00:00 2001 From: topher Date: Wed, 23 Oct 2024 14:52:56 -0400 Subject: [PATCH 06/11] externalize all fo pacakges (#4970) (#4974) Co-authored-by: Sashank Aryal <66688606+sashankaryal@users.noreply.github.com> --- app/packages/plugins/src/externalize.ts | 27 +++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/app/packages/plugins/src/externalize.ts b/app/packages/plugins/src/externalize.ts index f8a0fd2691..5ca82d5a67 100644 --- a/app/packages/plugins/src/externalize.ts +++ b/app/packages/plugins/src/externalize.ts @@ -1,3 +1,12 @@ +import * as foa from "@fiftyone/aggregations"; +import * as focore from "@fiftyone/core"; +import * as foe from "@fiftyone/embeddings"; +import * as fol from "@fiftyone/looker"; +import * as fom from "@fiftyone/map"; +import * as fopb from "@fiftyone/playback"; +import * as fosl from "@fiftyone/spotlight"; +import * as fof from "@fiftyone/flashlight"; +import * as fol3d from "@fiftyone/looker-3d"; import * as foc from "@fiftyone/components"; import * as foo from "@fiftyone/operators"; import * as fos from "@fiftyone/state"; @@ -21,6 +30,15 @@ declare global { __foo__: typeof foo; __fosp__: typeof fosp; __fop__: typeof fop; + __foa__: typeof foa; + __focore__: typeof focore; + __foe__: typeof foe; + __fol__: typeof fol; + __fom__: typeof fom; + __fopb__: typeof fopb; + __fosl__: typeof fosl; + __fof__: typeof fof; + __fol3d__: typeof fol3d; __mui__: typeof mui; __styled__: typeof styled; } @@ -39,5 +57,14 @@ if (typeof window !== "undefined") { window.__fosp__ = fosp; window.__mui__ = mui; window.__fop__ = fop; + window.__foa__ = foa; + window.__focore__ = focore; + window.__foe__ = foe; + window.__fol__ = fol; + window.__fom__ = fom; + window.__fopb__ = fopb; + window.__fosl__ = fosl; + window.__fof__ = fof; + window.__fol3d__ = fol3d; window.__styled__ = styled; } From 51d49e8d9878cc059786bfb8b1c86949200ce2ef Mon Sep 17 00:00:00 2001 From: Sashank Aryal <66688606+sashankaryal@users.noreply.github.com> Date: Thu, 24 Oct 2024 11:33:03 +0545 Subject: [PATCH 07/11] fix bug where timeline name wasn't being forwarded in seek utils (#4975) * fix eslint * forward timeline name --- app/packages/playback/eslint.config.mjs | 11 +++++++++-- app/packages/playback/package.json | 1 + app/packages/playback/src/views/Timeline.tsx | 12 +++++++----- app/yarn.lock | 10 ++++++++++ 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/app/packages/playback/eslint.config.mjs b/app/packages/playback/eslint.config.mjs index 2281b87778..5fd106b853 100644 --- a/app/packages/playback/eslint.config.mjs +++ b/app/packages/playback/eslint.config.mjs @@ -1,7 +1,8 @@ +import { fixupConfigRules } from "@eslint/compat"; +import hooksPlugin from "eslint-plugin-react-hooks"; +import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; import globals from "globals"; import tseslint from "typescript-eslint"; -import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; -import { fixupConfigRules } from "@eslint/compat"; export default [ { files: ["lib/**/*.{js,mjs,cjs,ts,jsx,tsx}"] }, @@ -9,4 +10,10 @@ export default [ { languageOptions: { globals: globals.browser } }, ...tseslint.configs.recommended, ...fixupConfigRules(pluginReactConfig), + { + plugins: { + "react-hooks": hooksPlugin, + }, + rules: hooksPlugin.configs.recommended.rules, + }, ]; diff --git a/app/packages/playback/package.json b/app/packages/playback/package.json index 081b41a9b4..3bde5e8218 100644 --- a/app/packages/playback/package.json +++ b/app/packages/playback/package.json @@ -6,6 +6,7 @@ "@eslint/compat": "^1.1.1", "eslint": "9.7.0", "eslint-plugin-react": "^7.35.0", + "eslint-plugin-react-hooks": "rc", "globals": "^15.8.0", "prettier": "^3.3.3", "typescript": "^5.5.4", diff --git a/app/packages/playback/src/views/Timeline.tsx b/app/packages/playback/src/views/Timeline.tsx index 62c7b278d4..7112b6111b 100644 --- a/app/packages/playback/src/views/Timeline.tsx +++ b/app/packages/playback/src/views/Timeline.tsx @@ -26,14 +26,16 @@ interface TimelineProps { */ export const Timeline = React.memo( React.forwardRef( - ({ name, style, controlsStyle }, ref) => { + (timelineProps: TimelineProps, ref) => { + const { name, style, controlsStyle } = timelineProps; + const { playHeadState, config, play, pause, setSpeed } = useTimeline(name); const frameNumber = useFrameNumber(name); - const { getSeekValue, seekTo } = useTimelineVizUtils(); + const { getSeekValue, seekTo } = useTimelineVizUtils(name); - const seekBarValue = React.useMemo(() => getSeekValue(), [frameNumber]); + const seekBarValue = React.useMemo(() => getSeekValue(), [getSeekValue]); const { loaded, loading } = useTimelineBuffers(name); @@ -52,7 +54,7 @@ export const Timeline = React.memo( detail: { timelineName: name, start: true }, }) ); - }, [pause]); + }, [pause, name]); const onSeekEnd = React.useCallback(() => { dispatchEvent( @@ -60,7 +62,7 @@ export const Timeline = React.memo( detail: { timelineName: name, start: false }, }) ); - }, []); + }, [name]); const [isHoveringSeekBar, setIsHoveringSeekBar] = React.useState(false); diff --git a/app/yarn.lock b/app/yarn.lock index 9771ba0e5e..2bdcadf2ac 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -1942,6 +1942,7 @@ __metadata: "@eslint/compat": ^1.1.1 eslint: 9.7.0 eslint-plugin-react: ^7.35.0 + eslint-plugin-react-hooks: rc globals: ^15.8.0 jotai: ^2.9.3 jotai-optics: ^0.4.0 @@ -8388,6 +8389,15 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-react-hooks@npm:rc": + version: 5.1.0-rc-28668d39-20241023 + resolution: "eslint-plugin-react-hooks@npm:5.1.0-rc-28668d39-20241023" + peerDependencies: + eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 + checksum: 6ad29212fa76b96488a6eeb9941a9a6111420092cc309417f5569f917e4e40b15ed282172842ca8611466387c3d750ceee07e9e739e4c28e808065eaf9ed2307 + languageName: node + linkType: hard + "eslint-plugin-react@npm:^7.31.11": version: 7.34.1 resolution: "eslint-plugin-react@npm:7.34.1" From f51dfba724aa6f902b8c80b34a8d59773295323d Mon Sep 17 00:00:00 2001 From: manivoxel51 Date: Thu, 24 Oct 2024 09:05:14 -0700 Subject: [PATCH 08/11] remove overriding the grid sx --- .../core/src/plugins/SchemaIO/components/GridView.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx index ac67009e54..30018acab4 100644 --- a/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx +++ b/app/packages/core/src/plugins/SchemaIO/components/GridView.tsx @@ -39,10 +39,7 @@ export default function GridView(props: ViewPropsType) { }; return ( - + {propertiesAsArray.map((property) => { From 048d04170717c9a16e92d6354a1a9843e4dd52a3 Mon Sep 17 00:00:00 2001 From: Sashank Aryal <66688606+sashankaryal@users.noreply.github.com> Date: Thu, 24 Oct 2024 23:49:11 +0545 Subject: [PATCH 09/11] fix externalize bug (#4984) * fix externalize bug * undo vite removal --- app/packages/looker-3d/package.json | 5 +- app/packages/looker-3d/src/index.ts | 1 + app/packages/plugins/src/externalize.ts | 33 ++- app/yarn.lock | 341 ++++++++++++++++++++++-- 4 files changed, 340 insertions(+), 40 deletions(-) create mode 100644 app/packages/looker-3d/src/index.ts diff --git a/app/packages/looker-3d/package.json b/app/packages/looker-3d/package.json index 7641c9b4df..9fbb145e51 100644 --- a/app/packages/looker-3d/package.json +++ b/app/packages/looker-3d/package.json @@ -12,7 +12,7 @@ "files": [ "dist" ], - "main": "src/Looker3d.tsx", + "main": "./src/index.ts", "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", @@ -45,8 +45,5 @@ "@react-spring/web": "*", "recoil": "*" }, - "fiftyone": { - "script": "dist/index.umd.js" - }, "packageManager": "yarn@3.2.1" } diff --git a/app/packages/looker-3d/src/index.ts b/app/packages/looker-3d/src/index.ts new file mode 100644 index 0000000000..dfae3d47c1 --- /dev/null +++ b/app/packages/looker-3d/src/index.ts @@ -0,0 +1 @@ +export * from "./Looker3d"; diff --git a/app/packages/plugins/src/externalize.ts b/app/packages/plugins/src/externalize.ts index 5ca82d5a67..8afa87cae9 100644 --- a/app/packages/plugins/src/externalize.ts +++ b/app/packages/plugins/src/externalize.ts @@ -1,18 +1,14 @@ import * as foa from "@fiftyone/aggregations"; -import * as focore from "@fiftyone/core"; -import * as foe from "@fiftyone/embeddings"; +import * as foc from "@fiftyone/components"; +import * as fof from "@fiftyone/flashlight"; import * as fol from "@fiftyone/looker"; -import * as fom from "@fiftyone/map"; +import * as foo from "@fiftyone/operators"; import * as fopb from "@fiftyone/playback"; +import * as fop from "@fiftyone/plugins"; +import * as fosp from "@fiftyone/spaces"; import * as fosl from "@fiftyone/spotlight"; -import * as fof from "@fiftyone/flashlight"; -import * as fol3d from "@fiftyone/looker-3d"; -import * as foc from "@fiftyone/components"; -import * as foo from "@fiftyone/operators"; import * as fos from "@fiftyone/state"; import * as fou from "@fiftyone/utilities"; -import * as fosp from "@fiftyone/spaces"; -import * as fop from "@fiftyone/plugins"; import * as mui from "@mui/material"; import React from "react"; import ReactDOM from "react-dom"; @@ -31,16 +27,18 @@ declare global { __fosp__: typeof fosp; __fop__: typeof fop; __foa__: typeof foa; - __focore__: typeof focore; - __foe__: typeof foe; __fol__: typeof fol; - __fom__: typeof fom; __fopb__: typeof fopb; __fosl__: typeof fosl; __fof__: typeof fof; - __fol3d__: typeof fol3d; __mui__: typeof mui; __styled__: typeof styled; + + // todo: the following cannot be externalized because of unknown reason + // __focore__: typeof focore; + // __fol3d__: typeof fol3d; + // __fom__: typeof fom; + // __foe__: typeof foe; } } @@ -58,13 +56,14 @@ if (typeof window !== "undefined") { window.__mui__ = mui; window.__fop__ = fop; window.__foa__ = foa; - window.__focore__ = focore; - window.__foe__ = foe; window.__fol__ = fol; - window.__fom__ = fom; window.__fopb__ = fopb; window.__fosl__ = fosl; window.__fof__ = fof; - window.__fol3d__ = fol3d; window.__styled__ = styled; + // todo: the following cannot be externalized because of unknown reason + // window.__fol3d__ = fol3d; + // window.__foe__ = foe; + // window.__fom__ = fom; + // window.__focore__ = focore; } diff --git a/app/yarn.lock b/app/yarn.lock index 2bdcadf2ac..0088f8ff4f 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -66,6 +66,16 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/code-frame@npm:7.25.9" + dependencies: + "@babel/highlight": ^7.25.9 + picocolors: ^1.0.0 + checksum: 458015f42f130bc70a19aaf016eaabb51e8c6508feb65394115972621bf864c2cc6b07ee547b1d95e2fde958e14243f79a4d0223ef6d52963820cafcf6fcf11b + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.23.5": version: 7.24.1 resolution: "@babel/compat-data@npm:7.24.1" @@ -87,7 +97,14 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.14.8, @babel/core@npm:^7.15.0, @babel/core@npm:^7.17.10, @babel/core@npm:^7.23.5": +"@babel/compat-data@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/compat-data@npm:7.25.9" + checksum: 59d8c9d4907076e9a7a02ef065faec7b6f512bdaaf160dfa4e3c4476d816203a304d6e86e7104b063ac7cde571ee20dd83eb7b5260ef2e7cd06ca681bc424aa7 + languageName: node + linkType: hard + +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.14.8, @babel/core@npm:^7.15.0, @babel/core@npm:^7.23.5": version: 7.24.1 resolution: "@babel/core@npm:7.24.1" dependencies: @@ -110,6 +127,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.17.10": + version: 7.25.9 + resolution: "@babel/core@npm:7.25.9" + dependencies: + "@ampproject/remapping": ^2.2.0 + "@babel/code-frame": ^7.25.9 + "@babel/generator": ^7.25.9 + "@babel/helper-compilation-targets": ^7.25.9 + "@babel/helper-module-transforms": ^7.25.9 + "@babel/helpers": ^7.25.9 + "@babel/parser": ^7.25.9 + "@babel/template": ^7.25.9 + "@babel/traverse": ^7.25.9 + "@babel/types": ^7.25.9 + convert-source-map: ^2.0.0 + debug: ^4.1.0 + gensync: ^1.0.0-beta.2 + json5: ^2.2.3 + semver: ^6.3.1 + checksum: 6633cd8abdd679ffefe526a6611d4721f90f76ebf1944a8501e8beccad24a4a71c07530c8245370660c6449618b9f454a3326bac85ff03d61df7bab6f0710522 + languageName: node + linkType: hard + "@babel/core@npm:^7.21.3": version: 7.25.2 resolution: "@babel/core@npm:7.25.2" @@ -192,6 +232,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/generator@npm:7.25.9" + dependencies: + "@babel/types": ^7.25.9 + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + jsesc: ^3.0.2 + checksum: 4b8f27363e6521ca9e33d307744aeff8b6f540492eb935e597e115304d999eb228b24d43ce679e2c0337b4a98966ae28dc53f1fab86db1eb852d53e11120fd7b + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -201,6 +253,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-annotate-as-pure@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-annotate-as-pure@npm:7.25.9" + dependencies: + "@babel/types": ^7.25.9 + checksum: 41edda10df1ae106a9b4fe617bf7c6df77db992992afd46192534f5cff29f9e49a303231733782dd65c5f9409714a529f215325569f14282046e9d3b7a1ffb6c + languageName: node + linkType: hard + "@babel/helper-compilation-targets@npm:^7.23.6": version: 7.23.6 resolution: "@babel/helper-compilation-targets@npm:7.23.6" @@ -240,6 +301,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-compilation-targets@npm:7.25.9" + dependencies: + "@babel/compat-data": ^7.25.9 + "@babel/helper-validator-option": ^7.25.9 + browserslist: ^4.24.0 + lru-cache: ^5.1.1 + semver: ^6.3.1 + checksum: 3af536e2db358b38f968abdf7d512d425d1018fef2f485d6f131a57a7bcaed32c606b4e148bb230e1508fa42b5b2ac281855a68eb78270f54698c48a83201b9b + languageName: node + linkType: hard + "@babel/helper-create-class-features-plugin@npm:^7.24.1": version: 7.24.1 resolution: "@babel/helper-create-class-features-plugin@npm:7.24.1" @@ -348,6 +422,16 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-module-imports@npm:7.25.9" + dependencies: + "@babel/traverse": ^7.25.9 + "@babel/types": ^7.25.9 + checksum: 1b411ce4ca825422ef7065dffae7d8acef52023e51ad096351e3e2c05837e9bf9fca2af9ca7f28dc26d596a588863d0fedd40711a88e350b736c619a80e704e6 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3": version: 7.23.3 resolution: "@babel/helper-module-transforms@npm:7.23.3" @@ -392,6 +476,20 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-module-transforms@npm:7.25.9" + dependencies: + "@babel/helper-module-imports": ^7.25.9 + "@babel/helper-simple-access": ^7.25.9 + "@babel/helper-validator-identifier": ^7.25.9 + "@babel/traverse": ^7.25.9 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 12e50861531ff45667925c958a5d01f0a7fbd37b589d73be7f167c94595091c6842531b1b14a22049b53c56891fa596f014c94d9496685311aaa80651805fca0 + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-optimise-call-expression@npm:7.22.5" @@ -401,7 +499,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0": +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.24.0, @babel/helper-plugin-utils@npm:^7.8.0": version: 7.24.0 resolution: "@babel/helper-plugin-utils@npm:7.24.0" checksum: e2baa0eede34d2fa2265947042aa84d444aa48dc51e9feedea55b67fc1bc3ab051387e18b33ca7748285a6061390831ab82f8a2c767d08470b93500ec727e9b9 @@ -415,6 +513,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-plugin-utils@npm:7.25.9" + checksum: e19ec8acf0b696756e6d84531f532c5fe508dce57aa68c75572a77798bd04587a844a9a6c8ea7d62d673e21fdc174d091c9097fb29aea1c1b49f9c6eaa80f022 + languageName: node + linkType: hard + "@babel/helper-replace-supers@npm:^7.24.1": version: 7.24.1 resolution: "@babel/helper-replace-supers@npm:7.24.1" @@ -456,6 +561,16 @@ __metadata: languageName: node linkType: hard +"@babel/helper-simple-access@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-simple-access@npm:7.25.9" + dependencies: + "@babel/traverse": ^7.25.9 + "@babel/types": ^7.25.9 + checksum: 6d96c94b88e8288d15e5352c1221486bd4f62de8c7dc7c7b9f5b107ce2c79f67fec5ed71a0476e146f1fefbbbf1d69abe35dc821d80ce01fc7f472286c342421 + languageName: node + linkType: hard + "@babel/helper-skip-transparent-expression-wrappers@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-skip-transparent-expression-wrappers@npm:7.22.5" @@ -504,6 +619,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-string-parser@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-string-parser@npm:7.25.9" + checksum: 6435ee0849e101681c1849868278b5aee82686ba2c1e27280e5e8aca6233af6810d39f8e4e693d2f2a44a3728a6ccfd66f72d71826a94105b86b731697cdfa99 + languageName: node + linkType: hard + "@babel/helper-validator-identifier@npm:^7.22.20": version: 7.22.20 resolution: "@babel/helper-validator-identifier@npm:7.22.20" @@ -525,6 +647,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-identifier@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-validator-identifier@npm:7.25.9" + checksum: 5b85918cb1a92a7f3f508ea02699e8d2422fe17ea8e82acd445006c0ef7520fbf48e3dbcdaf7b0a1d571fc3a2715a29719e5226636cb6042e15fe6ed2a590944 + languageName: node + linkType: hard + "@babel/helper-validator-option@npm:^7.23.5": version: 7.23.5 resolution: "@babel/helper-validator-option@npm:7.23.5" @@ -546,6 +675,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-validator-option@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-validator-option@npm:7.25.9" + checksum: 9491b2755948ebbdd68f87da907283698e663b5af2d2b1b02a2765761974b1120d5d8d49e9175b167f16f72748ffceec8c9cf62acfbee73f4904507b246e2b3d + languageName: node + linkType: hard + "@babel/helpers@npm:^7.24.1": version: 7.24.1 resolution: "@babel/helpers@npm:7.24.1" @@ -577,6 +713,16 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helpers@npm:7.25.9" + dependencies: + "@babel/template": ^7.25.9 + "@babel/types": ^7.25.9 + checksum: 82b1051c065baff1f53a85886bd05b2136c021f8d9301974d639007b7b90f674115b992a1dcf04667b37f9229d6f3eaeb1c40550f9ae46802ec4a8e388018b31 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.24.2": version: 7.24.2 resolution: "@babel/highlight@npm:7.24.2" @@ -613,6 +759,18 @@ __metadata: languageName: node linkType: hard +"@babel/highlight@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/highlight@npm:7.25.9" + dependencies: + "@babel/helper-validator-identifier": ^7.25.9 + chalk: ^2.4.2 + js-tokens: ^4.0.0 + picocolors: ^1.0.0 + checksum: a6e0ac0a1c4bef7401915ca3442ab2b7ae4adf360262ca96b91396bfb9578abb28c316abf5e34460b780696db833b550238d9256bdaca60fade4ba7a67645064 + languageName: node + linkType: hard + "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1": version: 7.24.1 resolution: "@babel/parser@npm:7.24.1" @@ -642,6 +800,17 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/parser@npm:7.25.9" + dependencies: + "@babel/types": ^7.25.9 + bin: + parser: ./bin/babel-parser.js + checksum: 76e898e9feaa7e11512841c13aab1a6d81f69a19ab93b0ec941dd78407fdbfe8fb08ff54e0966567aef4f24a7b94125473f0e903fb198c010bd5456058bf3432 + languageName: node + linkType: hard + "@babel/plugin-syntax-async-generators@npm:^7.8.4": version: 7.8.4 resolution: "@babel/plugin-syntax-async-generators@npm:7.8.4" @@ -697,7 +866,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.24.1": +"@babel/plugin-syntax-jsx@npm:^7.24.1": version: 7.24.1 resolution: "@babel/plugin-syntax-jsx@npm:7.24.1" dependencies: @@ -708,6 +877,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-jsx@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-syntax-jsx@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": ^7.25.9 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: bb609d1ffb50b58f0c1bac8810d0e46a4f6c922aa171c458f3a19d66ee545d36e782d3bffbbc1fed0dc65a558bdce1caf5279316583c0fff5a2c1658982a8563 + languageName: node + linkType: hard + "@babel/plugin-syntax-jsx@npm:^7.7.2": version: 7.24.6 resolution: "@babel/plugin-syntax-jsx@npm:7.24.6" @@ -821,17 +1001,17 @@ __metadata: linkType: hard "@babel/plugin-transform-react-jsx-development@npm:^7.16.7": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5" + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9" dependencies: - "@babel/plugin-transform-react-jsx": ^7.22.5 + "@babel/plugin-transform-react-jsx": ^7.25.9 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 36bc3ff0b96bb0ef4723070a50cfdf2e72cfd903a59eba448f9fe92fea47574d6f22efd99364413719e1f3fb3c51b6c9b2990b87af088f8486a84b2a5f9e4560 + checksum: 537d38369537f1eb56041c4b770bc0733fde1801a7f5ffef40a1217ea448f33ee2fa8e6098a58a82fd00e432c1b9426a66849496da419020c9eca3b1b1a23779 languageName: node linkType: hard -"@babel/plugin-transform-react-jsx-self@npm:^7.14.5, @babel/plugin-transform-react-jsx-self@npm:^7.16.7": +"@babel/plugin-transform-react-jsx-self@npm:^7.14.5": version: 7.24.1 resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.1" dependencies: @@ -842,7 +1022,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx-source@npm:^7.14.5, @babel/plugin-transform-react-jsx-source@npm:^7.16.7": +"@babel/plugin-transform-react-jsx-self@npm:^7.16.7": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": ^7.25.9 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 41c833cd7f91b1432710f91b1325706e57979b2e8da44e83d86312c78bbe96cd9ef778b4e79e4e17ab25fa32c72b909f2be7f28e876779ede28e27506c41f4ae + languageName: node + linkType: hard + +"@babel/plugin-transform-react-jsx-source@npm:^7.14.5": version: 7.24.1 resolution: "@babel/plugin-transform-react-jsx-source@npm:7.24.1" dependencies: @@ -853,18 +1044,29 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.17.3, @babel/plugin-transform-react-jsx@npm:^7.22.5": - version: 7.23.4 - resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4" +"@babel/plugin-transform-react-jsx-source@npm:^7.16.7": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.9" dependencies: - "@babel/helper-annotate-as-pure": ^7.22.5 - "@babel/helper-module-imports": ^7.22.15 - "@babel/helper-plugin-utils": ^7.22.5 - "@babel/plugin-syntax-jsx": ^7.23.3 - "@babel/types": ^7.23.4 + "@babel/helper-plugin-utils": ^7.25.9 peerDependencies: "@babel/core": ^7.0.0-0 - checksum: d8b8c52e8e22e833bf77c8d1a53b0a57d1fd52ba9596a319d572de79446a8ed9d95521035bc1175c1589d1a6a34600d2e678fa81d81bac8fac121137097f1f0a + checksum: a3e0e5672e344e9d01fb20b504fe29a84918eaa70cec512c4d4b1b035f72803261257343d8e93673365b72c371f35cf34bb0d129720bf178a4c87812c8b9c662 + languageName: node + linkType: hard + +"@babel/plugin-transform-react-jsx@npm:^7.17.3, @babel/plugin-transform-react-jsx@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9" + dependencies: + "@babel/helper-annotate-as-pure": ^7.25.9 + "@babel/helper-module-imports": ^7.25.9 + "@babel/helper-plugin-utils": ^7.25.9 + "@babel/plugin-syntax-jsx": ^7.25.9 + "@babel/types": ^7.25.9 + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 5c6523c3963e3c6cf4c3cc2768a3766318af05b8f6c17aff52a4010e2c170e87b2fcdc94e9c9223ae12158664df4852ce81b9c8d042c15ea8fd83d6375f9f30f languageName: node linkType: hard @@ -939,6 +1141,17 @@ __metadata: languageName: node linkType: hard +"@babel/template@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/template@npm:7.25.9" + dependencies: + "@babel/code-frame": ^7.25.9 + "@babel/parser": ^7.25.9 + "@babel/types": ^7.25.9 + checksum: 103641fea19c7f4e82dc913aa6b6ac157112a96d7c724d513288f538b84bae04fb87b1f1e495ac1736367b1bc30e10f058b30208fb25f66038e1f1eb4e426472 + languageName: node + linkType: hard + "@babel/traverse@npm:^7.24.1": version: 7.24.1 resolution: "@babel/traverse@npm:7.24.1" @@ -990,7 +1203,22 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.8.3": +"@babel/traverse@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/traverse@npm:7.25.9" + dependencies: + "@babel/code-frame": ^7.25.9 + "@babel/generator": ^7.25.9 + "@babel/parser": ^7.25.9 + "@babel/template": ^7.25.9 + "@babel/types": ^7.25.9 + debug: ^4.3.1 + globals: ^11.1.0 + checksum: 901d325662ff1dd9bc51de00862e01055fa6bc374f5297d7e3731f2f0e268bbb1d2141f53fa82860aa308ee44afdcf186a948f16c83153927925804b95a9594d + languageName: node + linkType: hard + +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.8.3": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" dependencies: @@ -1023,6 +1251,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/types@npm:7.25.9" + dependencies: + "@babel/helper-string-parser": ^7.25.9 + "@babel/helper-validator-identifier": ^7.25.9 + checksum: c6e2f5bdd85351c22a395bd2359a7acec595b4b544750795836d4f69aec76c07e1c78668eab04490c6bd331776e0ece42865de2ec2c5bc7a9ddee81afd7fcac6 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -6273,6 +6511,20 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.24.0": + version: 4.24.2 + resolution: "browserslist@npm:4.24.2" + dependencies: + caniuse-lite: ^1.0.30001669 + electron-to-chromium: ^1.5.41 + node-releases: ^2.0.18 + update-browserslist-db: ^1.1.1 + bin: + browserslist: cli.js + checksum: cf64085f12132d38638f38937a255edb82c7551b164a98577b055dd79719187a816112f7b97b9739e400c4954cd66479c0d7a843cb816e346f4795dc24fd5d97 + languageName: node + linkType: hard + "bser@npm:2.1.1": version: 2.1.1 resolution: "bser@npm:2.1.1" @@ -6434,6 +6686,13 @@ __metadata: languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001669 + resolution: "caniuse-lite@npm:1.0.30001669" + checksum: 8ed0c69d0c6aa3b1cbc5ba4e5f5330943e7b7165e257f6955b8b73f043d07ad922265261f2b54d9bbaf02886bbdba5e6f5b16662310a13f91f17035af3212de1 + languageName: node + linkType: hard + "canvas-fit@npm:^1.5.0": version: 1.5.0 resolution: "canvas-fit@npm:1.5.0" @@ -7832,6 +8091,13 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.5.41": + version: 1.5.45 + resolution: "electron-to-chromium@npm:1.5.45" + checksum: f2e1ad7867125501d41f763e129d130bd563efebab65f5ca88a81407e834ff81d4e1e19355714d1e7f82a4662d3531fc23a0e9e9cdfb7b9ead0eb52ddcfa4b3e + languageName: node + linkType: hard + "element-size@npm:^1.1.1": version: 1.1.1 resolution: "element-size@npm:1.1.1" @@ -8301,6 +8567,13 @@ __metadata: languageName: node linkType: hard +"escalade@npm:^3.2.0": + version: 3.2.0 + resolution: "escalade@npm:3.2.0" + checksum: 47b029c83de01b0d17ad99ed766347b974b0d628e848de404018f3abee728e987da0d2d370ad4574aa3d5b5bfc368754fd085d69a30f8e75903486ec4b5b709e + languageName: node + linkType: hard + "escape-string-regexp@npm:^1.0.5": version: 1.0.5 resolution: "escape-string-regexp@npm:1.0.5" @@ -11443,6 +11716,15 @@ __metadata: languageName: node linkType: hard +"jsesc@npm:^3.0.2": + version: 3.0.2 + resolution: "jsesc@npm:3.0.2" + bin: + jsesc: bin/jsesc + checksum: a36d3ca40574a974d9c2063bf68c2b6141c20da8f2a36bd3279fc802563f35f0527a6c828801295bdfb2803952cf2cf387786c2c90ed564f88d5782475abfe3c + languageName: node + linkType: hard + "json-buffer@npm:3.0.1": version: 3.0.1 resolution: "json-buffer@npm:3.0.1" @@ -13679,6 +13961,13 @@ __metadata: languageName: node linkType: hard +"picocolors@npm:^1.1.0": + version: 1.1.1 + resolution: "picocolors@npm:1.1.1" + checksum: e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045 + languageName: node + linkType: hard + "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.2, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" @@ -17266,6 +17555,20 @@ __metadata: languageName: node linkType: hard +"update-browserslist-db@npm:^1.1.1": + version: 1.1.1 + resolution: "update-browserslist-db@npm:1.1.1" + dependencies: + escalade: ^3.2.0 + picocolors: ^1.1.0 + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 2ea11bd2562122162c3e438d83a1f9125238c0844b6d16d366e3276d0c0acac6036822dc7df65fc5a89c699cdf9f174acf439c39bedf3f9a2f3983976e4b4c3e + languageName: node + linkType: hard + "update-diff@npm:^1.1.0": version: 1.1.0 resolution: "update-diff@npm:1.1.0" From ea1d0568307baa2ee70e6f20ad932196cdcb37da Mon Sep 17 00:00:00 2001 From: Benjamin Kane Date: Thu, 24 Oct 2024 11:44:51 -0400 Subject: [PATCH 10/11] tmp work --- .../core/src/components/Modal/use-looker.ts | 61 ++++++++----------- app/packages/spaces/src/components/Panel.tsx | 4 +- 2 files changed, 26 insertions(+), 39 deletions(-) diff --git a/app/packages/core/src/components/Modal/use-looker.ts b/app/packages/core/src/components/Modal/use-looker.ts index ed6b46d8ee..ea38037caa 100644 --- a/app/packages/core/src/components/Modal/use-looker.ts +++ b/app/packages/core/src/components/Modal/use-looker.ts @@ -1,10 +1,10 @@ import * as fos from "@fiftyone/state"; import React, { useEffect, useRef, useState } from "react"; import { useErrorHandler } from "react-error-boundary"; -import { useRecoilValue, useSetRecoilState } from "recoil"; +import { useRecoilValue } from "recoil"; import { v4 as uuid } from "uuid"; import { useClearSelectedLabels, useShowOverlays } from "./ModalLooker"; -import { useLookerOptionsUpdate, useModalContext } from "./hooks"; +import { useLookerOptionsUpdate } from "./hooks"; import useKeyEvents from "./use-key-events"; import { shortcutToHelpItems } from "./utils"; @@ -18,8 +18,8 @@ function useLooker({ const [id] = useState(() => uuid()); const initialRef = useRef(true); const ref = useRef(null); - const [reset, setReset] = useState(false); const lookerOptions = fos.useLookerOptions(true); + const [reset, setReset] = useState(false); const createLooker = fos.useCreateLooker( true, false, @@ -27,19 +27,17 @@ function useLooker({ undefined, true ); - const selectedMediaField = useRecoilValue(fos.selectedMediaField(true)); - const colorScheme = useRecoilValue(fos.colorScheme); const looker = React.useMemo(() => { /** start refreshers */ reset; - selectedMediaField; /** end refreshers */ return createLooker.current(sample); - }, [createLooker, reset, sample, selectedMediaField]) as L; + }, [createLooker, reset, sample]) as L; const handleError = useErrorHandler(); const updateLookerOptions = useLookerOptionsUpdate(); - + const selectedMediaField = useRecoilValue(fos.selectedMediaField(true)); + const colorScheme = useRecoilValue(fos.colorScheme); fos.useEventHandler(looker, "clear", useClearSelectedLabels()); fos.useEventHandler(looker, "error", (event) => handleError(event.detail)); fos.useEventHandler(looker, "options", (e) => updateLookerOptions(e.detail)); @@ -59,27 +57,8 @@ function useLooker({ !initialRef.current && looker.updateSample(sample.sample); }, [colorScheme, looker, sample]); - useEffect(() => { - initialRef.current = false; - }, []); - - useEffect(() => { - ref.current?.dispatchEvent( - new CustomEvent("looker-attached", { bubbles: true }) - ); - }, []); - - useEffect(() => { - looker.attach(id); - }, [looker, id]); - - useEffect(() => { - return () => looker?.destroy(); - }, [looker]); - const jsonPanel = fos.useJSONPanel(); const helpPanel = fos.useHelpPanel(); - fos.useEventHandler( looker, "panels", @@ -94,7 +73,6 @@ function useLooker({ helpPanel[showHelp](shortcutToHelpItems(SHORTCUTS)); } } - updateLookerOptions({}, (updatedOptions) => looker.updateOptions(updatedOptions) ); @@ -103,21 +81,30 @@ function useLooker({ useKeyEvents(initialRef, sample.sample._id, looker); - const setModalLooker = useSetRecoilState(fos.modalLooker); + useEffect(() => { + ref.current?.dispatchEvent( + new CustomEvent("looker-attached", { bubbles: true }) + ); + }, []); + useEffect(() => { + initialRef.current = false; + }, []); - const { setActiveLookerRef } = useModalContext(); + useEffect(() => { + ref.current?.dispatchEvent( + new CustomEvent("looker-attached", { bubbles: true }) + ); + }, []); useEffect(() => { - setModalLooker(looker); - }, [looker, setModalLooker]); + looker.attach(id); + }, [looker, id]); useEffect(() => { - if (looker) { - setActiveLookerRef(looker as fos.Lookers); - } - }, [looker, setActiveLookerRef]); + return () => looker?.destroy(); + }, [looker]); - return { id, looker, ref, sample, updateLookerOptions }; + return { id, looker, ref, sample }; } export default useLooker; diff --git a/app/packages/spaces/src/components/Panel.tsx b/app/packages/spaces/src/components/Panel.tsx index 3b8c9859ee..c781e577fb 100644 --- a/app/packages/spaces/src/components/Panel.tsx +++ b/app/packages/spaces/src/components/Panel.tsx @@ -1,7 +1,7 @@ import { CenteredStack, scrollable } from "@fiftyone/components"; import * as fos from "@fiftyone/state"; import React, { useEffect } from "react"; -import { useRecoilValue, useSetRecoilState } from "recoil"; +import { useSetRecoilState } from "recoil"; import { PANEL_LOADING_TIMEOUT } from "../constants"; import { PanelContext } from "../contexts"; import { useReactivePanel } from "../hooks"; @@ -20,7 +20,7 @@ function Panel(props: PanelProps) { const setPanelIdToScope = useSetRecoilState(panelIdToScopeAtom); const scope = isModalPanel ? "modal" : "grid"; - const thisModalUniqueId = useRecoilValue(fos.currentModalUniqueId); + const thisModalUniqueId = null; useEffect(() => { setPanelIdToScope((ids) => ({ ...ids, [node.id]: scope })); From 11abab2564f6619a17aa4b13be8ad8bb83302dac Mon Sep 17 00:00:00 2001 From: Benjamin Kane Date: Thu, 24 Oct 2024 11:48:32 -0400 Subject: [PATCH 11/11] other tmp work --- app/packages/core/src/components/Grid/Grid.tsx | 3 +-- app/packages/core/src/components/Grid/useAt.ts | 1 + app/packages/core/src/components/Grid/useSelect.ts | 12 ------------ app/packages/core/src/components/Modal/Modal.tsx | 4 ++-- app/packages/core/src/plugins/samples.tsx | 1 + app/packages/looker/src/lookers/abstract.ts | 7 +++---- app/packages/state/src/hooks/useSetExpandedSample.ts | 2 +- 7 files changed, 9 insertions(+), 21 deletions(-) diff --git a/app/packages/core/src/components/Grid/Grid.tsx b/app/packages/core/src/components/Grid/Grid.tsx index db454e14d0..52807c3b6e 100644 --- a/app/packages/core/src/components/Grid/Grid.tsx +++ b/app/packages/core/src/components/Grid/Grid.tsx @@ -125,12 +125,11 @@ function Grid() { element && spotlight.attach(element); spotlight.addEventListener("load", mount); - spotlight.addEventListener("rowchange", set); return () => { freeVideos(); spotlight.removeEventListener("load", mount); - spotlight.removeEventListener("rowchange", set); + spotlight.destroy(); document.dispatchEvent(new CustomEvent("grid-unmount")); }; diff --git a/app/packages/core/src/components/Grid/useAt.ts b/app/packages/core/src/components/Grid/useAt.ts index c2a100c6ef..18b8a13e0f 100644 --- a/app/packages/core/src/components/Grid/useAt.ts +++ b/app/packages/core/src/components/Grid/useAt.ts @@ -53,6 +53,7 @@ export default function useAt(pageReset: string) { const set = useRecoilTransaction_UNSTABLE( ({ set }) => ({ at, page, offset }: { at: ID; page: number; offset: number }) => { + console.log("SCROLL"); set(gridPage, page); set(gridAt, at.description); set(gridOffset, offset); diff --git a/app/packages/core/src/components/Grid/useSelect.ts b/app/packages/core/src/components/Grid/useSelect.ts index 45d0e6c120..d1591ec49c 100644 --- a/app/packages/core/src/components/Grid/useSelect.ts +++ b/app/packages/core/src/components/Grid/useSelect.ts @@ -13,18 +13,6 @@ export default function useSelect( const { init, deferred } = fos.useDeferrer(); const selected = useRecoilValue(fos.selectedSamples); - useEffect(() => { - deferred(() => { - const fontSize = getFontSize(); - spotlight?.updateItems((id) => { - store.get(id)?.updateOptions({ - ...options, - fontSize, - selected: selected.has(id.description), - }); - }); - }); - }, [deferred, getFontSize, options, selected, spotlight, store]); useEffect(() => { return spotlight ? init() : undefined; diff --git a/app/packages/core/src/components/Modal/Modal.tsx b/app/packages/core/src/components/Modal/Modal.tsx index c7c2b196cf..825e2af06c 100644 --- a/app/packages/core/src/components/Modal/Modal.tsx +++ b/app/packages/core/src/components/Modal/Modal.tsx @@ -7,11 +7,11 @@ import { useRecoilCallback, useRecoilValue } from "recoil"; import styled from "styled-components"; import { ModalActionsRow } from "../Actions"; import Sidebar from "../Sidebar"; -import { useLookerHelpers } from "./hooks"; -import { modalContext } from "./modal-context"; import ModalNavigation from "./ModalNavigation"; import { ModalSpace } from "./ModalSpace"; import { TooltipInfo } from "./TooltipInfo"; +import { useLookerHelpers } from "./hooks"; +import { modalContext } from "./modal-context"; import { useModalSidebarRenderEntry } from "./use-sidebar-render-entry"; const ModalWrapper = styled.div` diff --git a/app/packages/core/src/plugins/samples.tsx b/app/packages/core/src/plugins/samples.tsx index 48a8e9c64b..82f09691aa 100644 --- a/app/packages/core/src/plugins/samples.tsx +++ b/app/packages/core/src/plugins/samples.tsx @@ -20,6 +20,7 @@ registerComponent({ name: "Samples", label: "Samples", component: () => { + console.log("RENDER"); return ( diff --git a/app/packages/looker/src/lookers/abstract.ts b/app/packages/looker/src/lookers/abstract.ts index ad8c70c528..3e7f5dd8a7 100644 --- a/app/packages/looker/src/lookers/abstract.ts +++ b/app/packages/looker/src/lookers/abstract.ts @@ -536,10 +536,9 @@ export abstract class AbstractLooker< destroy() { this.resizeObserver.disconnect(); - this.lookerElement.element.parentElement && - this.lookerElement.element.parentElement.removeChild( - this.lookerElement.element - ); + this.lookerElement.element.parentElement.removeChild( + this.lookerElement.element + ); this.updater({ destroyed: true }); } disable() { diff --git a/app/packages/state/src/hooks/useSetExpandedSample.ts b/app/packages/state/src/hooks/useSetExpandedSample.ts index 13ac9475e8..80bf86aae2 100644 --- a/app/packages/state/src/hooks/useSetExpandedSample.ts +++ b/app/packages/state/src/hooks/useSetExpandedSample.ts @@ -34,7 +34,7 @@ export default () => { [] ); - const commit = useRecoilCallback( + return useRecoilCallback( ({ set }) => async (selector: ModalSelector) => { set(modalSelector, selector);