add text modal view for table render

src/frontend/src/components/stringReaderComponent/index.tsx

@@ -1,7 +1,14 @@
+import TextModal from "../../modals/textModal";
+
 export default function StringReader({
   string,
 }: {
   string: string;
 }): JSX.Element {
-  return <span className="truncate">{string}</span>;
+  return (
+    string.length > 10 ?
+      <TextModal value={string}>
+        <span className="truncate">{string}</span>
+      </TextModal> : <span className="truncate">{string}</span>
+  );
 }

src/frontend/src/constants/constants.ts

@@ -141,6 +141,7 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
 
 export const CODE_DICT_DIALOG_SUBTITLE =
   "Edit your dictionary. This dialog allows you to create your own customized dictionary. You can add as many key-value pairs as you want. While in edit mode, you can enter ({}) or ([]), and this will result in adding a new object or array.";
+
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant

src/frontend/src/modals/textModal/index.tsx

@@ -0,0 +1,61 @@
+import "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
+// import "ace-builds/webpack-resolver";
+import { cloneDeep } from "lodash";
+import { useEffect, useState } from "react";
+import JsonView from "react18-json-view";
+import "react18-json-view/src/dark.css";
+import "react18-json-view/src/style.css";
+import IconComponent from "../../components/genericIconComponent";
+import { CODE_DICT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { useDarkStore } from "../../stores/darkStore";
+import BaseModal from "../baseModal";
+import TextOutputView from "../../shared/components/textOutputView";
+import { Button } from "../../components/ui/button";
+
+export default function TextModal({
+  children,
+  value,
+}: {
+  children: JSX.Element;
+  value: Object;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      setOpen={setOpen}
+    >
+      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      <BaseModal.Header
+        description={"Inspect the text below."}
+      >
+        <span className="pr-2">
+          {"View Text"}
+        </span>
+        <IconComponent
+          name="Type"
+          className="h-6 w-6 pl-1 text-primary"
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col transition-all">
+            <TextOutputView value={value} left={false} />
+        </div>
+      </BaseModal.Content>
+      <BaseModal.Footer>
+        <div className="flex w-full justify-end pt-2">
+          <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}