From eb1ce03b484ad78ed1fa9ad6e0ba2fa6473e51c4 Mon Sep 17 00:00:00 2001 From: Ian Arawjo Date: Tue, 2 May 2023 21:33:12 -0400 Subject: [PATCH] Modularize alert modals --- chain-forge/src/AlertModal.js | 28 ++++++++++++++++++ chain-forge/src/EvaluatorNode.js | 51 +++++--------------------------- chain-forge/src/PromptNode.js | 2 +- 3 files changed, 37 insertions(+), 44 deletions(-) create mode 100644 chain-forge/src/AlertModal.js diff --git a/chain-forge/src/AlertModal.js b/chain-forge/src/AlertModal.js new file mode 100644 index 0000000..53fa4d0 --- /dev/null +++ b/chain-forge/src/AlertModal.js @@ -0,0 +1,28 @@ +/** An alert popup for displaying errors */ +import React, { useState, forwardRef, useImperativeHandle } from 'react'; +import { useDisclosure } from '@mantine/hooks'; +import { Modal } from '@mantine/core'; + +const AlertModal = forwardRef((props, ref) => { + // Mantine modal popover for alerts + const [opened, { open, close }] = useDisclosure(false); + const [alertMsg, setAlertMsg] = useState(''); + + // This gives the parent access to triggering the modal alert + const trigger = (msg) => { + console.error(msg); + setAlertMsg(msg); + open(); + }; + useImperativeHandle(ref, () => ({ + trigger, + })); + + return ( + +

{alertMsg}

+ + ); +}); + +export default AlertModal; \ No newline at end of file diff --git a/chain-forge/src/EvaluatorNode.js b/chain-forge/src/EvaluatorNode.js index 7265b6f..a7841e8 100644 --- a/chain-forge/src/EvaluatorNode.js +++ b/chain-forge/src/EvaluatorNode.js @@ -1,12 +1,9 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { Handle } from 'react-flow-renderer'; import useStore from './store'; import StatusIndicator from './StatusIndicatorComponent' import NodeLabel from './NodeLabelComponent' - -// Mantine modal -import { useDisclosure } from '@mantine/hooks'; -import { Modal } from '@mantine/core'; +import AlertModal from './AlertModal' // Ace code editor import AceEditor from "react-ace"; @@ -14,28 +11,6 @@ import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/theme-xcode"; import "ace-builds/src-noconflict/ext-language_tools"; -// CodeMirror text editor -// import CodeMirror from '@uiw/react-codemirror'; -// import { globalCompletion, python } from '@codemirror/lang-python'; -// // import { Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate} from '@codemirror/view'; -// import { indentUnit } from '@codemirror/language'; -// import { okaidia } from '@uiw/codemirror-theme-okaidia'; // dark theme -// import { solarizedDark } from '@uiw/codemirror-theme-solarized'; // dark theme; warm -// import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac'; // light theme NOTE: Unfortunately this does not show selected text, no idea why. -// import { materialLight } from '@uiw/codemirror-theme-material'; // light theme, material -// import { xcodeDark, xcodeLight } from '@uiw/codemirror-theme-xcode'; // light theme, xcode -// import { sublime } from '@uiw/codemirror-theme-sublime'; - -// Experimenting with making the 'def evaluator' line read-only -// import readOnlyRangesExtension from 'codemirror-readonly-ranges' -// const getReadOnlyRanges = (editorState) => { -// return [{ -// from: editorState.doc.line(2).from, //same as: editorState.doc.line(0).from or 0 -// to: editorState.doc.line(2).to -// }] -// } -// // Add readOnlyRangesExtension(getReadOnlyRanges) to extensions prop of CodeMirror component - const EvaluatorNode = ({ data, id }) => { const inputEdgesForNode = useStore((state) => state.inputEdgesForNode); @@ -44,9 +19,8 @@ const EvaluatorNode = ({ data, id }) => { const setDataPropsForNode = useStore((state) => state.setDataPropsForNode); const [status, setStatus] = useState('none'); - // Mantine modal popover for alerts - const [opened, { open, close }] = useDisclosure(false); - const [alertMsg, setAlertMsg] = useState(''); + // For displaying error messages to user + const alertModal = useRef(null); const [hovered, setHovered] = useState(false); const [codeText, setCodeText] = useState(data.code); @@ -74,13 +48,6 @@ const EvaluatorNode = ({ data, id }) => { setDataPropsForNode(id, {code: code}); }; - // Trigger an alert modal popover with Mantine: - const triggerErrorAlert = (msg) => { - console.error(msg); - setAlertMsg(msg); - open(); - }; - const handleRunClick = (event) => { // Get the ids from the connected input nodes: const input_node_ids = inputEdgesForNode(id).map(e => e.source); @@ -94,7 +61,7 @@ const EvaluatorNode = ({ data, id }) => { if (codeText.search(/def\s+evaluate\s*(.*):/) === -1) { const err_msg = `Could not find required function 'evaluate'. Make sure you have defined an 'evaluate' function.`; setStatus('error'); - triggerErrorAlert(err_msg); + alertModal.current.trigger(err_msg); return; } @@ -102,7 +69,7 @@ const EvaluatorNode = ({ data, id }) => { const rejected = (err_msg) => { setStatus('error'); - triggerErrorAlert(err_msg); + alertModal.current.trigger(err_msg); }; // Run evaluator in backend @@ -126,7 +93,7 @@ const EvaluatorNode = ({ data, id }) => { // Check if there's an error; if so, bubble it up to user and exit: if (json.error) { setStatus('error'); - triggerErrorAlert(json.error); + alertModal.current.trigger(json.error); return; } @@ -210,9 +177,7 @@ const EvaluatorNode = ({ data, id }) => { id="output" style={{ top: '50%', background: '#555' }} /> - -

{alertMsg}

- +
Function to map over each  
-
+
Models to query: