abiity to expand output node for bigger view

Author: jsajal

src/components/atoms/Editor.css

@@ -1,8 +1,6 @@
 .cm-editor {
-  height: 100%;
-  width: 100%;
-  min-width: 288px;
-  resize: both;
+  max-width: 384px;
+  max-height: 384px;
   overflow: auto !important;
 }
 .cm-scroller {

src/components/molecules/flow/nodes/OutputNode.js

@@ -2,8 +2,14 @@ import * as React from 'react';
 import { PropTypes } from 'prop-types';
 import FlowNode from 'components/atoms/flow/FlowNode';
 import { Editor } from 'components/atoms/Editor';
+import { ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
+import OuputNodeExpandedModal from 'components/molecules/modals/OutputNodeExpandedModal';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
 
 const OutputNode = ({ id, data }) => {
+  const [outputExpandedModal, setOutputExpandedModal] = React.useState(false);
+
   return (
     <FlowNode
       title='Output'
@@ -12,13 +18,27 @@ const OutputNode = ({ id, data }) => {
       handleRight={true}
       handleRightData={{ type: 'source' }}
     >
+      {data.output ? (
+        <button type='button' onClick={() => setOutputExpandedModal(true)}>
+          <Tippy content='Expand' placement='top'>
+            <ArrowsPointingOutIcon className='w-5 h-5' />
+          </Tippy>
+        </button>
+      ) : (
+        <></>
+      )}
       <div className='w-full text-xs text-gray-900 border border-gray-300 rounded-lg nodrag nowheel min-w-72 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'>
         {data.output ? (
           <Editor name='output-text' value={JSON.stringify(data.output, null, 2)} readOnly={true} />
         ) : (
           <div className='p-2'>{'Run flow to see data'}</div>
         )}
       </div>
+      <OuputNodeExpandedModal
+        closeFn={() => setOutputExpandedModal(false)}
+        open={outputExpandedModal}
+        data={data.output}
+      />
     </FlowNode>
   );
 };

src/components/molecules/modals/OutputNodeExpandedModal.js

@@ -0,0 +1,65 @@
+import React, { Fragment, useState } from 'react';
+import { PropTypes } from 'prop-types';
+import { Dialog, Transition, Listbox } from '@headlessui/react';
+import Button from 'components/atoms/common/Button';
+import { BUTTON_INTENT_TYPES, BUTTON_TYPES, GENAI_MODELS } from 'constants/Common';
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline';
+import { generateFlowData } from '../flow/flowtestai';
+import { init } from '../flow';
+import useCanvasStore from 'stores/CanvasStore';
+import { toast } from 'react-toastify';
+import { isEqual } from 'lodash';
+import useCommonStore from 'stores/CommonStore';
+import useCollectionStore from 'stores/CollectionStore';
+import { promiseWithTimeout } from 'utils/common';
+import { Editor } from 'components/atoms/Editor';
+
+const OuputNodeExpandedModal = ({ closeFn = () => null, open = false, data }) => {
+  return (
+    <Transition appear show={open} as={Fragment}>
+      <Dialog as='div' className='relative z-10' onClose={closeFn}>
+        <Transition.Child
+          as={Fragment}
+          enter='ease-out duration-300'
+          enterFrom='opacity-0'
+          enterTo='opacity-100'
+          leave='ease-in duration-200'
+          leaveFrom='opacity-100'
+          leaveTo='opacity-0'
+        >
+          <div className='fixed inset-0 bg-black/25' />
+        </Transition.Child>
+
+        <div className='fixed inset-0 overflow-y-auto'>
+          <div className='flex items-center justify-center min-h-full p-4 text-center'>
+            <Transition.Child
+              as={Fragment}
+              enter='ease-out duration-300'
+              enterFrom='opacity-0 scale-95'
+              enterTo='opacity-100 scale-100'
+              leave='ease-in duration-200'
+              leaveFrom='opacity-100 scale-100'
+              leaveTo='opacity-0 scale-95'
+            >
+              <Dialog.Panel className='w-full max-w-2xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-xl'>
+                <Dialog.Title as='h3' className='pb-4 text-lg font-semibold text-center border-b border-gray-300'>
+                  Ouput
+                </Dialog.Title>
+                <div className='mt-6'>
+                  <Editor name='output-text' value={JSON.stringify(data, null, 2)} readOnly={true} />
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+};
+
+OuputNodeExpandedModal.propTypes = {
+  closeFn: PropTypes.func.isRequired,
+  open: PropTypes.boolean.isRequired,
+};
+export default OuputNodeExpandedModal;