From 9160b72f11f030cef9012b963745e8a338a9bc14 Mon Sep 17 00:00:00 2001 From: Konstantin Dyachenko Date: Fri, 20 Oct 2023 13:46:29 +0000 Subject: [PATCH 1/5] Changes for sidebar restored. --- imports/client-handler.tsx | 2 +- imports/cyto/editor.tsx | 266 +++++++++++++++++++++++++++++++-- imports/cyto/elements.tsx | 6 +- imports/cyto/graph.tsx | 7 +- imports/cyto/hooks.tsx | 62 ++++++++ imports/editor/editor-tabs.tsx | 24 ++- 6 files changed, 340 insertions(+), 27 deletions(-) diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx index f046c49d..ffc2ed69 100644 --- a/imports/client-handler.tsx +++ b/imports/client-handler.tsx @@ -3,7 +3,7 @@ import * as icons from '@chakra-ui/icons'; import dynamic from 'next/dynamic'; import { DeepClient, useDeep, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client"; import { evalClientHandler as deepclientEvalClientHandler } from '@deep-foundation/deeplinks/imports/client-handler'; -import { useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks"; +import { useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks"; import axios from 'axios'; import * as axiosHooks from 'axios-hooks'; import * as classnames from 'classnames'; diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx index 03da31f4..f931226a 100644 --- a/imports/cyto/editor.tsx +++ b/imports/cyto/editor.tsx @@ -1,11 +1,36 @@ -import { Box, IconButton, Modal, ModalContent, ModalOverlay, useColorMode } from '@chakra-ui/react'; +import { + Box, Button, IconButton, Modal, ModalContent, ModalOverlay, useColorMode, + Editable, + EditableInput, + EditableTextarea, + EditablePreview, + Popover, + PopoverTrigger, + PopoverContent, + PopoverHeader, + PopoverBody, + PopoverFooter, + PopoverArrow, + PopoverCloseButton, + PopoverAnchor, + Menu, + MenuButton, + MenuList, + MenuItem, + MenuItemOption, + MenuGroup, + MenuOptionGroup, + MenuDivider, + Divider, + Portal, +} from '@chakra-ui/react'; import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; -import { useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; +import { Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; import { useLocalStore } from '@deep-foundation/store/local'; import { useDebounceCallback } from '@react-hook/debounce'; import json5 from 'json5'; import dynamic from 'next/dynamic'; -import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { VscClearAll } from 'react-icons/vsc'; import { ClientHandler, ClientHandlerRenderer, evalClientHandler } from '../client-handler'; import { EditorComponentView } from '../editor/editor-component-view'; @@ -17,7 +42,10 @@ import { CloseButton, EditorTabs } from '../editor/editor-tabs'; import { EditorTextArea } from '../editor/editor-textarea'; import { CatchErrors } from '../react-errors'; import { CytoEditorHandlers } from './handlers'; -import { useCytoEditor } from './hooks'; +import { FinderPopover, useCytoEditor } from './hooks'; +import { useSpaceId } from '../hooks'; +import { AddIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, SmallAddIcon, SmallCloseIcon } from '@chakra-ui/icons'; +import EmojiPicker from 'emoji-picker-react'; const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false }); @@ -105,6 +133,212 @@ export function useFindClientHandlerByCode({ return hid; } +export function List({ link }) { + const deep = useDeep(); + const { + data: contained + } = deep.useDeepSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: link.id } }); + return <> + { + {contained.map(c => )} + } + ; +} + +export const Item = React.memo(function Item({ + link, + openable = false, + deletable = false, + children = null, + portalRef, + closeTab, + activeTab, + addTab, + isActive = false, +}: { + link: Link; + openable?: boolean; + deletable?: boolean; + children?: any; + portalRef?: any; + closeTab?: (id: number) => void; + activeTab?: (id: number) => void; + addTab?: (tab: any) => void; + isActive?: boolean; +}) { + const [opened, setOpened] = useState(false); + const [spaceId] = useSpaceId(); + const deep = useDeep(); + const [currentSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: link.id }); + const [typeSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: link.type_id }); + const currentSymbol = currentSymbolLink?.value?.value; + const typeSymbol = typeSymbolLink?.value?.value; + return <> + + {opened && } + ; +}); + +export function CytoEditorNav({ + portalRef +}: { + portalRef?: any; +}) { + const deep = useDeep(); + const [spaceId] = useSpaceId(); + const links = deep.useMinilinksSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: spaceId } }); + const { + tab, + tabs, + setTab, + activeTab, + tabId, + setTabs, + addTab, + closeTab, + } = useEditorTabs(); + + return <> +
+ {!!deep.minilinks.byId[spaceId] && + { + await deep.insert({ + type_id: deep.idLocal('@deep-foundation/core', 'Contain'), + string: { data: { value: '' } }, + from_id: spaceId, + to: { data: { type_id: link.id } }, + }); + }} + > + } + /> + + } + + {links.map(l => )} +
+ ; +} + export function CytoEditor() { const [cytoEditor, setCytoEditor] = useCytoEditor(); const onClose = useCallback(() => { @@ -121,6 +355,7 @@ export function CytoEditor() { tabId, setTabs, } = useEditorTabs(); + const portalRef = useRef(); const [currentLinkId, setCurrentLinkId] = useState(tab?.id || 0); const { data: [currentLink = deep?.minilinks?.byId[tab?.id]] = [] } = useDeepSubscription({ @@ -182,11 +417,6 @@ export function CytoEditor() { refEditor?.current?.editor?.focus(); }, []); - useEffect(() => { - import('@monaco-editor/react').then(m => { }); - }, []); - - const languages = refEditor.current?.monaco.languages.getLanguages(); const validationTS = refEditor.current?.monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ noSemanticValidation: true, @@ -195,18 +425,30 @@ export function CytoEditor() { const { colorMode } = useColorMode(); + useEffect(() => { + console.log('AAA MOUNT'); + return () => console.log('AAA UNMOUNT'); + }, []); + useEffect(() => { + console.log('AAA UPDATED'); + }); + return <> - + +
{[ + , setEditorMounted(true)} /> + {/*
*/} ({ ...tab, - title: `${tab.id} ${deep.minilinks.byId[tab.id]?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value || ''}`.trim(), active: tabId === tab.id, }))} setTabs={(tabs) => setTabs(tabs)} diff --git a/imports/cyto/elements.tsx b/imports/cyto/elements.tsx index 1fc77b39..d01344b0 100644 --- a/imports/cyto/elements.tsx +++ b/imports/cyto/elements.tsx @@ -210,9 +210,9 @@ export function useCytoElements(ml, _links, cy, spaceId, cyh) { if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value) { _type = `type:${link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value}`; } - if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value) { - _symbol = link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value; - } + // if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value) { + _symbol = link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value || _symbol; + // } if (!!cy && (!cyh.drawedCytoHandlers.current[link.id] || !cytoHandlers)) { if (((isFocusSpace && showFocus) || !isFocusSpace) && ((isOpenedSpace && showOpened) || !isOpenedSpace)) { if (link.from_id) { diff --git a/imports/cyto/graph.tsx b/imports/cyto/graph.tsx index 0d2c33bf..39b23662 100644 --- a/imports/cyto/graph.tsx +++ b/imports/cyto/graph.tsx @@ -30,7 +30,7 @@ import { CytoReactLayout } from './react'; import { useCytoStylesheets } from './stylesheets'; import { CytoGraphProps } from './types'; -import { useCyInitializer } from './hooks'; +import { useCyInitializer, useCytoEditor } from './hooks'; import { CytoHandlers, useCytoHandlers, useCytoHandlersApply } from '../cyto-handler'; const CytoscapeComponent = dynamic( @@ -129,6 +129,7 @@ export default function CytoGraph({ const { layout, setLayout } = useLayout(); const [ layoutAnimation ] = useLayoutAnimation(); + const [cytoEditor, setCytoEditor] = useCytoEditor(); const returning = (<> @@ -138,7 +139,7 @@ export default function CytoGraph({ cy={cy} gqlPath={gqlPath} gqlSsl={gqlSsl}> - { if (!cy) onLoaded(_cy); }} @@ -149,7 +150,7 @@ export default function CytoGraph({ pan={cytoViewportRef?.current?.value?.pan} zoom={cytoViewportRef?.current?.value?.zoom} style={ { width: '100%', height: '100vh' } } - /> + />} {!!cy && ; + onSubmit: (link) => void; + onChange?: (link) => void; + children?: any; + PopoverProps?: any; + ClientHandlerProps?: any; + query?: any; + search?: string; + }) { + const deep = useDeep(); + const [selectedLink, setSelectedLink] = useState>(); + const { onOpen, onClose, isOpen } = useDisclosure(); + console.log('FinderPopover') + return + + {children} + + + { + onChange && onChange(l); + setSelectedLink(l); + }} + {...(ClientHandlerProps)} + /> + + } + onClick={async () => { + if (selectedLink) { + onClose && onClose(); + onSubmit && onSubmit(selectedLink); + } + }} + /> + + + ; +}, () => true); + export function CytoReactLinksCardInsertNode({ insertingLink, setInsertingLink, ml, ehRef, returningRef, insertLinkRef, @@ -415,6 +476,7 @@ export function useLinkInserting(elements = [], reactElements = [], focus, cyRef cyRef.current.on('ehcomplete', ehcomplete); cyRef.current.on('tap', tap); return () => { + if (!cyRef.current) return; cyRef.current.removeListener('ehstop', ehstop); cyRef.current.removeListener('ehcomplete', ehcomplete); cyRef.current.removeListener('tap', tap); diff --git a/imports/editor/editor-tabs.tsx b/imports/editor/editor-tabs.tsx index f58d5c6d..7e18af06 100644 --- a/imports/editor/editor-tabs.tsx +++ b/imports/editor/editor-tabs.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { isAndroid, isIOS } from 'react-device-detect'; import { VscChromeClose } from 'react-icons/vsc'; import { useChackraColor } from '../get-color'; +import { useDeep } from '@deep-foundation/deeplinks/imports/client'; interface ITab { id: number; @@ -89,7 +90,6 @@ export const EditorTab = React.memo(({ }:ITabProps) => { const { id, - title, saved = false, loading = false, active = false, @@ -97,6 +97,15 @@ export const EditorTab = React.memo(({ const gray900 = useChackraColor('gray.900'); const white = useChackraColor('white'); const { colorMode } = useColorMode(); + const deep = useDeep(); + + const [currentSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: id || 0 }); + const currentSymbol = currentSymbolLink?.value?.value; + const [typeSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: deep.minilinks.byId[id]?.type_id || 0 }); + const [containLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Contain'), to_id: id }); + const typeSymbol = typeSymbolLink?.value?.value; + const symbol = currentSymbol || typeSymbol || ''; + const title = containLink?.value?.value || id; return ((({ // }} > - {title} + {symbol ? `${symbol} ` : ''}{title} {isIOS || isAndroid ? - {tabs.map(t => - - )} - - - ) + {tabs.map(t => + + )} + + ) }) \ No newline at end of file From 6c4441844c579a8098ea7199d5f41bab35b8d2ee Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Sun, 22 Oct 2023 14:06:04 +0000 Subject: [PATCH 2/5] fix --- imports/auto-guest.tsx | 4 +- imports/client-handler.tsx | 186 ++++++++++++++++++------------------- imports/cyto-handler.tsx | 4 +- imports/cyto/drop-zone.tsx | 4 +- imports/cyto/editor.tsx | 23 ++--- imports/cyto/react.tsx | 4 +- imports/loader.tsx | 103 +++++++++++--------- 7 files changed, 174 insertions(+), 154 deletions(-) diff --git a/imports/auto-guest.tsx b/imports/auto-guest.tsx index 770c15dd..2d018777 100644 --- a/imports/auto-guest.tsx +++ b/imports/auto-guest.tsx @@ -8,7 +8,7 @@ import { useLocalStore } from "@deep-foundation/store/local"; const debug = Debug('deepcase:auto-guest'); -export function AutoGuest({ +export const AutoGuest = React.memo(function AutoGuest({ children, }: { children: any; @@ -46,4 +46,4 @@ export function AutoGuest({ return <> {isAuth ? children : null} -} \ No newline at end of file +}); \ No newline at end of file diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx index ffc2ed69..86225e07 100644 --- a/imports/client-handler.tsx +++ b/imports/client-handler.tsx @@ -57,6 +57,97 @@ import * as LanguageDetector from 'i18next-browser-languagedetector'; import * as reacti18next from "react-i18next"; const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false }); +export const ClientHandler = React.memo(function ClientHandler(_props: ClientHandlerProps) { + const { + linkId, + handlerId, + context = [], + ml, + onClose, + fillSize, + error: outerError, + ...props + } = _props; + const deep = useDeep(); + const _ml = ml || deep?.minilinks; + const hid = useFindClientHandler(_props); + const { data: files } = useDeepSubscription({ + id: hid?.dist_id || 0, + }); + const file = files?.[0]; + + const [{ Component, errored } = {} as any, setState] = React.useState({ Component: undefined, errored: undefined }); + + // console.log('ClientHandler root', { linkId, handlerId, context, file, hid, files, Component }); + const lastEvalRef = useRef(0); + useEffect(() => { + if (!hid) return; + const value = file?.value?.value; + console.log('ClientHandler evalClientHandler', { linkId, handlerId, context, file, value, hid, files }); + if (!value) { + return; + } + const evalId = ++lastEvalRef.current; + evalClientHandler({ value, deep }).then(({ data, error }) => { + if (evalId === lastEvalRef.current) { + console.log('ClientHandler evalClientHandler setState', { file, data, error }); + if (!error) { + setState(() => ({ Component: data })); + erroredResetRef?.current && (erroredResetRef?.current(), erroredResetRef.current = undefined); + } + else { + setErrorRef.current && setErrorRef.current(error); + setState({ Component: undefined, errored: error }); + } + } else { + console.log('ClientHandler evalClientHandler outdated', { file, data, error, evalId, 'lastEvalRef.current': lastEvalRef.current }); + } + }); + }, [file?.value?.value, hid]); + + const erroredResetRef = useRef(); + const setErrorRef = useRef(); + + return (<> + { + erroredResetRef.current = reset; + return
+ reset + + {error?.message || (error || '')?.toString()} + {!!error?.stack && + 
{error?.stack}
+ } +
+ }} + onMounted={(setError) => setErrorRef.current = setError} + > + {(typeof (Component) === 'function') ? <> + {[]} + : <>} + + ); +}); + DeepClient.resolveDependency = async (path: string) : Promise => { if (path == 'peerjs') { return await import('peerjs'); @@ -196,7 +287,7 @@ export interface ClientHandlerRendererProps { [key: string]: any; }; -export function ClientHandlerRenderer({ +export const ClientHandlerRenderer = React.memo(function ClientHandlerRenderer({ Component, fillSize = false, onClose, @@ -211,7 +302,7 @@ export function ClientHandlerRenderer({ ...props?.style, }} />}; -} +}); export interface ClientHandlerProps extends Partial { linkId: number; @@ -258,94 +349,3 @@ export function useFindClientHandler({ })(); }, [context, handlerId, hid]); return hid; } - -export function ClientHandler(_props: ClientHandlerProps) { - const { - linkId, - handlerId, - context = [], - ml, - onClose, - fillSize, - error: outerError, - ...props - } = _props; - const deep = useDeep(); - const _ml = ml || deep?.minilinks; - const hid = useFindClientHandler(_props); - const { data: files } = useDeepSubscription({ - id: hid?.dist_id || 0, - }); - const file = files?.[0]; - - const [{ Component, errored } = {} as any, setState] = React.useState({ Component: undefined, errored: undefined }); - - // console.log('ClientHandler root', { linkId, handlerId, context, file, hid, files, Component }); - const lastEvalRef = useRef(0); - useEffect(() => { - if (!hid) return; - const value = file?.value?.value; - console.log('ClientHandler evalClientHandler', { linkId, handlerId, context, file, value, hid, files }); - if (!value) { - return; - } - const evalId = ++lastEvalRef.current; - evalClientHandler({ value, deep }).then(({ data, error }) => { - if (evalId === lastEvalRef.current) { - console.log('ClientHandler evalClientHandler setState', { file, data, error }); - if (!error) { - setState(() => ({ Component: data })); - erroredResetRef?.current && (erroredResetRef?.current(), erroredResetRef.current = undefined); - } - else { - setErrorRef.current && setErrorRef.current(error); - setState({ Component: undefined, errored: error }); - } - } else { - console.log('ClientHandler evalClientHandler outdated', { file, data, error, evalId, 'lastEvalRef.current': lastEvalRef.current }); - } - }); - }, [file?.value?.value, hid]); - - const erroredResetRef = useRef(); - const setErrorRef = useRef(); - - return (<> - { - erroredResetRef.current = reset; - return
- reset - - {error?.message || (error || '')?.toString()} - {!!error?.stack && - 
{error?.stack}
- } -
- }} - onMounted={(setError) => setErrorRef.current = setError} - > - {(typeof (Component) === 'function') ? <> - {[]} - : <>} - - ); -} diff --git a/imports/cyto-handler.tsx b/imports/cyto-handler.tsx index ee72ca7e..49eb8093 100644 --- a/imports/cyto-handler.tsx +++ b/imports/cyto-handler.tsx @@ -74,7 +74,7 @@ export function useCytoHandlersApply(cyh, elements, stylesheets, iterator) { } } -export function CytoHandlers({ +export const CytoHandlers = React.memo(function CytoHandlers({ onChange, handled, elementsById, @@ -99,7 +99,7 @@ export function CytoHandlers({ return <> {HandleCyto ? arr : []} ; -} +}); export const CytoHandler = React.memo(function CytoHandler({ linkId, diff --git a/imports/cyto/drop-zone.tsx b/imports/cyto/drop-zone.tsx index d1638746..26448c1d 100644 --- a/imports/cyto/drop-zone.tsx +++ b/imports/cyto/drop-zone.tsx @@ -7,7 +7,7 @@ import axios from 'axios'; let counter = 0; -export function CytoDropZone({ +export const CytoDropZone = React.memo(function CytoDropZone({ cy, children, gqlPath, @@ -113,4 +113,4 @@ export function CytoDropZone({ children, deep, }); -} \ No newline at end of file +}); \ No newline at end of file diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx index f931226a..99543d4a 100644 --- a/imports/cyto/editor.tsx +++ b/imports/cyto/editor.tsx @@ -133,17 +133,17 @@ export function useFindClientHandlerByCode({ return hid; } -export function List({ link }) { +export const List = React.memo(function List({ link }: { link: any }) { const deep = useDeep(); const { data: contained } = deep.useDeepSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: link.id } }); return <> { - {contained.map(c => )} + {contained.map(c => )} } ; -} +}, () => true); export const Item = React.memo(function Item({ link, @@ -291,14 +291,15 @@ export const Item = React.memo(function Item({ ; }); -export function CytoEditorNav({ +export const CytoEditorNav = React.memo(function CytoEditorNav({ portalRef }: { portalRef?: any; }) { const deep = useDeep(); const [spaceId] = useSpaceId(); - const links = deep.useMinilinksSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: spaceId } }); + const [space] = deep.useMinilinksSubscription({ id: spaceId || 0 }); + const links = deep.useMinilinksSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: spaceId || 0 } }); const { tab, tabs, @@ -312,8 +313,8 @@ export function CytoEditorNav({ return <>
- {!!deep.minilinks.byId[spaceId] && - + { await deep.insert({ @@ -334,12 +335,12 @@ export function CytoEditorNav({ } - {links.map(l => )} + {links.map(l => )}
; -} +}, () => true); -export function CytoEditor() { +export const CytoEditor = React.memo(function CytoEditor() { const [cytoEditor, setCytoEditor] = useCytoEditor(); const onClose = useCallback(() => { setCytoEditor(false); @@ -619,4 +620,4 @@ export function CytoEditor() { ; -} +}, () => true); diff --git a/imports/cyto/react.tsx b/imports/cyto/react.tsx index 301e041c..a2417315 100644 --- a/imports/cyto/react.tsx +++ b/imports/cyto/react.tsx @@ -30,7 +30,7 @@ const aligns = [ 100 * (align[valignBox] - 0.5) ]; -export function CytoReactLayout({ +export const CytoReactLayout = React.memo(function CytoReactLayout({ cy, elements = [], generateId = defaultGenerateId, @@ -134,4 +134,4 @@ export function CytoReactLayout({
; })} ; -} \ No newline at end of file +}); \ No newline at end of file diff --git a/imports/loader.tsx b/imports/loader.tsx index fb042a77..d92ee174 100644 --- a/imports/loader.tsx +++ b/imports/loader.tsx @@ -6,8 +6,9 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from " import { useBreadcrumbs, useShowOpened } from "./hooks"; import { CatchErrors } from "./react-errors"; import { useDelayedInterval } from "./use-delayed-interval"; +import _ from 'lodash'; -export function DeepLoaderActive({ +export const DeepLoaderActive = React.memo(function DeepLoaderActive({ name, query: queryLink, onChange, @@ -16,7 +17,7 @@ export function DeepLoaderActive({ }: { name: string; query: any; - onChange: (results: Link[]) => any; + onChange: (results: Link[], query: any) => any; debounce?: number; subscription?: boolean; }) { @@ -56,17 +57,17 @@ export function DeepLoaderActive({ }), [queryLink, queryLink?.value?.value]), debounce); useEffect(() => { - if (subQueryPrimary?.data?.q0 && !subQueryPrimary?.loading) onChange && onChange(subQueryPrimary?.data?.q0); + if (subQueryPrimary?.data?.q0 && !subQueryPrimary?.loading) onChange && onChange(subQueryPrimary?.data?.q0, queryLink); }, [subQueryPrimary]); useEffect(() => { return () => { - onChange && onChange([]); + onChange && onChange([], queryLink); } }, []); return <>; -} +}); export const DeepLoader = memo(function DeepLoader({ spaceId, @@ -157,21 +158,31 @@ export const DeepLoader = memo(function DeepLoader({ }, } } }), []); - let queries = useMinilinksFilter( - deep.minilinks, - useCallback((l, ...args) => { - // console.log('ABC', l, ...args); - // console.trace('ABC'); - return [deep.idLocal('@deep-foundation/core', 'Query'), deep.idLocal('@deep-foundation/core', 'Active')].includes(l.type_id); - }, [spaceId]), - useCallback((l, ml) => { - return ml.byType[deep.idLocal('@deep-foundation/core', 'Query')]?.filter((l) => { - return l?.type_id === deep.idLocal('@deep-foundation/core', 'Query') && !!l?.inByType?.[deep.idLocal('@deep-foundation/core', 'Active')]?.find(a => a?.from_id === spaceId) && l?.value?.value; - }); - }, [spaceId]), - 1000, - ); - queries = queries || []; + const queries = deep.useMinilinksSubscription({ + type_id: deep.idLocal('@deep-foundation/core', 'Query'), + in: { + type_id: deep.idLocal('@deep-foundation/core', 'Active'), + from_id: spaceId, + value: { + value: { _is_null: false } + }, + }, + }); + // let queries = useMinilinksFilter( + // deep.minilinks, + // useCallback((l, ...args) => { + // // console.log('ABC', l, ...args); + // // console.trace('ABC'); + // return [deep.idLocal('@deep-foundation/core', 'Query'), deep.idLocal('@deep-foundation/core', 'Active')].includes(l.type_id); + // }, [spaceId]), + // useCallback((l, ml) => { + // return ml.byType[deep.idLocal('@deep-foundation/core', 'Query')]?.filter((l) => { + // return l?.type_id === deep.idLocal('@deep-foundation/core', 'Query') && !!l?.inByType?.[deep.idLocal('@deep-foundation/core', 'Active')]?.find(a => a?.from_id === spaceId) && l?.value?.value; + // }); + // }, [spaceId]), + // 1000, + // ); + // queries = queries || []; const insertableTypesQuery = useMemo(() => ({ value: { value: { _or: [ @@ -336,80 +347,88 @@ export const DeepLoader = memo(function DeepLoader({ // notApplied: deep.minilinks.links.filter(l => !l?._applies?.includes('not-loaded-ends')), // }); + const queryChanged = useCallback((r, q) => { + deep.minilinks?.apply(r, `query-${q.id}`); + }, []); + + const breadcrumbsChanged = useCallback((r) => { + deep.minilinks?.apply(r, 'breadcrumbs'); + }, []); + + const containsAndSymbolsChanged = useCallback((r) => { + deep.minilinks?.apply(r, 'contains_and_symbols'); + }, []); + + const valuesChanged = useCallback((r) => { + deep.minilinks?.apply(r, 'values'); + }, []); + return <> <> { + onChange={useCallback((r) => { deep.minilinks?.apply(r, 'space'); - }} + }, [])} /> <> { + onChange={useCallback((r) => { deep.minilinks?.apply(r, 'trees'); - }} + }, [])} /> <> { + onChange={useCallback((r) => { // console.log('not-loaded-ends onChange', r, notLoadedEnds, notLoadedEndsQuery, 'ml', deep.minilinks.links.filter(l => (!!l.from_id && !l.from) || (!!l.to_id && !l.to))); deep.minilinks?.apply(r, 'not-loaded-ends'); - }} + }, [])} /> {!!breadcrumbs && <> { - deep.minilinks?.apply(r, 'breadcrumbs'); - }} + onChange={breadcrumbsChanged} />} <> { + onChange={useCallback((r) => { deep.minilinks?.apply(r, 'client-handlers'); - }} + }, [])} /> {queries?.map((f, i) => ( { - deep.minilinks?.apply(r, `query-${f.id}`); - }} + onChange={queryChanged} />))} <> { + onChange={useCallback((r) => { deep.minilinks?.apply(r, 'types'); - }} + }, [])} /> {!!typeIds && <> { - deep.minilinks?.apply(r, 'contains_and_symbols'); - }} + onChange={containsAndSymbolsChanged} />} {!!typeIds && <> { - deep.minilinks?.apply(r, 'values'); - }} + onChange={valuesChanged} />} ; }); \ No newline at end of file From 9a68dfc89519ea0317ea3d06513fcffcb2788c1b Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Sun, 22 Oct 2023 15:14:47 +0000 Subject: [PATCH 3/5] fix sidebar insert --- imports/cyto/editor.tsx | 8 ++++++ imports/cyto/hooks.tsx | 56 ++++++++++++++++++++++------------------- 2 files changed, 38 insertions(+), 26 deletions(-) diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx index 99543d4a..3d7f25a2 100644 --- a/imports/cyto/editor.tsx +++ b/imports/cyto/editor.tsx @@ -177,6 +177,7 @@ export const Item = React.memo(function Item({