sample-ui-component-library 0.0.51-dev → 0.0.53-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.51-dev",
+  "version": "0.0.53-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/Editor.jsx

@@ -10,7 +10,8 @@ import React, {
     useImperativeHandle,
     useMemo,
     useReducer,
-    useContext
+    useContext,
+    useRef,
 } from "react";
 
 import { EditorContext } from "./EditorContext";
@@ -27,14 +28,19 @@ const MODES = {
  * 
  * @return {JSX}
  */
-export const Editor = forwardRef(({ onSelectAbstraction }, ref) => {
+export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab }, ref) => {
     const [state, dispatch] = useReducer(editorReducer, initialState);
+    const editorRef = useRef();
 
     const selectTab = useCallback((id) => {
         dispatch({ type: "SELECT_TAB", payload: id });
-    }, []);
+        if (onSelectTab) {
+            onSelectTab(id);
+        }
+    }, [onSelectTab]);
 
     const closeTab = useCallback((id) => {
+        editorRef.current && editorRef.current.clearModel(id);
         dispatch({ type: "CLOSE_TAB", payload: id });
     }, []);
 
@@ -63,19 +69,46 @@ export const Editor = forwardRef(({ onSelectAbstraction }, ref) => {
         dispatch({ type: "SET_MAPPED_IDS", payload: ids });
     }, []);
 
+    const getTabs = useCallback(() => {
+        return state.tabs;
+    }, [state.tabs]);
+
+    const getTab = useCallback((id) => {
+        return state.tabs.find((tab) => tab.uid === id);
+    }, [state.tabs]);
+
+    const getActiveTab = useCallback(() => {
+        return state.tabs.find((tab) => tab.id === state.activeTabId);
+    }, [state.tabs, state.activeTabId]);
+
+    const setUpdatedContent = useCallback((tab, content) => {
+        dispatch({ type: "SET_UPDATED_CONTENT", payload: {tab, content} });
+    }, []);
+
+    const setContent = useCallback((tab, content) => {
+        dispatch({ type: "SET_CONTENT", payload: {tab, content} });
+    }, []);
+
+    const api_entries = {
+        state,
+        addTab,
+        setTabGroupId,
+        selectTab,
+        closeTab,
+        moveTab,
+        setMapping,
+        setMode,
+        setMappedIds,
+        getTab,
+        getTabs,
+        getActiveTab,
+        setUpdatedContent,
+        setContent
+    }
+
     const api = useMemo(() => {
-        return {
-            state,
-            addTab,
-            setTabGroupId,
-            selectTab,
-            closeTab,
-            moveTab,
-            setMapping,
-            setMode,
-            setMappedIds
-        };
-    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId, setMapping, setMode, setMappedIds]);
+        return api_entries;
+    }, Object.values(api_entries));
 
     useImperativeHandle(ref, () => api, [api]);
 
@@ -86,7 +119,9 @@ export const Editor = forwardRef(({ onSelectAbstraction }, ref) => {
                     <Tabs />
                 </div>
                 <div className="monacoContainer">
-                    <MonacoInstance onSelectAbstraction={onSelectAbstraction}/>
+                    <MonacoInstance 
+                        ref={editorRef}
+                        onSelectAbstraction={onSelectAbstraction}/>
                 </div>
             </div>
         </EditorContext.Provider>

package/src/components/Editor/EditorReducer.js

@@ -7,7 +7,8 @@ export const initialState = {
     mode: EDITOR_MODES.DESIGN,
     mapping: new Map(),
     parentTabGroupId: null,
-    mappedIds: []
+    mappedIds: [],
+    modifiedIndicator: false,
 };
 
 export const editorReducer = (state, action) => {
@@ -24,6 +25,11 @@ export const editorReducer = (state, action) => {
                     activeTab: tabInfo
                 };
             }
+
+            // Initialize updatedContent and isDirty properties for the tab. 
+            // These are used to track whether the content of the tab has been modified since it was opened.
+            tab.updatedContent = tab.content;
+            tab.isDirty = false;
             
             // Insert tab at specific location if it was provided.
             let tabs =  [...state.tabs];
@@ -133,6 +139,30 @@ export const editorReducer = (state, action) => {
             return initialState;
         }
 
+        case "SET_UPDATED_CONTENT": {
+            const { tab, content } = action.payload;
+            tab.updatedContent = content;
+            tab.isDirty = (tab.content !== tab.updatedContent);
+            
+            return {
+                ...state,
+                modifiedIndicator: !state.modifiedIndicator,
+                tabs: state.tabs.map(t => t.uid === tab.uid ? tab : t)
+            };
+        }
+
+        case "SET_CONTENT": {
+            const { tab, content } = action.payload;
+            tab.content = content;
+            tab.isDirty = (tab.content !== tab.updatedContent);
+            
+            return {
+                ...state,
+                modifiedIndicator: !state.modifiedIndicator,
+                tabs: state.tabs.map(t => t.uid === tab.uid ? tab : t)
+            };
+        }
+
         default: {
             return state;
         }

package/src/components/Editor/MonacoInstance/MonacoInstance copy.jsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import EDITOR_MODES from '../EDITOR_MODES';
+
+import Editor from '@monaco-editor/react';
+
+import "./MonacoInstance.scss"
+
+import { useEditor } from "../Editor";
+
+export const MonacoInstance = ({onSelectAbstraction, updateContent}) => {
+    const { state } = useEditor();
+    const [editorContent, setEditorContent] = useState("Loading content...");
+    const [showEditor, setShowEditor] = useState(false);
+    const activeTabRef = useRef(state.activeTab);
+
+    const editorRef = useRef(null);
+    const content = useRef();
+    const containerRef = useRef(null);
+    const frameRef = useRef(0);
+
+    const [overlayDivs, setOverlayDivs] = useState();
+
+    // When active tab changes, update the editor content and add overlays for the new active tab.
+    useLayoutEffect(() => {
+        if (state.activeTab) {
+            console.log(state.activeTab)
+            activeTabRef.current = state.activeTab;
+            setEditorContent(state.activeTab.updatedContent);
+            setShowEditor(true);
+            addOverlays();
+        } else {
+            setShowEditor(false);
+        }
+    }, [state.activeTab, editorRef]);
+
+    // When the editor content changes, update the content in the context for the active tab.
+    // Setup content change listener for the editor to update the content in the context 
+    // and track dirty state of the tab.
+    useEffect(() => {
+        content.current = editorContent;
+        if (editorRef?.current && content.current !== undefined && content.current !== null) {  
+            editorRef.current.setValue(content.current);
+            editorRef.current.getModel().onDidChangeContent((content) => {
+                updateContent(activeTabRef.current, editorRef.current.getValue());
+            });
+        }
+    }, [editorContent]);
+
+    /**
+     * Callback for when the Monaco Editor is mounted. 
+     * @param {Object} editor 
+     * @param {Object} monaco 
+     */
+    const handleEditorDidMount = useCallback((editor, monaco) => {
+        editorRef.current = editor;
+        if (content?.current) {
+            editorRef.current.setValue(content.current);
+        }
+        editorRef.current.layout();
+        addOverlays();
+
+    }, []);
+
+    // Add overlays to editor for the given line ranges.
+    const addOverlays = useCallback(() => {
+        if (!editorRef.current) return;
+
+        if (state.mode !== EDITOR_MODES.MAPPING || !state.mapping.get(state.activeTab?.name)) {
+            setOverlayDivs([]);
+            return;
+        }
+
+        const ranges = state.mapping.get(state.activeTab?.name);
+        const lineCount = editorRef.current.getModel().getLineCount();
+        const lineHeight = editorRef.current.getOption(monaco.editor.EditorOption.lineHeight);        
+        const divs = [];
+
+        ranges.forEach((entry) => {
+            const top = editorRef.current.getTopForLineNumber(entry.start_line) - editorRef.current.getScrollTop();
+            let bottom = editorRef.current.getTopForLineNumber(entry.end_line + 1) - editorRef.current.getScrollTop();
+            if (entry.end_line >= lineCount) {
+                bottom = bottom + lineHeight;
+            }
+
+            const style= {
+                top: top + "px", 
+                height: (bottom - top) + "px" 
+            }
+            if (state.mappedIds.includes(entry.uid)) {
+                style["backgroundColor"] = "rgba(255, 0, 0, 0.3)";
+            }
+            const overlayDiv = <div 
+                className="line-block-overlay" 
+                onClick={(e) => onSelectAbstraction(entry)} 
+                style={style}>
+            </div>;
+            divs.push(overlayDiv);
+         
+        });
+        setOverlayDivs(divs);
+    }, [editorRef?.current, state, onSelectAbstraction]);
+
+    // Scroll the editor and update overlays on wheel event.
+    const handleWheel = useCallback((e) => {
+        if (!editorRef.current) return;
+        const deltaY = e.deltaY;
+        const currentScrollTop = editorRef.current.getScrollTop();
+        editorRef.current.setScrollTop(currentScrollTop + deltaY);
+        addOverlays();
+    }, [state.activeTab, addOverlays]);
+
+    // Editor options for Monaco Editor.
+    const editorOptions = {
+        fontSize: "13px",
+        minimap: {
+            enabled: false
+        },
+        padding: {
+            top: 10
+        },
+        renderWhitespace: "none",
+        wordWrap: "on",
+        scrollBeyondLastLine: false,
+        automaticLayout: false
+    }
+
+    // Disable automatic layout and Manually layout the editor to avoid resize observer loops
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const ro = new ResizeObserver(() => {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = requestAnimationFrame(() => {
+                editorRef.current?.layout();
+                addOverlays(); 
+            });
+        });
+
+        ro.observe(containerRef.current);
+
+        return () => {
+            cancelAnimationFrame(frameRef.current);
+            ro.disconnect();
+        };
+    }, [state.activeTab, addOverlays]);
+
+    /**
+     * Render the editor if there is an active tab, otherwise render a placeholder message.
+     * @returns JSX
+     */
+    const renderEditor = () => {
+        if (showEditor) {
+            return (
+                <Editor
+                    defaultLanguage="python"
+                    defaultValue={editorContent}
+                    onMount={handleEditorDidMount}
+                    theme="vs-dark"
+                    options={editorOptions}
+                />
+            );
+        } else {
+            return <div className="no-tab">Select file or drag and drop to view.</div>;
+        }
+    }
+
+    return (
+        <div className="editor-container" ref={containerRef}>
+            {renderEditor()}
+            {
+                state.mode === EDITOR_MODES.MAPPING &&
+                <div className="overlay-layer" onWheel={handleWheel}>
+                    {overlayDivs}
+                </div>
+            }
+        </div>
+    )
+}
+
+MonacoInstance.propTypes = {
+    editorContent: PropTypes.string,
+}

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -1,174 +1,146 @@
-import React, { useCallback, useLayoutEffect, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+    useCallback,
+    forwardRef,
+    useLayoutEffect,
+    useEffect,
+    useRef,
+    useState,
+    useMemo,
+    useImperativeHandle
+} from "react";
+import PropTypes from "prop-types";
 
-import EDITOR_MODES from '../EDITOR_MODES';
+import { useEditor } from "../Editor";
 
-import Editor from '@monaco-editor/react';
+import EDITOR_MODES from "../EDITOR_MODES";
 
-import "./MonacoInstance.scss"
+import Editor from "@monaco-editor/react";
 
-import { useEditor } from "../Editor";
+import "./MonacoInstance.scss";
 
-export const MonacoInstance = ({onSelectAbstraction}) => {
-    const { state } = useEditor();
-    const [editorContent, setEditorContent] = useState("Loading content...");
-    const [showEditor, setShowEditor] = useState(false);
-
-    const editorRef = useRef(null);
-    const content = useRef();
-    const containerRef = useRef(null);
-    const frameRef = useRef(0);
-
-    const [overlayDivs, setOverlayDivs] = useState();
-
-    useLayoutEffect(() => {
-        if (state.activeTab) {
-            setEditorContent(state.activeTab.content);
-            setShowEditor(true);
-            addOverlays();
-        } else {
-            setShowEditor(false);
-        }
-    }, [state, editorRef]);
-
-    useEffect(() => {
-        content.current = editorContent;
-        if (editorRef?.current && content.current !== undefined && content.current !== null) {  
-            editorRef.current.setValue(content.current);
-        }
-    }, [editorContent]);
-
-    /**
-     * Callback for when the Monaco Editor is mounted. 
-     * @param {Object} editor 
-     * @param {Object} monaco 
-     */
-    const handleEditorDidMount = useCallback((editor, monaco) => {
-        editorRef.current = editor;
-        if (content?.current) {
-            editorRef.current.setValue(content.current);
-        }
-        editorRef.current.layout();
-        addOverlays();
-    }, [state.activeTab]);
-
-    // Add overlays to editor for the given line ranges.
-    const addOverlays = useCallback(() => {
-        if (!editorRef.current) return;
-
-        if (state.mode !== EDITOR_MODES.MAPPING || !state.mapping.get(state.activeTab?.name)) {
-            setOverlayDivs([]);
-            return;
-        }
-
-        const ranges = state.mapping.get(state.activeTab?.name);
-        const lineCount = editorRef.current.getModel().getLineCount();
-        const lineHeight = editorRef.current.getOption(monaco.editor.EditorOption.lineHeight);        
-        const divs = [];
-
-        ranges.forEach((entry) => {
-            const top = editorRef.current.getTopForLineNumber(entry.start_line) - editorRef.current.getScrollTop();
-            let bottom = editorRef.current.getTopForLineNumber(entry.end_line + 1) - editorRef.current.getScrollTop();
-            if (entry.end_line >= lineCount) {
-                bottom = bottom + lineHeight;
-            }
+export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
+        const { state, setUpdatedContent } = useEditor();
+        const [showEditor, setShowEditor] = useState(false);
+        const activeTabRef = useRef(state.activeTab);
+
+        const editorRef = useRef(null);
+        const modelsRef = useRef(new Map());
 
-            const style= {
-                top: top + "px", 
-                height: (bottom - top) + "px" 
+        // When active tab changes, update the editor content and add overlays for the new active tab.
+        useEffect(() => {
+            if (state.activeTab) {
+                activeTabRef.current = state.activeTab;
+                editorRef.current && editorRef.current.setModel(getModel(state.activeTab));
+                setShowEditor(true);
+            } else {
+                activeTabRef.current = null;
+                setShowEditor(false);
             }
-            if (state.mappedIds.includes(entry.uid)) {
-                style["backgroundColor"] = "rgba(255, 0, 0, 0.3)";
+        }, [state.activeTab, editorRef]);
+
+        useEffect(() => {
+            return () => {
+                // Dispose all models on unmount to prevent memory leaks.
+                modelsRef.current.forEach((model) => model.dispose());
+                modelsRef.current.clear();
+                editorRef.current = null;
+            }
+        }, []); 
+
+        // Get the model given the tab.
+        const getModel = useCallback((activeTab) => {
+            let model;
+            if (modelsRef.current.has(activeTab.uid)) {
+                model = modelsRef.current.get(activeTab.uid);
+            } else {
+                const uri = monaco.Uri.parse(`file:///${activeTab.uid}`);
+                model = monaco.editor.createModel(activeTab.content, "python", uri);
+                modelsRef.current.set(activeTab.uid, model);
+            }
+            model.onDidChangeContent((content) => {
+                setUpdatedContent(activeTabRef.current, editorRef.current.getValue());
+            });
+            return model;
+        }, [editorRef, modelsRef, setUpdatedContent]);
+
+        // Setup editor ref, and clear existing models on mount to prevent mem leak from old models.
+        const handleEditorDidMount = useCallback((editor, monaco) => {
+            editorRef.current = editor;
+            editor.layout();
+            modelsRef.current = new Map();
+            monaco.editor.getModels().forEach((model) => model.dispose());
+
+            if (activeTabRef.current) {
+                editorRef.current.setModel(getModel(activeTabRef.current));
+                setShowEditor(true);
             }
-            const overlayDiv = <div 
-                className="line-block-overlay" 
-                onClick={(e) => onSelectAbstraction(entry)} 
-                style={style}>
-            </div>;
-            divs.push(overlayDiv);
-         
-        });
-        setOverlayDivs(divs);
-    }, [editorRef?.current, state, onSelectAbstraction]);
-
-    // Scroll the editor and update overlays on wheel event.
-    const handleWheel = useCallback((e) => {
-        if (!editorRef.current) return;
-        const deltaY = e.deltaY;
-        const currentScrollTop = editorRef.current.getScrollTop();
-        editorRef.current.setScrollTop(currentScrollTop + deltaY);
-        addOverlays();
-    }, [state.activeTab, addOverlays]);
-
-    // Editor options for Monaco Editor.
-    const editorOptions = {
-        fontSize: "13px",
-        minimap: {
-            enabled: false
-        },
-        padding: {
-            top: 10
-        },
-        renderWhitespace: "none",
-        wordWrap: "on",
-        scrollBeyondLastLine: false,
-        readOnly: true,
-        automaticLayout: false
-    }
-
-    // Disable automatic layout and Manually layout the editor to avoid resize observer loops
-    useEffect(() => {
-        if (!containerRef.current) return;
-
-        const ro = new ResizeObserver(() => {
-            cancelAnimationFrame(frameRef.current);
-            frameRef.current = requestAnimationFrame(() => {
-                editorRef.current?.layout();
-                addOverlays(); 
+        }, []);
+
+        // Disable automatic layout and Manually layout the editor to avoid resize observer loops
+        const containerRef = useRef(null);
+        const frameRef = useRef(0);
+        useEffect(() => {
+            if (!containerRef.current) return;
+            const ro = new ResizeObserver(() => {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = requestAnimationFrame(() => {
+                    editorRef.current?.layout();
+                });
             });
-        });
-
-        ro.observe(containerRef.current);
-
-        return () => {
-            cancelAnimationFrame(frameRef.current);
-            ro.disconnect();
-        };
-    }, [state.activeTab, addOverlays]);
-
-    /**
-     * Render the editor if there is an active tab, otherwise render a placeholder message.
-     * @returns JSX
-     */
-    const renderEditor = () => {
-        if (showEditor) {
-            return (
-                <Editor
-                    defaultLanguage="python"
-                    defaultValue={editorContent}
-                    onMount={handleEditorDidMount}
-                    theme="vs-dark"
-                    options={editorOptions}
-                />
-            );
-        } else {
-            return <div className="no-tab">Select file or drag and drop to view.</div>;
-        }
-    }
-
-    return (
-        <div className="editor-container" ref={containerRef}>
-            {renderEditor()}
-            {
-                state.mode === EDITOR_MODES.MAPPING &&
-                <div className="overlay-layer" onWheel={handleWheel}>
-                    {overlayDivs}
-                </div>
+            ro.observe(containerRef.current);
+            return () => {
+                cancelAnimationFrame(frameRef.current);
+                ro.disconnect();
+            };
+        }, [state.activeTab]);
+
+        // Setup imperative handle to clear model when tab is closed to prevent mem leak
+        const clearModel = useCallback((id) => {
+            if (modelsRef.current.has(id)) {
+                const model = modelsRef.current.get(id);
+                model.dispose();
+                modelsRef.current.delete(id);
             }
-        </div>
-    )
-}
+        }, []);
+
+        const api = useMemo(() => {
+            return {
+                clearModel,
+            };
+        }, [clearModel]);
+
+        useImperativeHandle(ref, () => api, [api]);
+
+        return (
+            <div className="editor-container" ref={containerRef}>
+                {
+                    showEditor ? 
+                    <Editor
+                        defaultLanguage="python"
+                        defaultValue={"Loading content..."}
+                        onMount={handleEditorDidMount}
+                        theme="vs-dark"
+                        options={{
+                            minimap: { enabled: false },
+                            padding: { top: 10 },
+                            renderWhitespace: "none",
+                            wordWrap: "on",
+                            scrollBeyondLastLine: false,
+                            automaticLayout: false,
+                        }}
+                    />: 
+                    <div className="no-tab">Select file or drag and drop to view.</div>
+                }
+                {state.mode === EDITOR_MODES.MAPPING && (
+                    <div className="overlay-layer" onWheel={handleWheel}>
+                        {overlayDivs}
+                    </div>
+                )}
+            </div>
+        );
+    },
+);
 
 MonacoInstance.propTypes = {
     editorContent: PropTypes.string,
-}
+};

package/src/components/Editor/MonacoInstance/MonacoInstance.scss

@@ -11,6 +11,7 @@
     position:relative;
     width:100%;
     height: 100%;
+    background: #1e1e1e;
 }
 
 .overlay-layer {

package/src/components/Editor/Tabs/Tab/Tab.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FileEarmark, XLg } from "react-bootstrap-icons";
+import { FileEarmark, XLg, CircleFill } from "react-bootstrap-icons";
 import { useDraggable } from "@dnd-kit/core";
 import PropTypes from "prop-types";
 
@@ -19,7 +19,7 @@ const INACTIVE_TAB_FG_COLOR = "#969690";
  * @param {String} label
  * @returns
  */
-export const Tab = ({ id, parentId, node }) => {
+export const Tab = ({ id, isDirty, parentId, node }) => {
     const [tabStyle, setTabStyle] = useState();
 
     const { selectTab, closeTab, state } = useEditor();
@@ -70,6 +70,11 @@ export const Tab = ({ id, parentId, node }) => {
             {...attributes}
         >
             <div className="tab-content">
+                {isDirty && 
+                    <div className="icon">
+                        <CircleFill size={6}/>
+                    </div>
+                }
                 <div className="icon">
                     <FileEarmark size={14} style={{ pointerEvents: "none" }} />
                 </div>