Graph enhancements

frontend/src/App.css

@@ -233,10 +233,8 @@
   letter-spacing: 0;
   line-height: 1.25rem;
   width: max-content;
-  height: 30px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .ndl-widget-content>div {
@@ -365,4 +363,13 @@
 .widthunset{
   width: initial !important;
   height: initial !important;
+}
+
+.text-input-container {
+  transition: width 1.5s ease;
+  /* width: 100dvh; */
+}
+
+.text-input-container.search-initiated {
+  width: 60dvh;
 }

frontend/src/components/ChatBot/ChatInfoModal.tsx

@@ -18,13 +18,20 @@ import wikipedialogo from '../../assets/images/wikipedia.svg';
 import youtubelogo from '../../assets/images/youtube.svg';
 import gcslogo from '../../assets/images/gcs.webp';
 import s3logo from '../../assets/images/s3logo.png';
-import { Chunk, Entity, ExtendedNode, GroupedEntity, UserCredentials, chatInfoMessage } from '../../types';
+import {
+  Chunk,
+  Entity,
+  ExtendedNode,
+  ExtendedRelationship,
+  GroupedEntity,
+  UserCredentials,
+  chatInfoMessage,
+} from '../../types';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import HoverableLink from '../UI/HoverableLink';
 import GraphViewButton from '../Graph/GraphViewButton';
 import { chunkEntitiesAPI } from '../../services/ChunkEntitiesInfo';
 import { useCredentials } from '../../context/UserCredentials';
-import type { Relationship } from '@neo4j-nvl/base';
 import { calcWordColor } from '@neo4j-devtools/word-color';
 import ReactMarkdown from 'react-markdown';
 import { GlobeAltIconOutline } from '@neo4j-ndl/react/icons';
@@ -51,7 +58,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
   const [loading, setLoading] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
   const [nodes, setNodes] = useState<ExtendedNode[]>([]);
-  const [relationships, setRelationships] = useState<Relationship[]>([]);
+  const [relationships, setRelationships] = useState<ExtendedRelationship[]>([]);
   const [chunks, setChunks] = useState<Chunk[]>([]);
   const themeUtils = useContext(ThemeWrapperContext);
   const [, copy] = useCopyToClipboard();

frontend/src/components/ChatBot/Info/InfoModal.tsx

@@ -6,13 +6,20 @@ import wikipedialogo from '../../../assets/images/Wikipedia-logo-v2.svg';
 import youtubelogo from '../../../assets/images/youtube.png';
 import gcslogo from '../../../assets/images/gcs.webp';
 import s3logo from '../../../assets/images/s3logo.png';
-import { Chunk, Entity, ExtendedNode, GroupedEntity, UserCredentials, chatInfoMessage } from '../../../types';
+import {
+  Chunk,
+  Entity,
+  ExtendedNode,
+  ExtendedRelationship,
+  GroupedEntity,
+  UserCredentials,
+  chatInfoMessage,
+} from '../../../types';
 import { useEffect, useMemo, useState } from 'react';
 import HoverableLink from '../../UI/HoverableLink';
 import GraphViewButton from '../../Graph/GraphViewButton';
 import { chunkEntitiesAPI } from '../../../services/ChunkEntitiesInfo';
 import { useCredentials } from '../../../context/UserCredentials';
-import type { Relationship } from '@neo4j-nvl/base';
 import { calcWordColor } from '@neo4j-devtools/word-color';
 import ReactMarkdown from 'react-markdown';
 import { GlobeAltIconOutline } from '@neo4j-ndl/react/icons';
@@ -23,7 +30,7 @@ const InfoModal: React.FC<chatInfoMessage> = ({ sources, model, total_tokens, re
   const [loading, setLoading] = useState<boolean>(false);
   const { userCredentials } = useCredentials();
   const [nodes, setNodes] = useState<ExtendedNode[]>([]);
-  const [relationships, setRelationships] = useState<Relationship[]>([]);
+  const [relationships, setRelationships] = useState<ExtendedRelationship[]>([]);
   const [chunks, setChunks] = useState<Chunk[]>([]);
   const parseEntity = (entity: Entity) => {
     const { labels, properties } = entity;