feat: logs store new data (#1013)

* feat: add popover style + selectedContent in logs store

* feat: add isScrolling

* chore: remove unused

* chore: remove unused isScrolling

packages/web/src/components/molecules/Console/Console.tsx

@@ -18,6 +18,8 @@ import {debounce} from 'lodash';
 import {useEventCallback} from '@hooks/useEventCallback';
 import {useLastCallback} from '@hooks/useLastCallback';
 
+import {useLogOutputField} from '@store/logOutput';
+
 import * as S from './Console.styled';
 import {ConsoleLine} from './ConsoleLine';
 import {ConsoleLineDimensions, ConsoleLineMonitor} from './ConsoleLineMonitor';
@@ -51,6 +53,8 @@ export const Console = forwardRef<ConsoleRef, ConsoleProps>(({content, wrap, Lin
 
   const rerender = useUpdate();
 
+  const [, setSelectedContent] = useLogOutputField('selectedContent');
+
   const intersection = useIntersection(containerRef, {
     root: null,
     rootMargin: '0px',
@@ -191,6 +195,36 @@ export const Console = forwardRef<ConsoleRef, ConsoleProps>(({content, wrap, Lin
     }, 0);
   }, [scrollToLine]);
 
+  useEffect(() => {
+    const lines = searchParams.get('L');
+
+    if (!lines) return;
+
+    const processedLines = processor.getProcessedLines();
+
+    const singleLineMatch = lines.match(/^(\d+)$/);
+
+    if (singleLineMatch) {
+      const [_, lineNumber] = singleLineMatch;
+      const startChar = processedLines[Number(lineNumber) - 1].start;
+      const endChar = processedLines[Number(lineNumber) - 1].end;
+
+      setSelectedContent(content.substring(startChar, endChar));
+      return;
+    }
+
+    const multiLineMatch = lines.match(/^(\d+)-(\d+)$/);
+
+    if (multiLineMatch) {
+      const [_, firstLineNumber, secondLineNumber] = multiLineMatch;
+      const isInversed = Number(firstLineNumber) > Number(secondLineNumber);
+      const startChar = processedLines[Number(isInversed ? secondLineNumber : firstLineNumber) - 1].start;
+      const endChar = processedLines[Number(isInversed ? firstLineNumber : secondLineNumber) - 1].end;
+
+      setSelectedContent(content.substring(startChar, endChar));
+    }
+  }, [content, processor, searchParams, setSelectedContent]);
+
   // Inform about position change
   // FIXME
   useEffect(() => {

packages/web/src/components/molecules/Console/LogProcessorLine.ts

@@ -22,8 +22,8 @@ function buildClassName(bundle: AnserJsonEntry): string | undefined {
 
 export class LogProcessorLine {
   private source: string;
-  private start: number;
-  private end: number;
+  public start: number;
+  public end: number;
   private noAsciiDecode: boolean;
   public processed = false;
   public chars: number;

packages/web/src/store/logOutput.ts

@@ -15,6 +15,7 @@ export interface LogOutputSlice {
   searching: boolean;
   searchResults: SearchResult[];
   searchLinesMap: Record<number, SearchResult[]>;
+  selectedContent?: string;
 }
 
 // TODO: Consider getting rid of that

packages/web/src/styles/globalStyles.ts

@@ -512,4 +512,6 @@ export const GlobalStyle = createGlobalStyle`
   .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover {
     background: ${Colors.slate400};
   }
+
+  
 `;