From 56c6530bf1c676ee1c6f7dc0a7efa2e74a16be80 Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Sun, 27 Aug 2023 14:59:01 +0000 Subject: [PATCH 01/10] clientfirst --- imports/cyto/hooks.tsx | 4 ++-- imports/cyto/opened.tsx | 8 ++++---- imports/cyto/react.tsx | 2 +- imports/loader.tsx | 7 ++++--- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/imports/cyto/hooks.tsx b/imports/cyto/hooks.tsx index 11c95a68..dc3e4267 100644 --- a/imports/cyto/hooks.tsx +++ b/imports/cyto/hooks.tsx @@ -481,7 +481,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml) // // 'border-width': 0, // // }); // } - if (await isOpened(id)) { + if (isOpened(id)) { await close(id); } else { const { data: handler } = await deep.select({ @@ -714,7 +714,7 @@ export function useCyInitializer({ // // return element object to be passed to cy.add() for edge // return {}; // }, - hoverDelay: 150, // time spent hovering over a target node before it is considered selected + hoverDelay: 0, // time spent hovering over a target node before it is considered selected snap: true, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs) snapThreshold: 0, // the target node must be less than or equal to this many pixels away from the cursor/finger snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive) diff --git a/imports/cyto/opened.tsx b/imports/cyto/opened.tsx index c4d78b3c..9c32c73b 100644 --- a/imports/cyto/opened.tsx +++ b/imports/cyto/opened.tsx @@ -5,7 +5,7 @@ import { useMemo } from "react"; export function useOpenedMethods(): { open: (id: number, handlerId: number) => void; close: (id: number) => void; - isOpened: (id: number) => Promise; + isOpened: (id: number) => boolean; } { const [spaceId] = useSpaceId(); const spaceIdRef = useRefAutofill(spaceId); @@ -17,8 +17,8 @@ export function useOpenedMethods(): { OpenedHandler = await deep.id('@deep-foundation/deepcase-opened', 'OpenedHandler'); })(); return { - isOpened: async (id) => { - const q = await deep.select({ + isOpened: (id) => { + const q = deep.minilinks.query({ type_id: OpenedHandler, from: { type_id: Opened, @@ -26,7 +26,7 @@ export function useOpenedMethods(): { to_id: id, }, }); - const openedHandler = q?.data?.[0]; + const openedHandler = q?.[0]; return !!openedHandler }, close: async (id) => { diff --git a/imports/cyto/react.tsx b/imports/cyto/react.tsx index 301e041c..c2d27047 100644 --- a/imports/cyto/react.tsx +++ b/imports/cyto/react.tsx @@ -89,7 +89,7 @@ export function CytoReactLayout({ stl.msTransform = val; stl.transform = val; } - cy.$(`#id`).style({ }); + cy.$(`#${id}`).style({ }); } } diff --git a/imports/loader.tsx b/imports/loader.tsx index fb042a77..6a2539cf 100644 --- a/imports/loader.tsx +++ b/imports/loader.tsx @@ -24,7 +24,8 @@ export function DeepLoaderActive({ const deep = useDeep(); const subQuery = useMemo(() => { const v = (queryLink?.value?.value); - const variables = deep.serializeQuery(v); + // @ts-ignore + const variables = deep.serializeQuery(v, 'links', deep?.unvertualizeId); const where = variables?.where; return generateQuery({ operation: subscription ? 'subscription' : 'query', @@ -379,8 +380,8 @@ export const DeepLoader = memo(function DeepLoader({ }} /> {queries?.map((f, i) => ( { deep.minilinks?.apply(r, `query-${f.id}`); From 0668df19a80e90f4dcc590aa35e90b264221ee6c Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Sat, 13 Jan 2024 15:18:25 +0000 Subject: [PATCH 02/10] fix typing from number to Id=number|string --- imports/check.tsx | 11 ++++---- imports/client-handler.tsx | 8 +++--- imports/cyto-handler.tsx | 15 ++++++----- imports/cyto-react-links-card.tsx | 27 ++++++++++--------- imports/cyto-react-links-packages.tsx | 7 ++--- imports/cyto/editor-preview.tsx | 4 +-- imports/cyto/editor.tsx | 18 ++++++------- imports/cyto/handlers.tsx | 24 ++++++++--------- imports/cyto/hooks.tsx | 22 +++++++-------- imports/cyto/opened.tsx | 7 ++--- imports/cyto/react.tsx | 3 ++- imports/cyto/traveler.tsx | 9 ++++--- imports/cyto/types.tsx | 4 +-- imports/editor/editor-handler.tsx | 7 ++--- imports/editor/editor-handlers.tsx | 3 ++- imports/editor/editor-results.tsx | 5 ++-- imports/editor/editor-switcher.tsx | 5 ++-- imports/editor/editor-tabs.tsx | 3 ++- imports/gql.tsx | 25 ++++++++--------- imports/hooks.tsx | 26 +++++++++--------- imports/link-client-handlers/default.tsx | 3 ++- imports/loader.tsx | 6 ++--- .../packager-interface-tabs-content.tsx | 7 ++--- .../packager-interface-tabs-menu.tsx | 3 ++- .../packager-interface-tabs.tsx | 3 ++- imports/popover-text/popover-text.tsx | 3 ++- .../text-cursor-tooltip.tsx | 3 ++- 27 files changed, 140 insertions(+), 121 deletions(-) diff --git a/imports/check.tsx b/imports/check.tsx index 9a973b05..4da2d1b9 100644 --- a/imports/check.tsx +++ b/imports/check.tsx @@ -1,18 +1,19 @@ import Debug from 'debug'; import { gql } from '@apollo/client'; import forEach from 'lodash/forEach'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; interface Node { - from_id?: number; id?: number; to_id?: number; type_id?: number; + from_id?: Id; id?: Id; to_id?: Id; type_id?: Id; in: Node[]; out: Node[]; } interface Marker { - id: number; item_id: number; path_item_depth: number; path_item_id: number; root_id: number; position_id: string; + id: Id; item_id: Id; path_item_depth: Id; path_item_id: Id; root_id: Id; position_id: string; by_position: Marker[]; } -export const check = async (hash: { [name:string]: number }, client) => { +export const check = async (hash: { [name:string]: Id }, client) => { const fetch = async () => { const result = await client.query({ query: gql`query FETCH_FOR_CHECK { mp: mp { id item_id path_item_depth path_item_id root_id position_id by_position(order_by: { path_item_depth: asc }) { id item_id path_item_depth path_item_id root_id position_id } } @@ -28,8 +29,8 @@ export const check = async (hash: { [name:string]: number }, client) => { valid = false; console.log(...args); }; - const nodesChecked: { [id: number]: boolean; } = {}; - const markersChecked: { [id: number]: boolean; } = {}; + const nodesChecked: { [id: Id]: boolean; } = {}; + const markersChecked: { [id: Id]: boolean; } = {}; const checkNode = (node: Node) => { if (nodesChecked[node.id]) return; else nodesChecked[node.id] = true; diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx index 99ec45bf..afe02110 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, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks"; +import { Id, useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks"; import axios from 'axios'; import * as axiosHooks from 'axios-hooks'; import * as classnames from 'classnames'; @@ -332,9 +332,9 @@ export const ClientHandlerRenderer = React.memo(function ClientHandlerRenderer({ }); export interface ClientHandlerProps extends Partial { - linkId: number; - handlerId?: number; - context?: number[]; + linkId: Id; + handlerId?: Id; + context?: Id[]; ml?: any; error?: any; onClose?: () => any, diff --git a/imports/cyto-handler.tsx b/imports/cyto-handler.tsx index 124686d7..20a0f814 100644 --- a/imports/cyto-handler.tsx +++ b/imports/cyto-handler.tsx @@ -7,6 +7,7 @@ import { evalClientHandler, r } from './client-handler'; import { useDebounceCallback } from '@react-hook/debounce'; import { useCytoHandlersSwitch, useInsertingCytoStore } from './hooks'; import { useCytoHandlersRules } from './cyto/hooks'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false }); export interface CytoHandlerRendererProps { @@ -16,17 +17,17 @@ export interface CytoHandlerRendererProps { }; export interface CytoHandlerProps extends Partial { - linkId: number; - handlerId?: number; - onChange?: (id: number, handled?: { - handlerId?: number; + linkId: Id; + handlerId?: Id; + onChange?: (id: Id, handled?: { + handlerId?: Id; error?: any; elements?: any[]; stylesheets?: any[]; }) => void; elementsById: { [key: string]: any }; cy?: any; - HandleCyto?: number; + HandleCyto?: Id; } export function useCytoHandlers() { @@ -80,8 +81,8 @@ export const CytoHandlers = React.memo(function CytoHandlers({ elementsById, cy, }: { - onChange: (id: number, result: any) => void; - handled: { [key: string]: number }; + onChange: (id: Id, result: any) => void; + handled: { [key: string]: Id }; elementsById: { [key: string]: any }; cy?: any; }) { diff --git a/imports/cyto-react-links-card.tsx b/imports/cyto-react-links-card.tsx index 382cf28d..255bfea1 100644 --- a/imports/cyto-react-links-card.tsx +++ b/imports/cyto-react-links-card.tsx @@ -6,22 +6,23 @@ import { BsCheck2, BsDoorClosed, BsGrid3X2Gap, BsListUl, BsSearch } from 'react- import { TbPackages } from 'react-icons/tb'; import { DotsLoader } from './dot-loader'; import { IPackageProps, PackagesBlock } from './cyto-react-links-packages'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; interface IGridPanel { - id?: number; + id?: Id; src?: string; alt?: string; } interface IListPanel { - id?: number; + id?: Id; src?: string; linkName?: string; containerName?: string; } export interface ITypeIcon { - src: string | number; + src: Id; borderColor?: any; borderWidth?: any; boxSize?: string; @@ -108,8 +109,8 @@ export const GridPanel = React.memo(({ borderColor?: string; borderColorSelected?: string; data: IGridPanel[]; - selectedLink: number; - onSelectLink?: (linkId: number) => any; + selectedLink: Id; + onSelectLink?: (linkId: Id) => any; gridTemplateColumns?: string; columnGap?: number; rowGap?: number; @@ -153,13 +154,13 @@ const CytoListItem = React.memo(({ onSelectLink, scrollRef, }:{ - id?: number; + id?: Id; src?: string; linkName?: string; containerName?: string; borderColor?: string; - selectedLink: number; - onSelectLink?: (linkId: number) => any; + selectedLink: Id; + onSelectLink?: (linkId: Id) => any; scrollRef?: any; }) => { @@ -211,8 +212,8 @@ const ListPanel = React.memo(({ }: { borderColor?: string; data: IListPanel[]; - onSelectLink?: (linkId: number) => any; - selectedLink: number; + onSelectLink?: (linkId: Id) => any; + selectedLink: Id; }) => { const scrollRef = useRef(null); @@ -244,20 +245,20 @@ export const CytoReactLinksCard = React.memo(({ selectedLinkId = 0, }: { elements: { - id: number; + id: Id; src?: string; linkName: string; containerName: string; }[]; packages?: IPackageProps[]; - onSubmit?: (id: number) => any; + onSubmit?: (id: Id) => any; onClose?: () => any; loading?: boolean; noResults: any; search?: any; onSearch?: any; fillSize?: boolean; - selectedLinkId?: number; + selectedLinkId?: Id; }) => { const [switchLayout, setSwitchLayout] = useState('grid'); // const [switchLayout, setSwitchLayout] = useState('packages'); diff --git a/imports/cyto-react-links-packages.tsx b/imports/cyto-react-links-packages.tsx index 02852de3..cf2b7656 100644 --- a/imports/cyto-react-links-packages.tsx +++ b/imports/cyto-react-links-packages.tsx @@ -6,6 +6,7 @@ import { DotsLoader } from './dot-loader'; import { TbArrowRotaryFirstRight, TbBookDownload, TbAtom } from 'react-icons/tb'; import { GridPanel } from './cyto-react-links-card'; import _ from 'lodash'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; const iconVariants = { @@ -26,13 +27,13 @@ const iconVariants = { } }; export interface IPackage { - id?: number; + id?: Id; src?: string; containerName?: string; version?: string; isActive?: boolean; typeElements?: { - id: number; + id: Id; src?: any; }[]; } @@ -114,7 +115,7 @@ const PackageItemAccordion = React.memo(({ isActive, typeElements = arrElem, }:IPackage) => { - const [expanded, setExpanded] = useState(false); + const [expanded, setExpanded] = useState(false); const isOpen = id === expanded; return (<> diff --git a/imports/cyto/editor-preview.tsx b/imports/cyto/editor-preview.tsx index 7a450b46..cd2ab2a3 100644 --- a/imports/cyto/editor-preview.tsx +++ b/imports/cyto/editor-preview.tsx @@ -1,6 +1,6 @@ import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button, Box, HStack, Flex, IconButton } from '@chakra-ui/react'; import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; -import { Link, MinilinksInstance, MinilinksResult, useMinilinksApply, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; +import { Id, Link, MinilinksInstance, MinilinksResult, useMinilinksApply, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; import { ClientHandlerRenderer, evalClientHandler } from '../client-handler'; import { useLocalStore } from '@deep-foundation/store/local'; import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; @@ -21,7 +21,7 @@ import { VscClearAll } from 'react-icons/vsc'; // global._callClientHandler = callClientHandler; export interface EditorTab { - id: number; + id: Id; saved: boolean; active?: boolean; loading?: boolean; diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx index f71f2158..63204bfe 100644 --- a/imports/cyto/editor.tsx +++ b/imports/cyto/editor.tsx @@ -25,7 +25,7 @@ import { Portal, } from '@chakra-ui/react'; import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; -import { Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; +import { Id, 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'; @@ -52,7 +52,7 @@ const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.de // global._callClientHandler = callClientHandler; export interface EditorTab { - id: number; + id: Id; saved: boolean; active?: boolean; loading?: boolean; @@ -80,7 +80,7 @@ export function useEditorValueSaver(tab) { export function useEditorTabs() { const [tabs, setTabs] = useLocalStore('editor-tabs', []); - const [tab, setTab] = useLocalStore('editor-tab', 0); + const [tab, setTab] = useLocalStore('editor-tab', 0); const tabsRef = useRef(); tabsRef.current = tabs; return { @@ -111,11 +111,11 @@ export function useEditorTabs() { export function useFindClientHandlerByCode({ codeLinkId, }: { - codeLinkId: number; + codeLinkId: Id; }) { const deep = useDeep(); const [hid, setHid] = useState(); - const prevCodeLinkId = useRef(); + const prevCodeLinkId = useRef(); useEffect(() => { (async () => { if (!codeLinkId || codeLinkId === prevCodeLinkId.current) return; const { data: handlers } = await deep.select({ @@ -157,13 +157,13 @@ export const Item = React.memo(function Item({ addTab, isActive = false, }: { - link: Link; + link: Link; openable?: boolean; deletable?: boolean; children?: any; portalRef?: any; - closeTab?: (id: number) => void; - activeTab?: (id: number) => void; + closeTab?: (id: Id) => void; + activeTab?: (id: Id) => void; addTab?: (tab: any) => void; isActive?: boolean; }) { @@ -239,7 +239,7 @@ export const Item = React.memo(function Item({ } {/* {currentSymbol} | {typeSymbol} */}  { if (deep.minilinks.byId[link.id].inByType[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value) { diff --git a/imports/cyto/handlers.tsx b/imports/cyto/handlers.tsx index e5a2fecd..71df00f4 100644 --- a/imports/cyto/handlers.tsx +++ b/imports/cyto/handlers.tsx @@ -3,7 +3,7 @@ import { ChevronDownIcon } from '@chakra-ui/icons'; import { Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Flex, SimpleGrid, Text, Button, Spacer, useColorMode, InputGroup, Input, InputRightElement, Tag, TagCloseButton, TagLabel, HStack, VStack, Select, Menu, MenuButton, MenuItem, MenuList, IconButton, InputLeftElement } from '@chakra-ui/react'; import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; import { generateQuery, generateQueryData } from '@deep-foundation/deeplinks/imports/gql'; -import { Link, useMinilinksApply, useMinilinksQuery, useMinilinksSubscription } from '@deep-foundation/deeplinks/imports/minilinks'; +import { Id, Link, useMinilinksApply, useMinilinksQuery, useMinilinksSubscription } from '@deep-foundation/deeplinks/imports/minilinks'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { CytoReactLinkAvatar } from '../cyto-react-avatar'; import { EditorHandler } from '../editor/editor-handler'; @@ -18,9 +18,9 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEdit handle, portalRef, }: { - support: Link; - handler: Link; - handle: Link; + support: Link; + handler: Link; + handle: Link; portalRef?: any; }) { const deep = useDeep(); @@ -109,7 +109,7 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEdit const Form = useCallback(( isLink || isClient - ? ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => { + ? ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => { return (function CytoEdit ; } : isPort - ? ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => { + ? ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => { return { @@ -197,7 +197,7 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEdit : null} ; } - : ({ value, onInsert }: { value: string, onInsert: (id?: number) => void }) => { + : ({ value, onInsert }: { value: string, onInsert: (id?: Id) => void }) => { return { @@ -293,9 +293,9 @@ export const CytoEditorHandlersSupport = React.memo(function CytoEditorHand handleredableIds, portalRef, }: { - support: Link; - linkId: number; - handleredableIds: number[]; + support: Link; + linkId: Id; + handleredableIds: Id[]; portalRef?: any; }) { const deep = useDeep(); @@ -377,8 +377,8 @@ export const CytoEditorHandlers = React.memo(function CytoEditorHandlers({ linkId, handleredableIds, }: { - linkId: number; - handleredableIds: number[]; + linkId: Id; + handleredableIds: Id[]; }) { const deep = useDeep(); diff --git a/imports/cyto/hooks.tsx b/imports/cyto/hooks.tsx index 4463205c..dac7fad4 100644 --- a/imports/cyto/hooks.tsx +++ b/imports/cyto/hooks.tsx @@ -1,6 +1,6 @@ import { Alert, AlertIcon, Box, Flex, HStack, IconButton, Popover, PopoverContent, PopoverTrigger, Portal, SlideFade, Spacer, Spinner, useDisclosure, useToast } from "@chakra-ui/react"; import { useDeep, useDeepId, useDeepQuery, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client"; -import { Link, useMinilinksFilter, useMinilinksHandle, useMinilinksQuery } from "@deep-foundation/deeplinks/imports/minilinks"; +import { Id, Link, useMinilinksFilter, useMinilinksHandle, useMinilinksQuery } from "@deep-foundation/deeplinks/imports/minilinks"; import { useDebounceCallback } from "@react-hook/debounce"; import React, { useState, useMemo, useCallback, useEffect, useRef } from "react"; import { useHotkeys } from "react-hotkeys-hook"; @@ -22,14 +22,14 @@ import { useOpenedMethods } from "./opened"; export interface IInsertedLink { position: { x: number; y: number; }; - from: number; to: number; - alterResolve?: (link: Link) => void; + from: Id; to: Id; + alterResolve?: (link: Link) => void; props?: any; }; export interface IUpdatedLink { position: { x: number; y: number; }; - from: number; to: number; + from: Id; to: Id; }; const delay = (time) => new Promise(res => setTimeout(res, time)); @@ -56,7 +56,7 @@ export const FinderPopover = React.memo(function FinderPopover({ query = undefined, search = undefined, }: { - link: Link; + link: Link; onSubmit: (link) => void; onChange?: (link) => void; onOpen?: () => void; @@ -69,7 +69,7 @@ export const FinderPopover = React.memo(function FinderPopover({ search?: string; }) { const deep = useDeep(); - const [selectedLink, setSelectedLink] = useState>(); + const [selectedLink, setSelectedLink] = useState>(); const { onOpen: _onOpen, onClose: _onClose, isOpen: _isOpen } = useDisclosure(); const { data: Finder } = useDeepId('@deep-foundation/finder', 'Finder'); return >(); + const [selectedLink, setSelectedLink] = useState>(); return <> {!!Finder && { + startUpdatingLink: (id: Id) => { const link = ml.byId[id]; const linkName = link?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value || link?.id; const Type = link.type; @@ -335,7 +335,7 @@ export function useLinkInserting(elements = [], reactElements = [], focus, cyRef setUpdatingLink(undefined); setUpdatingCyto({ id, toast: t }); }, - startInsertingOfType: (id: number, From: number, To: number) => { + startInsertingOfType: (id: Id, From: Id, To: Id) => { const link = ml.byId[id]; const isNode = !From && !To; const isPossibleNode = isNode || (From === To && From === deep.idLocal('@deep-foundation/core', 'Any')); @@ -529,7 +529,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, } }, [reactElements, Opened]); - const toggleLinkReactElement = async (id: number) => { + const toggleLinkReactElement = async (id: Id) => { const cy = cyRef.current; // const isEnabling = !linkReactElements[id]; // if (isEnabling) { @@ -570,7 +570,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, }; const AnyLinkComponent = useMemo(() => { - return function AnyLinkComponent({ id }: { id: number }) { + return function AnyLinkComponent({ id }: { id: Id }) { const [linkId, setLinkId] = useState(id); const deep = useDeep(); const [handlerId, setHandlerId] = useState(); diff --git a/imports/cyto/opened.tsx b/imports/cyto/opened.tsx index c4d78b3c..ab8e4fbf 100644 --- a/imports/cyto/opened.tsx +++ b/imports/cyto/opened.tsx @@ -1,11 +1,12 @@ import { useDeep, useDeepId } from "@deep-foundation/deeplinks/imports/client"; import { useRefAutofill, useSpaceId } from "../hooks"; import { useMemo } from "react"; +import { Id } from "@deep-foundation/deeplinks/imports/minilinks"; export function useOpenedMethods(): { - open: (id: number, handlerId: number) => void; - close: (id: number) => void; - isOpened: (id: number) => Promise; + open: (id: Id, handlerId: Id) => void; + close: (id: Id) => void; + isOpened: (id: Id) => Promise; } { const [spaceId] = useSpaceId(); const spaceIdRef = useRefAutofill(spaceId); diff --git a/imports/cyto/react.tsx b/imports/cyto/react.tsx index 30635f67..88db8dd3 100644 --- a/imports/cyto/react.tsx +++ b/imports/cyto/react.tsx @@ -1,3 +1,4 @@ +import { Id } from "@deep-foundation/deeplinks/imports/minilinks"; import React, { useEffect, useRef } from "react"; import ReactResizeDetector from 'react-resize-detector'; @@ -39,7 +40,7 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({ cy: any; elements: any[]; generateId?: (id: string, spaceId: string) => string; - spaceId?: number; + spaceId?: Id; }) { const divRef = useRef(); diff --git a/imports/cyto/traveler.tsx b/imports/cyto/traveler.tsx index 9d855231..0325474c 100644 --- a/imports/cyto/traveler.tsx +++ b/imports/cyto/traveler.tsx @@ -1,3 +1,4 @@ +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; import _flatten from 'lodash/flatten'; import _isEqual from 'lodash/isEqual'; @@ -11,7 +12,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) { console.log(e, deep.linkId, deep); } })(); - const insertTraveler = async (query, linkId: number) => { + const insertTraveler = async (query, linkId: Id) => { const spaceId = spaceIdRef.current; const deep = deepRef.current; await deep.insert({ @@ -41,7 +42,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) { } }, }); }; - const deleteTraveler = async (query, linkId: number) => { + const deleteTraveler = async (query, linkId: Id) => { const deep = deepRef.current; const travelers = findTravlers(query, linkId); if (!travelers?.length) return; @@ -57,7 +58,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) { ]); }; - const switchTraveler = async (query, linkId: number) => { + const switchTraveler = async (query, linkId: Id) => { const travelers = findTravlers(query, linkId); if (travelers?.length) { await deleteTraveler(query, linkId); @@ -66,7 +67,7 @@ export function initializeTraveler(ncy, deepRef, spaceIdRef) { } } - const findTravlers = (query: any, linkId: number) => { + const findTravlers = (query: any, linkId: Id) => { const spaceId = spaceIdRef.current; const deep = deepRef.current; if (!Traveler) return []; diff --git a/imports/cyto/types.tsx b/imports/cyto/types.tsx index a943dfbc..09c296e3 100644 --- a/imports/cyto/types.tsx +++ b/imports/cyto/types.tsx @@ -1,7 +1,7 @@ -import { Link, MinilinksResult } from '@deep-foundation/deeplinks/imports/minilinks'; +import { Id, Link, MinilinksResult } from '@deep-foundation/deeplinks/imports/minilinks'; export interface CytoGraphProps { - links: Link[]; + links: Link[]; cytoViewportRef?: any; cyRef?: any; gqlPath: string; diff --git a/imports/editor/editor-handler.tsx b/imports/editor/editor-handler.tsx index 5847ef4f..ecbc59d0 100644 --- a/imports/editor/editor-handler.tsx +++ b/imports/editor/editor-handler.tsx @@ -2,18 +2,19 @@ import React from 'react'; import { VscAdd } from 'react-icons/vsc'; import { CytoReactLinkAvatar } from '../cyto-react-avatar'; import { Flex, Box, HStack, Text, Divider, VStack, Select, useColorMode, Container, Switch } from '@chakra-ui/react'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; interface IReason { - id?: number; + id?: Id; name?: string; } interface IHandler { - id?: number; + id?: Id; avatarElement?: any; title?: string; reasons?: IReason[]; - onChangeReason?: (reasonId?: number) => void; + onChangeReason?: (reasonId?: Id) => void; sync?: boolean; onChangeSync?: (sync?: boolean) => void; children?: any; diff --git a/imports/editor/editor-handlers.tsx b/imports/editor/editor-handlers.tsx index 0d4532a8..5d651966 100644 --- a/imports/editor/editor-handlers.tsx +++ b/imports/editor/editor-handlers.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { VscAdd } from 'react-icons/vsc'; import { Flex, Box, Button, Divider, ButtonGroup, Spacer } from '@chakra-ui/react'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; export const EditorHandlers = React.memo(({ @@ -10,7 +11,7 @@ export const EditorHandlers = React.memo(({ setGenerated, }:{ children?: any; - onAddHandler?: (id: number) => void; + onAddHandler?: (id: Id) => void; generated?: string; setGenerated?: (generated: string) => void; }) => { diff --git a/imports/editor/editor-results.tsx b/imports/editor/editor-results.tsx index 1a3c5df3..8435034f 100644 --- a/imports/editor/editor-results.tsx +++ b/imports/editor/editor-results.tsx @@ -2,11 +2,12 @@ import React from 'react'; import { VscAdd } from 'react-icons/vsc'; import { Flex, Box, Button, Divider, ButtonGroup, Spacer } from '@chakra-ui/react'; import { useDeep } from '@deep-foundation/deeplinks/imports/client'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; export const EditorResultsResolvesRejects = React.memo(({ promiseId }: { - promiseId: number; + promiseId: Id; }) => { const deep = useDeep(); const resolves = deep.useMinilinksSubscription({ @@ -30,7 +31,7 @@ export const EditorResultsResolvesRejects = React.memo(({ export const EditorResults = React.memo(({ id, }:{ - id: number; + id: Id; }) => { const deep = useDeep(); deep.useDeepSubscription({ diff --git a/imports/editor/editor-switcher.tsx b/imports/editor/editor-switcher.tsx index d5fa9c4e..b3186664 100644 --- a/imports/editor/editor-switcher.tsx +++ b/imports/editor/editor-switcher.tsx @@ -3,6 +3,7 @@ import { Input, HStack, Button, useColorMode, ButtonGroup, FormControl, FormLabe import { FinderPopover } from '../cyto/hooks'; import { useSpaceId } from '../hooks'; import { useDeep } from '@deep-foundation/deeplinks/imports/client'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; export const EditorSwitcher = React.memo(({ @@ -18,8 +19,8 @@ export const EditorSwitcher = React.memo(({ area?: string; setArea?: (e: any) => any; rightArea?: string; - setCurrentLinkId?: (currentLinkId: number) => any; - currentLinkId: number; + setCurrentLinkId?: (currentLinkId: Id) => any; + currentLinkId: Id; setFillSize?: (fillSize: boolean) => any; fillSize: boolean; portalRef?: any; diff --git a/imports/editor/editor-tabs.tsx b/imports/editor/editor-tabs.tsx index 7e18af06..a78131fe 100644 --- a/imports/editor/editor-tabs.tsx +++ b/imports/editor/editor-tabs.tsx @@ -5,9 +5,10 @@ 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'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; interface ITab { - id: number; + id: Id; title: string; saved?: boolean; loading?: boolean; diff --git a/imports/gql.tsx b/imports/gql.tsx index 48af08a6..daff2b58 100644 --- a/imports/gql.tsx +++ b/imports/gql.tsx @@ -2,6 +2,7 @@ import gql from 'graphql-tag'; import { useMutation } from '@apollo/client'; import { useCallback } from 'react'; import { generateMutation, generateSerial, ISerialOptions } from '@deep-foundation/deeplinks/imports/gql'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; export const JWT = gql`query JWT($linkId: Int) { jwt(input: {linkId: $linkId}) { @@ -43,7 +44,7 @@ export const DELETE_LINKS = gql`mutation DELETE_LINKS($where: links_bool_exp!) { export const INSERT_STRING = gql`mutation INSERT_STRING($objects: [string_insert_input!]!) { insert_string: insert_string(objects: $objects) { returning { id } } }`; export const UPDATE_STRING = gql`mutation UPDATE_STRING($set: string_set_input, $where: string_bool_exp!) { update_string: update_string(_set: $set, where: $where) { returning { id } } }`; -export const insertLinks = (links: { from_id?: number; to_id?: number; type_id: number; }[]) => { +export const insertLinks = (links: { from_id?: Id; to_id?: Id; type_id: Id; }[]) => { return generateSerial({ actions: [ generateMutation({ @@ -55,7 +56,7 @@ export const insertLinks = (links: { from_id?: number; to_id?: number; type_id: }); } -export const deleteLinks = (ids: number[]) => { +export const deleteLinks = (ids: Id[]) => { return generateSerial({ actions: [ generateMutation({ @@ -67,7 +68,7 @@ export const deleteLinks = (ids: number[]) => { }); } -export const insertReserved = (reserved_ids: String[], userId: Number ) => { +export const insertReserved = (reserved_ids: String[], userId: Id ) => { return generateSerial({ actions: [ generateMutation({ @@ -79,7 +80,7 @@ export const insertReserved = (reserved_ids: String[], userId: Number ) => { }); } -export const deleteReserveds = (reserveds: number[]) => { +export const deleteReserveds = (reserveds: Id[]) => { return generateSerial({ actions: [ generateMutation({ @@ -91,7 +92,7 @@ export const deleteReserveds = (reserveds: number[]) => { }); } -export const insertLink = (link: { from_id?: number; to_id?: number; type_id: number; }) => { +export const insertLink = (link: { from_id?: Id; to_id?: Id; type_id: Id; }) => { return generateSerial({ actions: [ generateMutation({ @@ -102,7 +103,7 @@ export const insertLink = (link: { from_id?: number; to_id?: number; type_id: nu name: 'INSERT_LINK', }); } -export const deleteLink = (id: number) => { +export const deleteLink = (id: Id) => { return generateSerial({ actions: [ generateMutation({ @@ -114,7 +115,7 @@ export const deleteLink = (id: number) => { }); } -export const insertString = (link_id: number, value: string) => { +export const insertString = (link_id: Id, value: string) => { return generateSerial({ actions: [ generateMutation({ @@ -125,7 +126,7 @@ export const insertString = (link_id: number, value: string) => { name: 'INSERT_STRING', }); } -export const updateString = (id: number, value: string) => { +export const updateString = (id: Id, value: string) => { return generateSerial({ actions: [ generateMutation({ @@ -136,7 +137,7 @@ export const updateString = (id: number, value: string) => { name: 'UPDATE_STRING', }); } -export const deleteString = (id: number) => { +export const deleteString = (id: Id) => { return generateSerial({ actions: [ generateMutation({ @@ -148,7 +149,7 @@ export const deleteString = (id: number) => { }); } -export const insertBoolExp = (link_id: number, value: string) => { +export const insertBoolExp = (link_id: Id, value: string) => { return generateSerial({ actions: [ generateMutation({ @@ -159,7 +160,7 @@ export const insertBoolExp = (link_id: number, value: string) => { name: 'INSERT_BOOL_EXP', }); } -export const updateBoolExp = (id: number, value: string) => { +export const updateBoolExp = (id: Id, value: string) => { return generateSerial({ actions: [ generateMutation({ @@ -170,7 +171,7 @@ export const updateBoolExp = (id: number, value: string) => { name: 'UPDATE_BOOL_EXP', }); } -export const deleteBoolExp = (id: number) => { +export const deleteBoolExp = (id: Id) => { return generateSerial({ actions: [ generateMutation({ diff --git a/imports/hooks.tsx b/imports/hooks.tsx index 212761df..bc87271d 100644 --- a/imports/hooks.tsx +++ b/imports/hooks.tsx @@ -4,7 +4,7 @@ import { useQueryStore } from '@deep-foundation/store/query'; import React, { useEffect, useRef, useState, useMemo } from 'react'; import { layouts } from './cyto/layouts'; import { useMediaQuery as useMediaQueryChakra } from '@chakra-ui/react'; -import { Link } from '@deep-foundation/deeplinks/imports/minilinks'; +import { Id, Link } from '@deep-foundation/deeplinks/imports/minilinks'; export const defaultLeftWidth = 10; export const defaultCardWidth = 300; @@ -36,12 +36,12 @@ export function useForceGraph() { export interface IInsertingCytoStore{ isNode?: boolean; isPossibleNode?: boolean; - type_id?: number; + type_id?: Id; toast?: any; - From?: number; - To?: number; - from?: number; - to?: number; + From?: Id; + To?: Id; + from?: Id; + to?: Id; _selfLink?: boolean; } @@ -53,11 +53,11 @@ export function useInsertingCytoStore() { } export interface IUpdatingCytoStore{ - id?: number; + id?: Id; toast?: any; _selfLink?: boolean; - from?: number; - to?: number; + from?: Id; + to?: Id; } export function useUpdatingCytoStore() { @@ -174,10 +174,10 @@ export function useActiveMethods() { const deep = useDeep(); return useMemo(() => { return { - deactive: async function(id: number) { + deactive: async function(id: Id) { console.log(await deep.delete({ type_id: deep.idLocal('@deep-foundation/core', 'Active'), from_id: spaceId, to_id: id })); }, - find: async function(id: number) { + find: async function(id: Id) { const q = await deep.select({ type_id: deep.idLocal('@deep-foundation/core', 'Active'), from_id: spaceId, @@ -185,7 +185,7 @@ export function useActiveMethods() { }); return q?.data?.[0]; }, - active: async function(id: number) { + active: async function(id: Id) { const active = await this.find(id); const { data: [{ id: newId }] } = await deep.insert({ type_id: deep.idLocal('@deep-foundation/core', 'Active'), @@ -197,7 +197,7 @@ export function useActiveMethods() { } }, }); }, - toggle: async function(id: number) { + toggle: async function(id: Id) { const active = await this.find(id); let oldId = active?.id; if (!oldId) await this.active(id); diff --git a/imports/link-client-handlers/default.tsx b/imports/link-client-handlers/default.tsx index 88420250..a1f36551 100644 --- a/imports/link-client-handlers/default.tsx +++ b/imports/link-client-handlers/default.tsx @@ -1,11 +1,12 @@ import { Box, useColorModeValue } from "@chakra-ui/react"; import { useChackraColor, useChackraGlobal } from "../get-color"; +import { Id } from "@deep-foundation/deeplinks/imports/minilinks"; export function LinkClientHandlerDefault({ id, ml, }: { - id: number; + id: Id; ml: any; }) { const globalStyle = useChackraGlobal(); diff --git a/imports/loader.tsx b/imports/loader.tsx index da8d5293..7d7bbef7 100644 --- a/imports/loader.tsx +++ b/imports/loader.tsx @@ -1,7 +1,7 @@ import { useQuery, useSubscription } from "@apollo/client"; import { useDeep, useDeepId } from "@deep-foundation/deeplinks/imports/client"; import { generateQuery, generateQueryData } from "@deep-foundation/deeplinks/imports/gql"; -import { Link, useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks"; +import { Id, Link, useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks"; import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useBreadcrumbs, useShowOpened } from "./hooks"; import { CatchErrors } from "./react-errors"; @@ -17,7 +17,7 @@ export const DeepLoaderActive = React.memo(function DeepLoaderActive({ }: { name: string; query: any; - onChange: (results: Link[], query: any) => any; + onChange: (results: Link[], query: any) => any; debounce?: number; subscription?: boolean; }) { @@ -72,7 +72,7 @@ export const DeepLoaderActive = React.memo(function DeepLoaderActive({ export const DeepLoader = memo(function DeepLoader({ spaceId, }: { - spaceId?: number; + spaceId?: Id; }) { const deep = useDeep(); const userId = deep.linkId; diff --git a/imports/packager-interface/packager-interface-tabs-content.tsx b/imports/packager-interface/packager-interface-tabs-content.tsx index 07c2d8d6..4ae2e0ac 100644 --- a/imports/packager-interface/packager-interface-tabs-content.tsx +++ b/imports/packager-interface/packager-interface-tabs-content.tsx @@ -12,6 +12,7 @@ import { Loading } from '../loading-motion-bubble'; import { makeUseAxios } from "axios-hooks"; import axios from "axios"; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; const useAxios = makeUseAxios({ axios: axios.create() }); @@ -42,14 +43,14 @@ const variantsPackage = { }; export interface IPackageInstalledVersion { - id: number; + id: Id; version: string; - packageId: number; + packageId: Id; isActive: boolean; } export interface IPackage { - id: number; + id: Id; name: string; description?: any; versions?: IPackageInstalledVersion[]; diff --git a/imports/packager-interface/packager-interface-tabs-menu.tsx b/imports/packager-interface/packager-interface-tabs-menu.tsx index 2b443db2..2ed1c62b 100644 --- a/imports/packager-interface/packager-interface-tabs-menu.tsx +++ b/imports/packager-interface/packager-interface-tabs-menu.tsx @@ -3,6 +3,7 @@ import { AnimatePresence, motion, useAnimation } from 'framer-motion'; import React, { useEffect, useState } from 'react'; import { Install } from "./icons/install"; import { Uninstall } from './icons/uninstall'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; const tabInstall = { @@ -127,7 +128,7 @@ export const TabsPackages = React.memo(({ quantityInstall = 0, quantityUninstalled = 0, }:{ - selectedTab?: number; + selectedTab?: Id; onSelectMode?: () => any; quantityInstall?: number; quantityUninstalled?: number; diff --git a/imports/packager-interface/packager-interface-tabs.tsx b/imports/packager-interface/packager-interface-tabs.tsx index e252d80e..94d3c604 100644 --- a/imports/packager-interface/packager-interface-tabs.tsx +++ b/imports/packager-interface/packager-interface-tabs.tsx @@ -3,6 +3,7 @@ import { AnimatePresence, motion, useAnimation } from 'framer-motion'; import React, { useEffect, useState } from 'react'; import { Install } from "./icons/install"; import { Uninstall } from './icons/uninstall'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; const tabInstall = { @@ -107,7 +108,7 @@ export const TabsPackages = React.memo(({ onClickTab, }:{ // selectedTab?: number; - onClickTab?: (selectedTab: number) => any; + onClickTab?: (selectedTab: Id) => any; }) => { const [ selectedTab, setSelectedTab ] = useState(0); const controlInstall = useAnimation(); diff --git a/imports/popover-text/popover-text.tsx b/imports/popover-text/popover-text.tsx index 9de306ae..524282fd 100644 --- a/imports/popover-text/popover-text.tsx +++ b/imports/popover-text/popover-text.tsx @@ -1,9 +1,10 @@ import { Box, Button, chakra, Popover, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverTrigger, Square, Text, useColorModeValue } from '@chakra-ui/react'; import React, { ReactElement } from 'react'; import { useChackraColor } from '../get-color'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; export interface ITypeData { - id?: number; + id?: Id; src?: string; } diff --git a/imports/text-cursor-tooltip/text-cursor-tooltip.tsx b/imports/text-cursor-tooltip/text-cursor-tooltip.tsx index 20b15c7d..87ae0f94 100644 --- a/imports/text-cursor-tooltip/text-cursor-tooltip.tsx +++ b/imports/text-cursor-tooltip/text-cursor-tooltip.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { TypeIcon } from '../cyto-react-links-card'; import { useChackraColor } from '../get-color'; import { ITypeData } from '../popover-text/popover-text'; +import { Id } from '@deep-foundation/deeplinks/imports/minilinks'; const variants = { @@ -44,7 +45,7 @@ export const TooltipEmoji = React.memo(({ data, }:{ // children?: any; - selectedLinkId?: number; + selectedLinkId?: Id; data: ITypeData[]; }) => { const whiteAlpha = useChackraColor('whiteAlpha.600'); From 84561d6c256eecbf7a814e736b4be6cd3de8b0f0 Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Sat, 2 Mar 2024 17:54:47 +0000 Subject: [PATCH 03/10] minilinks provider --- imports/cyto/menu.tsx | 432 +++++++++++++++++++++++------------------- 1 file changed, 236 insertions(+), 196 deletions(-) diff --git a/imports/cyto/menu.tsx b/imports/cyto/menu.tsx index 4b6f0149..22138158 100644 --- a/imports/cyto/menu.tsx +++ b/imports/cyto/menu.tsx @@ -4,7 +4,7 @@ import { useDeep, useDeepId, useDeepSubscription } from "@deep-foundation/deepli import copy from "copy-to-clipboard"; import { AnimatePresence, motion, useAnimation, useCycle } from 'framer-motion'; import React, { useEffect, useState, ChangeEvent } from "react"; -import { HiMenuAlt2, HiCode, HiOutlineEyeOff } from 'react-icons/hi'; +import { HiMenuAlt2, HiCode, HiOutlineEyeOff, HiDatabase, HiDesktopComputer, HiGlobeAlt } from 'react-icons/hi'; import { SlClose } from 'react-icons/sl'; import { Appearance } from "../component-appearance"; import { useAutoFocusOnInsert, useBreadcrumbs, useContainer, useLayout, useMediaQuery, useReserved, useShowExtra, useShowFocus, useShowTypes, useSpaceId, useTraveler, useLayoutAnimation, useAsyncState, useCytoHandlersSwitch, useShowOpened } from "../hooks"; @@ -223,201 +223,241 @@ export const CytoMenu = React.memo(function CytoMenu({ from_id: spaceId, }); - return ( - - - - - <> - - - - } - onClick={() => setTogglePackager(false)} - /> - - - - } onClick={async () => { - const guest = await deep.guest(); - setSpaceId(guest.linkId); - setContainer(guest.linkId); - }} borderColor='gray.400' background='buttonBackgroundModal'/> - - - - - } onClick={() => { - setSpaceId(deep.linkId); - setContainer(deep.linkId); - }} borderColor='gray.400' background='buttonBackgroundModal' /> - - - - - } onClick={() => { - setContainer(deep.linkId); - }} borderColor='gray.400' background='buttonBackgroundModal'/> - - - - - - - - - - - - - - - - autofocus - - setAutoFocus(!autoFocus)} /> - - - - focus - - setFocus(!focus)} /> - - - - opened - - setOpened(!opened)} /> - - - - debug - - setExtra(!extra)} /> - - - - types - - setShowTypes(!showTypes)} /> - - - - traveler - - setTraveler(!traveler)} /> - - - - breadcrumbs - - setBreadcrumbs(!breadcrumbs)} /> - - - - cytoHandlers - - setCytoHandlers(!cytoHandlers)} /> - - - - animation - - setLayoutAnimation(!layoutAnimation)}/> - - - - layout - - - {/* */} - - - - {/* - - reserved - - setReserved(!reserved)}/> - */} - - - - - - - - - - - {/* */} - - - - ); + return (<> + + + + + tr + + + + + mode + + + + + + +
+ + <> + + + + } + onClick={() => setTogglePackager(false)} + /> + + + + } onClick={async () => { + const guest = await deep.guest(); + setSpaceId(guest.linkId); + setContainer(guest.linkId); + }} borderColor='gray.400' background='buttonBackgroundModal'/> + + + + + } onClick={() => { + setSpaceId(deep.linkId); + setContainer(deep.linkId); + }} borderColor='gray.400' background='buttonBackgroundModal' /> + + + + + } onClick={() => { + setContainer(deep.linkId); + }} borderColor='gray.400' background='buttonBackgroundModal'/> + + + + + + + + + + + + + + + + autofocus + + setAutoFocus(!autoFocus)} /> + + + + focus + + setFocus(!focus)} /> + + + + opened + + setOpened(!opened)} /> + + + + debug + + setExtra(!extra)} /> + + + + types + + setShowTypes(!showTypes)} /> + + + + traveler + + setTraveler(!traveler)} /> + + + + breadcrumbs + + setBreadcrumbs(!breadcrumbs)} /> + + + + cytoHandlers + + setCytoHandlers(!cytoHandlers)} /> + + + + animation + + setLayoutAnimation(!layoutAnimation)}/> + + + + layout + + + {/* */} + + + + {/* + + reserved + + setReserved(!reserved)}/> + */} + + + + + + + + + + + {/* */} + + + +
+ ); }, () => true); const Travelers = () => { From 0188e759e2cf8d8206abd6aae5d968453bf3f93c Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Mon, 4 Mar 2024 13:08:18 +0000 Subject: [PATCH 04/10] support minilinks.apply(deep.select result with returning) --- imports/cyto/editor-preview.tsx | 21 ++++++++------------- imports/cyto/handlers.tsx | 14 +++++--------- 2 files changed, 13 insertions(+), 22 deletions(-) diff --git a/imports/cyto/editor-preview.tsx b/imports/cyto/editor-preview.tsx index cd2ab2a3..860c2a36 100644 --- a/imports/cyto/editor-preview.tsx +++ b/imports/cyto/editor-preview.tsx @@ -1,23 +1,18 @@ -import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, Button, Box, HStack, Flex, IconButton } from '@chakra-ui/react'; -import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; -import { Id, Link, MinilinksInstance, MinilinksResult, useMinilinksApply, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; -import { ClientHandlerRenderer, evalClientHandler } from '../client-handler'; +import { Box } from '@chakra-ui/react'; +import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; +import { Id, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; import { useLocalStore } from '@deep-foundation/store/local'; -import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { useCytoEditor } from './hooks'; -import { CytoReactLinkAvatar } from '../cyto-react-avatar'; +import { useDebounceCallback } from '@react-hook/debounce'; +import json5 from 'json5'; +import { useCallback, useEffect, useRef, useState } from 'react'; +import { ClientHandlerRenderer, evalClientHandler } from '../client-handler'; import { EditorComponentView } from '../editor/editor-component-view'; import { EditorGrid } from '../editor/editor-grid'; -import { EditorHandler } from '../editor/editor-handler'; -import { EditorHandlers } from '../editor/editor-handlers'; import { EditorSwitcher } from '../editor/editor-switcher'; -import { CloseButton, EditorTabs } from '../editor/editor-tabs'; import { EditorTextArea } from '../editor/editor-textarea'; -import json5 from 'json5'; -import { useDebounceCallback } from '@react-hook/debounce'; import { CatchErrors } from '../react-errors'; import { CytoEditorHandlers } from './handlers'; -import { VscClearAll } from 'react-icons/vsc'; +import { useCytoEditor } from './hooks'; // global._callClientHandler = callClientHandler; export interface EditorTab { diff --git a/imports/cyto/handlers.tsx b/imports/cyto/handlers.tsx index 71df00f4..02a8063c 100644 --- a/imports/cyto/handlers.tsx +++ b/imports/cyto/handlers.tsx @@ -1,15 +1,11 @@ -import { useSubscription } from '@apollo/client'; import { ChevronDownIcon } from '@chakra-ui/icons'; -import { Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, Box, Flex, SimpleGrid, Text, Button, Spacer, useColorMode, InputGroup, Input, InputRightElement, Tag, TagCloseButton, TagLabel, HStack, VStack, Select, Menu, MenuButton, MenuItem, MenuList, IconButton, InputLeftElement } from '@chakra-ui/react'; -import { useDeep, useDeepQuery, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; -import { generateQuery, generateQueryData } from '@deep-foundation/deeplinks/imports/gql'; -import { Id, Link, useMinilinksApply, useMinilinksQuery, useMinilinksSubscription } from '@deep-foundation/deeplinks/imports/minilinks'; -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { CytoReactLinkAvatar } from '../cyto-react-avatar'; -import { EditorHandler } from '../editor/editor-handler'; +import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Button, Flex, IconButton, Input, InputGroup, InputRightElement, Menu, MenuButton, MenuItem, MenuList, Spacer, Tag, TagCloseButton, TagLabel, Text, useColorMode } from '@chakra-ui/react'; +import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; +import { Id, Link } from '@deep-foundation/deeplinks/imports/minilinks'; +import React, { useCallback, useMemo, useRef, useState } from 'react'; +import { VscCheck, VscDiffAdded } from 'react-icons/vsc'; import { useChackraColor } from '../get-color'; import { useContainer, useSpaceId } from '../hooks'; -import { VscCheck, VscDiffAdded } from 'react-icons/vsc'; import { FinderPopover } from './hooks'; export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHandlersSupport({ From fbfe63755e299e2b2ce0ed0e7b0d894e61b6a755 Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Tue, 5 Mar 2024 16:52:08 +0000 Subject: [PATCH 05/10] deep query works fine with cyber --- imports/cyto/elements.tsx | 4 +- imports/cyto/menu.tsx | 4 +- imports/loader.tsx | 147 ++++++++++++++++++-------------------- 3 files changed, 74 insertions(+), 81 deletions(-) diff --git a/imports/cyto/elements.tsx b/imports/cyto/elements.tsx index d01344b0..6d9c2687 100644 --- a/imports/cyto/elements.tsx +++ b/imports/cyto/elements.tsx @@ -64,10 +64,12 @@ export function useCytoElements(ml, _links, cy, spaceId, cyh) { (link?.type_id === deep.idLocal('@deep-foundation/core', 'Contain') && link?.to?.type_id === OpenedHandler && link?.to?.from?.from_id === spaceId && link?.to?.from?.type_id === Opened && link._applies.includes('space')) ); + let _id = `${link.id}`; let _value = ''; let _name = ''; let _type = ''; let _symbol = ''; + if (_id.length > 20) _id = _id.slice(0, 11)+'...'+_id.slice(-9, _id.length); if (/*labelsConfig?.values && */typeof link?.value?.value !== 'undefined') { let json; try { json = json5.stringify(link?.value.value); } catch(error) {} @@ -103,7 +105,7 @@ export function useCytoElements(ml, _links, cy, spaceId, cyh) { data: { id: `${link.id}`, label: ( - `${link.id}` + `${_id}` +(_type ? '\n'+`${_type}` : '') +(_name ? '\n'+`${_name}` : '') +(isValidValue(_value) ? '\n'+`${_value}` : '') diff --git a/imports/cyto/menu.tsx b/imports/cyto/menu.tsx index 22138158..ce6327cc 100644 --- a/imports/cyto/menu.tsx +++ b/imports/cyto/menu.tsx @@ -264,7 +264,7 @@ export const CytoMenu = React.memo(function CytoMenu({ onClick={clearFocuses} > - mode + {/* mode - + */}
[], query: any) => any; + onChange?: (results: Link[], query: any) => any; debounce?: number; subscription?: boolean; + deep?: any; }) { - const useApolloLoader = subscription ? useSubscription : useQuery; - const deep = useDeep(); - const subQuery = useMemo(() => { - const v = (queryLink?.value?.value); - const variables = deep.serializeQuery(v); - const where = variables?.where; - return generateQuery({ - operation: subscription ? 'subscription' : 'query', - queries: [generateQueryData({ - tableName: 'links', - returning: ` - id type_id from_id to_id value string { id value } number { id value } object { id value } - `, - variables: v - ? { ...variables, where } - : { where: {}, limit: 0 }, - })], - name: name, - }); - }, [queryLink, queryLink?.value?.value]); - const subQueryResults = useApolloLoader(subQuery.query, { variables: subQuery.variables }); - const [sintSubQueryResults, setSintSubQueryResults] = useState(subQueryResults); - const subQueryPrimary = subscription ? subQueryResults : sintSubQueryResults || subQueryResults; + const useLoader = deep ? subscription ? deep?.useDeepSubscription : deep?.useDeepQuery : (...args) => ({ data: [] }); + // const subQuery = useMemo(() => { + // const v = (queryLink?.value?.value); + // const variables = deep.serializeQuery(v); + // const where = variables?.where; + // return generateQuery({ + // operation: subscription ? 'subscription' : 'query', + // queries: [generateQueryData({ + // tableName: 'links', + // returning: ` + // id type_id from_id to_id value string { id value } number { id value } object { id value } + // `, + // variables: v + // ? { ...variables, where } + // : { where: {}, limit: 0 }, + // })], + // name: name, + // }); + // }, [queryLink, queryLink?.value?.value]); + const subQueryResults = useLoader(queryLink?.value?.value, { name, mini }); + // const [sintSubQueryResults, setSintSubQueryResults] = useState(subQueryResults); + // const subQueryPrimary = subscription ? subQueryResults : sintSubQueryResults || subQueryResults; - const delayedSubQueryRef = useRef(); - delayedSubQueryRef.current = subQuery; - useDelayedInterval(useCallback(() => new Promise((res, rej) => { - if (subscription) rej(); - // @ts-ignore - else subQueryResults?.refetch(delayedSubQueryRef.current.variables).then((r) => { - setSintSubQueryResults(r); - res(undefined); - }); - }), [queryLink, queryLink?.value?.value]), debounce); + // const delayedSubQueryRef = useRef(); + // delayedSubQueryRef.current = subQuery; + // useDelayedInterval(useCallback(() => new Promise((res, rej) => { + // if (subscription) rej(); + // // @ts-ignore + // else subQueryResults?.refetch(delayedSubQueryRef.current.variables).then((r) => { + // setSintSubQueryResults(r); + // res(undefined); + // }); + // }), [queryLink, queryLink?.value?.value]), debounce); useEffect(() => { - if (subQueryPrimary?.data?.q0 && !subQueryPrimary?.loading) onChange && onChange(subQueryPrimary?.data?.q0, queryLink); - }, [subQueryPrimary]); + // if (subQueryPrimary?.data?.q0 && !subQueryPrimary?.loading) onChange && onChange(subQueryPrimary?.data?.q0, queryLink); + onChange && onChange(subQueryResults?.data, queryLink); + }, [subQueryResults]); useEffect(() => { return () => { @@ -76,6 +80,7 @@ export const DeepLoader = memo(function DeepLoader({ }) { const deep = useDeep(); const userId = deep.linkId; + const namespaces = useDeepNamespaces(); const [breadcrumbs] = useBreadcrumbs(); const [showOpened, setShowOpened] = useShowOpened(); const { data: HandleCyto } = useDeepId('@deep-foundation/handle-cyto', 'HandleCyto'); @@ -344,88 +349,74 @@ 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 <> <> { - deep.minilinks?.apply(r, 'space'); - }, [])} + mini={'space'} /> <> { - deep.minilinks?.apply(r, 'trees'); - }, [])} + mini={'trees'} /> <> { - // 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'); - }, [])} + mini={'not-loaded-ends'} /> {!!breadcrumbs && <>} <> { - deep.minilinks?.apply(r, 'client-handlers'); - }, [])} + mini={'client-handlers'} /> - {queries?.map((f, i) => (f?.value?.value ? : ))} + {useMemo(() => { + return queries?.map((f, i) => (f?.value?.value ? + {Object.values(namespaces).map(deep => )} + : )); + }, [namespaces, queries])} <> { - deep.minilinks?.apply(r, 'types'); - }, [])} + mini={'types'} /> {!!typeIds && <>} {!!typeIds && <>} ; }); \ No newline at end of file From 2fdc9ada0909ada18bf6648043dc61451540cebc Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Tue, 5 Mar 2024 17:04:09 +0000 Subject: [PATCH 06/10] return fix support --- imports/cyto/menu.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/imports/cyto/menu.tsx b/imports/cyto/menu.tsx index ce6327cc..b5bc2609 100644 --- a/imports/cyto/menu.tsx +++ b/imports/cyto/menu.tsx @@ -12,6 +12,7 @@ import { useCytoEditor, useCytoHandlersRules } from "./hooks"; import { variants, buttonVariant, iconVariants, sideVariants, itemVariants } from "./menu-animation-variants"; import { TbArrowRotaryFirstRight } from "react-icons/tb"; import { ClientHandler } from "../client-handler"; +import { Id } from "@deep-foundation/deeplinks/imports/minilinks"; const ListLayout = React.memo(({ currentLayout = 'deep-d3-force', @@ -582,7 +583,7 @@ export const MenuSearch = React.memo(({ cyRef, bg }: { cyRef?: any; bg?: any; }) }); const all = [...byId, ...byValue, ...byContain]; const [index, setIndex] = useState(-1); - const [selected, setSelected] = useState(0); + const [selected, setSelected] = useState(0); // useHotkeys('up,right,down,left', e => { // const cy = cyRef?.current; // e.preventDefault(); From 18cd43dce9a40e5cc0ff725f506a77743e621653 Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Tue, 12 Mar 2024 13:52:49 +0000 Subject: [PATCH 07/10] fully remote=false local=true worked --- imports/cyto/graph.tsx | 2 +- imports/loader.tsx | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/imports/cyto/graph.tsx b/imports/cyto/graph.tsx index 9d957abc..2e966d28 100644 --- a/imports/cyto/graph.tsx +++ b/imports/cyto/graph.tsx @@ -99,7 +99,7 @@ export default function CytoGraph({ useCytoViewport: _useCytoViewport = useState, useSpaceId: _useSpaceId = useSpaceId, }: CytoGraphProps){ - console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links); + // console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links); const deep = useDeep(); const __cytoViewportRef = useRefstarter<{ pan: { x: number; y: number; }; zoom: number }>(); const cytoViewportRef = _cytoViewportRef || __cytoViewportRef; diff --git a/imports/loader.tsx b/imports/loader.tsx index b2e3047b..2c88e7c7 100644 --- a/imports/loader.tsx +++ b/imports/loader.tsx @@ -289,7 +289,8 @@ export const DeepLoader = memo(function DeepLoader({ return { value: { value: { down: { tree_id: { _eq: deep.idLocal('@deep-foundation/core', 'typesTree') }, - link_id: { _in: ids } + link_id: { _in: ids }, + parent_id: { _nin: ids }, }, } } }; }, [ids]); @@ -402,11 +403,11 @@ export const DeepLoader = memo(function DeepLoader({ }, [])} /> {queries?.map((f, i) => (f?.value?.value ? : ))} + /> : ))} <> Date: Thu, 4 Apr 2024 09:35:10 +0000 Subject: [PATCH 08/10] values --- imports/client-handler-slate-proxy.tsx | 11 ++--- imports/connector/connector.tsx | 66 +++++++++++++------------- imports/cyto-handler.tsx | 13 ++--- imports/cyto-message-textarea.tsx | 4 +- imports/cyto-react-links-card.tsx | 24 +++++----- 5 files changed, 59 insertions(+), 59 deletions(-) diff --git a/imports/client-handler-slate-proxy.tsx b/imports/client-handler-slate-proxy.tsx index 4a666450..29dc89e8 100644 --- a/imports/client-handler-slate-proxy.tsx +++ b/imports/client-handler-slate-proxy.tsx @@ -40,7 +40,7 @@ export const ClientHandlerSlateProxy = ({ children }) => { const match = regex.exec(text); const firstGroup = match ? match[1] : null; - return firstGroup ? parseInt(firstGroup, 10) : null; + return firstGroup ? parseInt(firstGroup, 10) : undefined; } const text = children?.[0]?.props?.parent?.children?.[0]?.text || ''; @@ -51,13 +51,12 @@ export const ClientHandlerSlateProxy = ({ children }) => { }, }); - console.log('DEEPW', text, linkId, children); - // if(linkId) { + if(linkId) { return (<> {children} ) - // } else { - // return children - // } + } else { + return null; + } } \ No newline at end of file diff --git a/imports/connector/connector.tsx b/imports/connector/connector.tsx index 1d1563a3..f9f6b9ca 100644 --- a/imports/connector/connector.tsx +++ b/imports/connector/connector.tsx @@ -156,11 +156,11 @@ const TerminalConnect = React.memo(({ console.log('initializingState2', initializingState) await delay(2000); - setInitLocal(InitializingState.launched); - setGqlPath(defaultGqlPath); - setGqlSsl(defaultGqlSsl); + setInitLocal && setInitLocal(InitializingState.launched); + setGqlPath && setGqlPath(defaultGqlPath); + setGqlSsl && setGqlSsl(defaultGqlSsl); await delay(2000); - setPortal(false); + setPortal && setPortal(false); }, 2000); } else if (initializingState == 'removing') { console.log('initializingState0-r', initializingState); @@ -176,10 +176,10 @@ const TerminalConnect = React.memo(({ // control.start('shrink'); console.log('initializingState2-r', initializingState); await delay(2000); - setInitLocal(InitializingState.notInit); + setInitLocal && setInitLocal(InitializingState.notInit); await delay(1000); - setGqlPath(''); - setGqlSsl(false); + setGqlPath && setGqlPath(''); + setGqlSsl && setGqlSsl(false); }, 2000); } else if (initializingState == 'launched' || initializingState == 'not init') { if (terminalRef.current) terminalRef.current.clear(); @@ -371,7 +371,7 @@ const InputAnimation = React.memo(({ onClick={() => { const [currentGqlPath, currentGqlSsl] = parseUrl(valueRemoteRoute); if(currentGqlPath) { - onStartRemoteRoute(); + onStartRemoteRoute && onStartRemoteRoute(); } }} children={ @@ -518,7 +518,7 @@ export const Connector = React.memo(({ }); // const [ portalOpen, setPortal ] = useState(true); - // const onClosePortal = () => setPortal(false); + // const onClosePortal = () => setPortal && setPortal(false); const [remotesString, setRemotesString] = useLocalStorage('remote-routes', '[]'); const remotes = JSON.parse(remotesString); @@ -589,12 +589,12 @@ export const Connector = React.memo(({ (async () => { const status = await checkSystemStatus(defaultServerUrl); if (status.result !== undefined) { - setInitLocal(InitializingState.notInit); + setInitLocal && setInitLocal(InitializingState.notInit); await delay(1000); - setInitLocal(InitializingState.launched); + setInitLocal && setInitLocal(InitializingState.launched); if (!gqlPath){ - setGqlPath(defaultGqlPath); - setGqlSsl(defaultGqlSsl); + setGqlPath && setGqlPath(defaultGqlPath); + setGqlSsl && setGqlSsl(defaultGqlSsl); } } })(); @@ -619,7 +619,7 @@ export const Connector = React.memo(({ return ( { if (init == InitializingState.launched){ - setPortal(false); + setPortal && setPortal && setPortal(false); } }} portalOpen={portalOpen}> { if (gqlPath == rr.value) { - setGqlPath(''); - setGqlSsl(false); + setGqlPath && setGqlPath(''); + setGqlSsl && setGqlSsl(false); } remove(rr.id) } @@ -681,9 +681,9 @@ export const Connector = React.memo(({ const url = new URL(rr.value); const status = await checkUrlStatus(url); if (status.result !== undefined && !status.error) { - setGqlPath(`${url.hostname}${url.port ? ':' + url.port : ''}${url.pathname}`); - setGqlSsl(url.protocol == 'http:' ? false : true); - setPortal(false); + setGqlPath && setGqlPath(`${url.hostname}${url.port ? ':' + url.port : ''}${url.pathname}`); + setGqlSsl && setGqlSsl(url.protocol == 'http:' ? false : true); + setPortal && setPortal && setPortal(false); } else { console.log('URL error', JSON.stringify(status)); } @@ -735,9 +735,9 @@ export const Connector = React.memo(({ initial='initial' variants={initArea} onClick={() => { - setInitLocal(InitializingState.initializing); + setInitLocal && setInitLocal(InitializingState.initializing); // setTimeout(() => { - // setInitLocal(InitializingState.initialized); + // setInitLocal && setInitLocal(InitializingState.initialized); // }, 3000) }} > @@ -766,7 +766,7 @@ export const Connector = React.memo(({ animate={controlInit} initial='initializing' variants={initArea} - // onClick={() => setInitLocal(InitializingState.initialized)} + // onClick={() => setInitLocal && setInitLocal(InitializingState.initialized)} > setInitLocal(InitializingState.launched)} - // onClickRight={() => setInitLocal(InitializingState.notInit)} + // onClickLeft={() => setInitLocal && setInitLocal(InitializingState.launched)} + // onClickRight={() => setInitLocal && setInitLocal(InitializingState.notInit)} /> setInitLocal(InitializingState.notInit)} + // onClick={() => setInitLocal && setInitLocal(InitializingState.notInit)} > { - setGqlPath(defaultGqlPath); - setGqlSsl(defaultGqlSsl); - setPortal(false); + setGqlPath && setGqlPath(defaultGqlPath); + setGqlSsl && setGqlSsl(defaultGqlSsl); + setPortal && setPortal(false); }} leftButtonId="goToDeep" rightButtonId="deleteLocalDeep" onClickRight={() => { - setInitLocal(InitializingState.removing) + setInitLocal && setInitLocal(InitializingState.removing) }} /> @@ -853,12 +853,12 @@ export const Connector = React.memo(({ setInitLocal(state)} + setInitLocal={(state)=>setInitLocal && setInitLocal(state)} key={21121} serverUrl={defaultServerUrl} - setGqlPath={(path) => setGqlPath(path)} - setGqlSsl={(ssl) => setGqlSsl(ssl)} - setPortal={(state) => setPortal(state)} + setGqlPath={(path) => setGqlPath && setGqlPath(path)} + setGqlSsl={(ssl) => setGqlSsl && setGqlSsl(ssl)} + setPortal={(state) => setPortal && setPortal(state)} defaultGqlPath={defaultGqlPath} defaultGqlSsl={defaultGqlSsl} /> diff --git a/imports/cyto-handler.tsx b/imports/cyto-handler.tsx index 20a0f814..35de306e 100644 --- a/imports/cyto-handler.tsx +++ b/imports/cyto-handler.tsx @@ -62,9 +62,10 @@ export function useCytoHandlersApply(cyh, elements, stylesheets, iterator) { for (let key in cyh?.cytoHandlersRef?.current) { const el = cyh?.cytoHandlersRef?.current[key]; const cyHandle = deep.minilinks?.byType[HandleCyto]?.find(l => l.from_id === deep.minilinks.byId?.[key]?.type_id); - if (el && chr[cyHandle?.id]) { + if (el && !!el?.elements?.length && cyHandle && chr[cyHandle?.id]) { cyh.drawedCytoHandlers.current[key] = el; - addElements.push(...el.elements || []); + // @ts-ignore + addElements.push(...(el.elements || [])); stylesheetsByHandler[el?.handlerId] = el.stylesheets || []; } } @@ -87,7 +88,7 @@ export const CytoHandlers = React.memo(function CytoHandlers({ cy?: any; }) { const { data: HandleCyto } = useDeepId('@deep-foundation/handle-cyto', 'HandleCyto'); - const arr = []; + const arr: any[] = []; for (let key in handled) { arr.push( { - onChange(linkId); + onChange && onChange(linkId); }; }, [file?.value?.value]); try { const r = Component ? Component({ link: ml.byId[linkId], elementsById, cy, ...props }) : {}; - onChange(linkId, { ...r, handlerId }); + onChange && onChange(linkId, { ...r, handlerId }); } catch(error) { - onChange(linkId, { error, handlerId }) + onChange && onChange(linkId, { error, handlerId }) } return <>; diff --git a/imports/cyto-message-textarea.tsx b/imports/cyto-message-textarea.tsx index fe983c76..2d95225a 100644 --- a/imports/cyto-message-textarea.tsx +++ b/imports/cyto-message-textarea.tsx @@ -23,7 +23,7 @@ export const MessageTextArea = React.memo(() => { return ( @@ -46,7 +46,7 @@ export const MessageTextArea = React.memo(() => {