feat(client-electron): add ability to sort daemons by order in the se…

…quence

src/electron/common/common.ts

@@ -91,6 +91,7 @@ export interface AppSettings
   resolveDelay: number;
   focusOnError: boolean;
   gameLang: BreachProtocolLanguage;
+  sortDaemonsBySequence: boolean;
 }
 
 export interface AppStats {

src/electron/common/options.ts

@@ -105,7 +105,7 @@ export const options: BreachProtocolOption[] = [
   },
   {
     id: 'errorSoundPath',
-    description: 'Sound played when error occured during recognition.',
+    description: 'Sound played when error occurred during recognition.',
     defaultValue:
       BUILD_PLATFORM === 'win32'
         ? 'C:/Windows/Media/Windows Foreground.wav'
@@ -275,6 +275,11 @@ export const options: BreachProtocolOption[] = [
     description: 'Algorithm that will be used to find path.',
     defaultValue: 'bfs',
   },
+  {
+    id: 'sortDaemonsBySequence',
+    description: 'Sort daemons in history viewer by order in the sequence.',
+    defaultValue: false,
+  },
 ];
 
 function optionsToObject<T>(cb: (option: BreachProtocolOption) => T) {

src/electron/renderer/components/BufferSizeViewer.tsx

@@ -37,15 +37,15 @@ const BufferSizeItem = styled(Square)`
 `;
 
 interface BufferSizeViewerProps {
-  bufferSize: number;
+  rawData: number;
   result?: BreachProtocolResultJSON;
   highlight: Highlight;
   hasDaemonAttached: (index: number) => boolean;
   onHighlight?: (highlight: Highlight) => void;
 }
 
 export const BufferSizeViewer = ({
-  bufferSize,
+  rawData,
   result,
   highlight,
   hasDaemonAttached,
@@ -55,7 +55,7 @@ export const BufferSizeViewer = ({
     <BufferSizeWrapper
       onMouseLeave={onHighlight ? () => onHighlight(null) : undefined}
     >
-      {Array.from({ length: bufferSize }, (s, i) => {
+      {Array.from({ length: rawData }, (s, i) => {
         const isActive = result && i < result.path.length;
         const hasDaemon = isActive && hasDaemonAttached(i);
         const hasHighlight =

src/electron/renderer/components/DaemonsViewer.tsx

@@ -4,6 +4,7 @@ import {
   DaemonsRawData,
   eng,
 } from '@/core';
+import { useMemo } from 'react';
 import styled from 'styled-components';
 import { Col, Row, Spacer } from './Flex';
 import { Highlight } from './HistoryViewer';
@@ -42,49 +43,85 @@ const Daemon = styled(Col)<{ active: boolean }>`
 `;
 
 interface DaemonsViewerProps {
-  daemons: DaemonsRawData;
+  rawData: DaemonsRawData;
   types?: BreachProtocolTypesFragmentResult;
   result?: BreachProtocolResultJSON;
+  sortDaemonsBySequence?: boolean;
   onHighlight?: (highlight: Highlight) => void;
 }
 
+function useDaemons(
+  rawData: DaemonsRawData,
+  result: BreachProtocolResultJSON,
+  sort: boolean
+) {
+  return useMemo(() => {
+    const rs = result?.resolvedSequence.value.join('');
+    const daemonsWithDetails = rawData.map((raw, index) => {
+      const ds = raw.join('');
+      const from = result && rs.indexOf(ds) / 2;
+      const to = result && from + raw.length - 1;
+
+      return { raw, index, from, to };
+    });
+
+    if (sort) {
+      return daemonsWithDetails.sort((d1, d2) => {
+        if (d2.from < 0) {
+          return -1;
+        }
+
+        if (d1.from < 0) {
+          return 1;
+        }
+
+        const start = d1.from - d2.from;
+        const end = d1.to - d2.to;
+
+        return start || end;
+      });
+    }
+
+    return daemonsWithDetails;
+  }, [rawData, result, sort]);
+}
+
 export const DaemonsViewer = ({
-  daemons,
+  rawData,
   types,
   result,
+  sortDaemonsBySequence,
   onHighlight,
 }: DaemonsViewerProps) => {
   const { parts } = result?.resolvedSequence || {};
-  const s = result?.resolvedSequence.value.join('');
+  const daemons = useDaemons(rawData, result, sortDaemonsBySequence);
 
   return (
-    <DaemonsWrapper>
-      {daemons.map((d, i) => {
-        const ds = d.join('');
-        const from = result && s.indexOf(ds) / 2;
-        const to = result && from + d.length - 1;
-        const active = result && parts.includes(i);
+    <DaemonsWrapper
+      onMouseLeave={onHighlight ? () => onHighlight(null) : undefined}
+    >
+      {daemons.map(({ raw, index, from, to }) => {
+        const active = result && parts.includes(index);
 
         return (
           <Daemon
-            key={i}
+            key={index}
             active={active}
             onMouseEnter={
               active && onHighlight
                 ? () => onHighlight({ from, to })
                 : undefined
             }
-            onMouseLeave={onHighlight ? () => onHighlight(null) : undefined}
           >
             <Only when={types?.isValid}>
-              <DaemonType>{eng[types.rawData[i]]}</DaemonType>
+              <DaemonType>{eng[types.rawData[index]]}</DaemonType>
             </Only>
             <DaemonSequence>
-              {d.map((s, j) => (
-                <span key={j}>{s}</span>
+              {raw.map((s, i) => (
+                <span key={i}>{s}</span>
               ))}
               <Spacer />
-              <span>#{i + 1}</span>
+              <span>#{index + 1}</span>
             </DaemonSequence>
           </Daemon>
         );

src/electron/renderer/components/GeneralSettings.tsx

@@ -42,6 +42,10 @@ export const GeneralSettings = ({ historySize }: { historySize: number }) => {
           onBeforeValueChange={onBeforeHistorySizeChange}
         />
       </Field>
+      <Field name="sortDaemonsBySequence">
+        <Label>Sort daemons by sequence</Label>
+        <Switch />
+      </Field>
       <Field name="preserveSourceOnSuccess">
         <Label>Preserve sources</Label>
         <Switch />

src/electron/renderer/components/GridViewer.tsx

@@ -155,26 +155,26 @@ const Line = styled.div<LineProps>`
 `;
 
 interface GridViewerProps {
-  grid: GridRawData;
+  rawData: GridRawData;
   path?: string[];
   highlight?: Highlight;
   hasDaemonAttached: (index: number) => boolean;
 }
 
 export const GridViewer = ({
-  grid,
+  rawData,
   path,
   highlight,
   hasDaemonAttached,
 }: GridViewerProps) => {
   const [spotlight, setSpotlight] = useState(null);
-  const size = Math.sqrt(grid.length);
+  const size = Math.sqrt(rawData.length);
   const squares = cross(ROWS.slice(0, size), COLS.slice(0, size));
 
   return (
     <GridWrapper size={size} onMouseLeave={() => setSpotlight(null)}>
       {squares.map((s, i) => {
-        const value = grid[i];
+        const value = rawData[i];
         const index = path ? path.indexOf(s) : 0;
         const isActive = path && index !== -1;
         const shouldRenderLine = index > 0;

src/electron/renderer/components/HistoryViewer.tsx

@@ -25,6 +25,7 @@ export interface Highlight {
 interface HistoryViewerProps {
   entry: HistoryEntry;
   customResult?: BreachProtocolResultJSON;
+  sortDaemonsBySequence?: boolean;
 }
 
 function getDaemonBounds(daemons: DaemonsRawData, sequence?: SequenceJSON) {
@@ -50,7 +51,11 @@ function getDaemonBounds(daemons: DaemonsRawData, sequence?: SequenceJSON) {
     .filter(Boolean);
 }
 
-export const HistoryViewer = ({ entry, customResult }: HistoryViewerProps) => {
+export const HistoryViewer = ({
+  entry,
+  customResult,
+  sortDaemonsBySequence,
+}: HistoryViewerProps) => {
   const [highlight, setHighlight] = useState<Highlight>(null);
   const { rawData: grid } = entry.fragments.find(isGridFragment);
   const { rawData: bufferSize } = entry.fragments.find(
@@ -77,22 +82,23 @@ export const HistoryViewer = ({ entry, customResult }: HistoryViewerProps) => {
   return (
     <Row gap scroll={false}>
       <GridViewer
-        grid={grid}
+        rawData={grid}
         path={result?.path}
         highlight={highlight}
         hasDaemonAttached={hasDaemonAttached}
       />
       <Col gap grow>
         <BufferSizeViewer
-          bufferSize={bufferSize}
+          rawData={bufferSize}
           result={result}
           highlight={highlight}
           hasDaemonAttached={hasDaemonAttached}
           onHighlight={setHighlight}
         />
         <DaemonsViewer
+          sortDaemonsBySequence={sortDaemonsBySequence}
           types={typesFragment}
-          daemons={daemons}
+          rawData={daemons}
           result={result}
           onHighlight={setHighlight}
         />

src/electron/renderer/pages/HistoryDetails.tsx

@@ -4,12 +4,13 @@ import {
   RemoveHistoryEntryAction,
 } from '@/electron/common';
 import { formatDuration } from 'date-fns';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useHistoryEntryFromParam } from '../common';
 import { Col, FlatButton, HistoryViewer, LinkButton, Row } from '../components';
 import { Only } from '../components/Only';
+import { StateContext } from '../state';
 
 const Heading2 = styled.h2`
   color: var(--primary);
@@ -99,12 +100,18 @@ export const HistoryDetails = () => {
     return <HistoryDetailsError entry={entry} hasSource={hasSource} />;
   }
 
+  const {
+    settings: { sortDaemonsBySequence },
+  } = useContext(StateContext);
   const seconds = (entry.finishedAt - entry.startedAt) / 1000;
   const duration = formatDuration({ seconds });
 
   return (
     <Col gap scroll={false}>
-      <HistoryViewer entry={entry} />
+      <HistoryViewer
+        entry={entry}
+        sortDaemonsBySequence={sortDaemonsBySequence}
+      />
       <Row style={{ justifyContent: 'space-between' }}>
         <Col>
           <DetailText>Done in {duration}</DetailText>

src/electron/renderer/pages/SelectSequence.tsx

@@ -47,6 +47,7 @@ function toUniqueValue(result: BreachProtocolResultJSON) {
 export const SelectSequence = () => {
   const {
     analysis: { entry, options, result },
+    settings: { sortDaemonsBySequence },
   } = useContext(StateContext);
   const { status } = useContext(StateContext);
   const [activeResult, setActiveResult] =
@@ -102,7 +103,11 @@ export const SelectSequence = () => {
         </Only>
       </Col>
       <Col gap>
-        <HistoryViewer entry={entry} customResult={activeResult} />
+        <HistoryViewer
+          entry={entry}
+          customResult={activeResult}
+          sortDaemonsBySequence={sortDaemonsBySequence}
+        />
         <Row style={{ marginTop: 'auto', justifyContent: 'flex-end' }}>
           {fromScreenShot && (
             <FlatButton