Fix applicationStateModel serialization

public/workers/message_worker.js

@@ -9,7 +9,7 @@ onmessage = async(e) => {
   const request = {
     ApplicationState: state
   };
-  const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
+  const dataParsed = JSON.stringify(request, GetCircularReplacer());
   fetch(url, {
       method: 'POST',
       headers: new Headers({
@@ -26,13 +26,25 @@ onmessage = async(e) => {
       });
 };
 
-function GetCircularReplacerKeepDataStructure()
+function GetCircularReplacer()
 {
   return (key, value) => {
     if (key === 'parent') {
       return;
     }
 
+    if (key === 'containers') {
+      return Array.from(value.entries());
+    }
+
+    if (key === 'symbols') {
+      return Array.from(value.entries());
+    }
+
+    if (key === 'linkedContainers') {
+      return Array.from(value);
+    }
+
     return value;
   };
 }

src/Components/Messages/Messages.tsx

@@ -4,8 +4,6 @@ import { FixedSizeList as List } from 'react-window';
 import { MessageType } from '../../Enums/MessageType';
 import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IMessage } from '../../Interfaces/IMessage';
-import { DISABLE_API } from '../../utils/default';
-import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
 import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
 
 interface IMessagesProps {

src/Components/MessagesSidebar/Messages.tsx

@@ -1,131 +0,0 @@
-import * as React from 'react';
-import { FixedSizeList as List } from 'react-window';
-import { API_GET_FEEDBACK_URL } from '../../../public/svgld-settings';
-import { MessageType } from '../../Enums/MessageType';
-import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
-import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
-import { IHistoryState } from '../../Interfaces/IHistoryState';
-import { IMessage } from '../../Interfaces/IMessage';
-import { DISABLE_API } from '../../utils/default';
-import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
-import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
-
-interface IMessagesSidebarProps {
-  historyState: IHistoryState
-}
-
-// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-const myWorker = window.Worker && new Worker('workers/message_worker.js');
-
-function UseWorker(
-  state: IHistoryState,
-  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
-): void {
-  React.useEffect(() => {
-    // use webworker for the stringify to avoid freezing
-    myWorker.postMessage({
-      state,
-      url: API_GET_FEEDBACK_URL
-    });
-
-    return () => {
-    };
-  }, [state]);
-
-  React.useEffect(() => {
-    myWorker.onmessage = (event) => {
-      setMessages(event.data as IMessage[]);
-    };
-  }, [setMessages]);
-}
-
-function UseAsync(
-  state: IHistoryState,
-  setMessages: React.Dispatch<React.SetStateAction<IMessage[]>>
-): void {
-  React.useEffect(() => {
-    const request: IGetFeedbackRequest = {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      ApplicationState: state
-    };
-    const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
-    fetch(API_GET_FEEDBACK_URL, {
-      method: 'POST',
-      headers: new Headers({
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        'Content-Type': 'application/json'
-      }),
-      body: dataParsed
-    })
-      .then(async(response) =>
-        await response.json()
-      )
-      .then(async(json: IGetFeedbackResponse) => {
-        setMessages(json.messages);
-      });
-  }, [state]);
-}
-
-export function MessagesSidebar(props: IMessagesSidebarProps): JSX.Element {
-  const [messages, setMessages] = React.useState<IMessage[]>([]);
-
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  if (window.Worker && !DISABLE_API) {
-    UseWorker(
-      props.historyState,
-      setMessages
-    );
-  } else if (!DISABLE_API) {
-    UseAsync(
-      props.historyState,
-      setMessages
-    );
-  }
-
-  function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element {
-    const reversedIndex = (messages.length - 1) - index;
-    const message = messages[reversedIndex];
-    let classType = '';
-    switch (message.type) {
-      case MessageType.Success:
-        classType = 'bg-green-400 hover:bg-green-400/60';
-        break;
-
-      case MessageType.Warning:
-        classType = 'bg-yellow-400 hover:bg-yellow-400/60';
-        break;
-
-      case MessageType.Error:
-        classType = 'bg-red-400 hover:bg-red-400/60';
-        break;
-    }
-    return (<p
-      key={`m-${reversedIndex}`}
-      className={`p-2 ${classType}`}
-      style={style}
-    >
-      {message.text}
-    </p>);
-  }
-
-  return (
-  //       <button
-  //         onClick={() => { setMessages([]); }}
-  //         className='h-6'
-  //         aria-label='Clear all messages'
-  //         title='Clear all messages'
-  //       >
-  //         <TrashIcon className='heroicon'></TrashIcon>
-  //       </button>
-  //     </div>
-    <List
-      className='List md:text-xs font-bold'
-      itemCount={messages.length}
-      itemSize={65}
-      height={window.innerHeight - TITLE_BAR_HEIGHT}
-      width={'100%'}
-    >
-      {Row}
-    </List>
-  );
-};

src/Components/UI/UseWorker.tsx

@@ -3,7 +3,7 @@ import { IHistoryState } from '../../Interfaces/IHistoryState';
 import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
 import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
 import { IMessage } from '../../Interfaces/IMessage';
-import { GetCircularReplacerKeepDataStructure } from '../../utils/saveload';
+import { GetCircularReplacer } from '../../utils/saveload';
 import { API_GET_FEEDBACK_URL } from '../../../public/svgld-settings';
 
 // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -37,7 +37,7 @@ export function UseAsync(
       // eslint-disable-next-line @typescript-eslint/naming-convention
       ApplicationState: state
     };
-    const dataParsed = JSON.stringify(request, GetCircularReplacerKeepDataStructure());
+    const dataParsed = JSON.stringify(request, GetCircularReplacer());
     fetch(API_GET_FEEDBACK_URL, {
       method: 'POST',
       headers: new Headers({