Modularize alert modals

This commit is contained in:
Ian Arawjo 2023-05-02 21:33:12 -04:00
parent 1a1533530c
commit eb1ce03b48
3 changed files with 37 additions and 44 deletions

View File

@ -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 (
<Modal opened={opened} onClose={close} title="Error" styles={{header: {backgroundColor: '#E52A2A', color: 'white'}}}>
<p>{alertMsg}</p>
</Modal>
);
});
export default AlertModal;

View File

@ -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' }}
/>
<Modal opened={opened} onClose={close} title="Error" styles={{header: {backgroundColor: '#E52A2A', color: 'white'}}}>
<p>{alertMsg}</p>
</Modal>
<AlertModal ref={alertModal} />
<div className="core-mirror-field">
<div className="code-mirror-field-header">Function to map over each &nbsp;
<select name="mapscope" id="mapscope" onChange={handleOnMapScopeSelect}>

View File

@ -293,7 +293,7 @@ const PromptNode = ({ data, id }) => {
<label htmlFor="num-generations" style={{fontSize: '10pt'}}>Num responses per prompt:&nbsp;</label>
<input id="num-generations" name="num-generations" type="number" min={1} max={50} defaultValue={data.n || 1} onChange={handleNumGenChange} className="nodrag"></input>
</div>
<div id="llms-list" className="nowheel" style={{backgroundColor: '#eee', padding: '8px', boxShadow: 'inset 0 0 30px #fff', overflowY: 'auto', maxHeight: '220px'}}>
<div id="llms-list" className="nowheel" style={{backgroundColor: '#eee', padding: '8px', overflowY: 'auto', maxHeight: '220px'}}>
<div style={{marginTop: '6px', marginBottom: '6px', marginLeft: '6px', paddingBottom: '4px', textAlign: 'left', fontSize: '10pt', color: '#777'}}>
Models to query:
<div className="add-llm-model-btn nodrag">