feat(graph): improvements (#1303)

src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -26,6 +26,9 @@ class ErrorBoundary extends Component<Props, State> {
 
   render() {
     if (this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
       return <ErrorScreen error={this.state.error} />;
     }
 

src/components/actionBar/index.tsx

@@ -62,6 +62,7 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
   const noAccount = !defaultAccount.account;
   const noPassport = CHAIN_ID === Networks.BOSTROM && !passport;
 
+  // FIXME: refactor
   const exception =
     (!location.pathname.includes('/keys') &&
       !location.pathname.includes('/drive') &&
@@ -87,7 +88,8 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
     (noAccount || noPassport) &&
     // maybe change to props
     exception &&
-    !location.pathname.includes(routes.gift.path)
+    !location.pathname.includes(routes.gift.path) &&
+    !location.pathname.includes('/brain') // both full and robot
   ) {
     return (
       <ActionBarContainer>
@@ -103,7 +105,8 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
   if (
     !signerReady &&
     exception &&
-    !location.pathname.includes(routes.gift.path)
+    !location.pathname.includes(routes.gift.path) &&
+    !location.pathname.includes('/brain') // both full and robot
   ) {
     const activeAddress =
       defaultAccount.account?.cyber.name ||

src/components/appMenu/SubMenu/SubMenu.tsx

@@ -2,6 +2,7 @@ import { NavLink } from 'react-router-dom';
 import { MenuItem } from 'src/types/menu';
 import cx from 'classnames';
 import { useMemo } from 'react';
+import { checkIsEmoji } from 'src/utils/emoji';
 import styles from './SubMenu.module.scss';
 
 interface Props {
@@ -39,8 +40,19 @@ function SubMenu({ selectedApp, closeMenu }: Props) {
           }
           onClick={closeMenu}
         >
+          {/* // clean */}
           {item.icon && (
-            <img src={item.icon} className={styles.icon} alt="icon" />
+            <>
+              {checkIsEmoji(item.icon) ? (
+                <span>{item.icon}</span>
+              ) : (
+                <img
+                  src={item.icon}
+                  className={styles.icon}
+                  alt={`${item.name} icon`}
+                />
+              )}
+            </>
           )}
           <span className={styles.nameApp}>{item.name}</span>
         </NavLink>

src/components/valueImg/imgDenom.tsx

@@ -10,6 +10,7 @@ import tocyb from 'images/boot.png';
 import boot from 'images/large-green.png';
 import defaultImg from 'images/large-orange-circle.png';
 import useQueueIpfsContent from 'src/hooks/useQueueIpfsContent';
+import { checkIsEmoji } from 'src/utils/emoji';
 import Tooltip from '../tooltip/tooltip';
 import { trimString } from '../../utils/utils';
 import styles from './TextDenom.module.scss';
@@ -105,8 +106,7 @@ function ImgDenom({
     }
   }, [coinDenom, infoDenom, fetchWithDetails, getImgFromIpfsByCid]);
 
-  // refactor
-  const isEmoji = imgDenom && imgDenom?.length < 3;
+  const isEmoji = imgDenom && checkIsEmoji(imgDenom);
 
   const img = isEmoji ? (
     imgDenom

src/components/valueImg/index.jsx

@@ -1,3 +1,4 @@
+import { checkIsEmoji } from 'src/utils/emoji';
 import { trimString } from '../../utils/utils';
 import styles from './ValueImg.module.scss';
 
@@ -142,8 +143,7 @@ function ValueImg({
     img = ibc;
   }
 
-  // maybe check different
-  const emojiIcon = img.length < 3;
+  const emojiIcon = checkIsEmoji(img);
 
   return (
     <div

src/containers/application/App.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import { Link, Outlet, matchPath, useLocation } from 'react-router-dom';
 
-import { AppDispatch } from 'src/redux/store';
 import { initPocket } from 'src/redux/features/pocket';
 import MainLayout from 'src/layouts/Main';
 
@@ -25,15 +24,15 @@ import useCurrentAddress from 'src/hooks/useCurrentAddress';
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
 import AdviserContainer from '../../features/adviser/AdviserContainer';
 import styles from './styles.scss';
+import { setFocus } from './Header/Commander/commander.redux';
 
 export const PORTAL_ID = 'portal';
 
 initCyblog();
 
 function App() {
-  const dispatch: AppDispatch = useAppDispatch();
+  const dispatch = useAppDispatch();
   const queryClient = useQueryClient();
-
   const address = useCurrentAddress();
 
   // const { community, communityLoaded } = useGetCommunity(address || null, {
@@ -126,6 +125,15 @@ function App() {
   //   }
   // };
 
+  // initial focus on commander
+  useEffect(() => {
+    const isGraphPages = window.location.pathname.includes('/brain');
+
+    if (!isGraphPages) {
+      dispatch(setFocus(true));
+    }
+  }, [dispatch]);
+
   return (
     <PreviousPageProvider>
       <MainLayout>

src/features/adviser/Adviser/Adviser.tsx

@@ -33,6 +33,7 @@ function prepareText(text: string) {
 
   // replace emoji
   // TODO: RGI_Emoji can be used in ECMAScript 2024 soon
+  // FIXME: use utils/emoji.ts
   t = t.replace(
     /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/gu,
     ''

src/features/cyberlinks/CyberlinksGraph/CyberlinksGraph.tsx

@@ -204,7 +204,7 @@ function CyberlinksGraph({ data, size, minVersion }: Props) {
         // linkDirectionalArrowLength={10}
         // linkDirectionalArrowColor={() => 'rgba(9,255,13,1)'}
 
-        onNodeClick={handleNodeRightClick}
+        onNodeClick={!minVersion ? handleNodeRightClick : undefined}
         onNodeRightClick={handleNodeClick}
         onLinkClick={handleLinkRightClick}
         onLinkRightClick={handleLinkClick}

src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer.tsx

@@ -3,6 +3,8 @@ import { Loading } from 'src/components';
 import { useAppSelector } from 'src/redux/hooks';
 import { selectCurrentAddress } from 'src/redux/features/pocket';
 import { Stars } from 'src/containers/portal/components';
+import ErrorBoundary from 'src/components/ErrorBoundary/ErrorBoundary';
+import { useEffect } from 'react';
 import useCyberlinks from './useCyberlinks';
 import { PORTAL_ID } from '../../../containers/application/App';
 import GraphNew from '../GraphNew/GraphNew';
@@ -46,8 +48,6 @@ function CyberlinksGraphContainer({
 
   const Comp = type === Types['2d'] ? GraphNew : CyberlinksGraph;
 
-  // const { isFullscreen } = useFullscreen();
-
   const content = loading ? (
     <div
       style={{
@@ -73,12 +73,14 @@ function CyberlinksGraphContainer({
     <>
       {!minVersion && <Stars />}
 
-      <Comp
-        data={data || fetchData}
-        size={size}
-        minVersion={minVersion}
-        currentAddress={currentAddress}
-      />
+      <ErrorBoundary fallback={<GraphRenderFallbackError />}>
+        <Comp
+          data={data || fetchData}
+          size={size}
+          minVersion={minVersion}
+          currentAddress={currentAddress}
+        />
+      </ErrorBoundary>
     </>
   );
 
@@ -88,3 +90,10 @@ function CyberlinksGraphContainer({
 }
 
 export default CyberlinksGraphContainer;
+
+function GraphRenderFallbackError() {
+  useEffect(() => {
+    alert('Graph render error');
+  }, []);
+  return <div>Graph render error</div>;
+}

src/features/cyberlinks/CyberlinksGraph/GraphHoverInfo/GraphHoverInfo.tsx

@@ -1,6 +1,6 @@
-import ContentItem from 'src/components/ContentItem/contentItem';
 import { useMemo } from 'react';
 import * as THREE from 'three';
+import ContentItem from 'src/components/ContentItem/contentItem';
 import styles from './GraphHoverInfo.module.scss';
 
 // fix
@@ -10,7 +10,7 @@ type Props = {
   size: number;
 };
 
-function HoverInfo({ node, camera, size, left, top }: Props) {
+function HoverInfo({ node, camera, size, left, top, right }: Props) {
   let l = left;
   let t = top;
 
@@ -58,8 +58,10 @@ function HoverInfo({ node, camera, size, left, top }: Props) {
       style={{
         top: t,
         left: l,
+        right,
       }}
     >
+      {/* {node.id} */}
       <ContentItem cid={node.id} />
     </div>
   );

src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.module.scss

@@ -1,2 +1,3 @@
 .btn {
+  min-width: 100px;
 }

src/features/cyberlinks/GraphFullscreenBtn/GraphFullscreenBtn.tsx

@@ -2,14 +2,17 @@ import { PORTAL_ID } from 'src/containers/application/App';
 import { useState } from 'react';
 import useEventListener from 'src/hooks/dom/useEventListener';
 import { Button } from 'src/components';
+import AdviserHoverWrapper from 'src/features/adviser/AdviserHoverWrapper/AdviserHoverWrapper';
 import styles from './GraphFullscreenBtn.module.scss';
+import expandIcon from './images/expand.svg';
+import minimizeIcon from './images/minimize.svg';
 
 export function useFullscreen() {
   const [isFullscreen, setIsFullscreen] = useState(false);
 
-  const handleFullscreenChange = () => {
+  function handleFullscreenChange() {
     setIsFullscreen(document.fullscreenElement !== null);
-  };
+  }
 
   useEventListener('fullscreenchange', handleFullscreenChange, document);
 
@@ -51,10 +54,14 @@ function GraphFullscreenBtn() {
     }
   }
 
+  const text = isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen';
+
   return (
-    <Button className={styles.btn} onClick={onClick}>
-      {isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
-    </Button>
+    <AdviserHoverWrapper adviserContent={text}>
+      <Button className={styles.btn} onClick={onClick}>
+        <img src={isFullscreen ? minimizeIcon : expandIcon} alt={text} />
+      </Button>
+    </AdviserHoverWrapper>
   );
 }