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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.50-dev",
+  "version": "0.0.51-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

@@ -27,7 +27,7 @@ const MODES = {
  * 
  * @return {JSX}
  */
-export const Editor = forwardRef(({ }, ref) => {
+export const Editor = forwardRef(({ onSelectAbstraction }, ref) => {
     const [state, dispatch] = useReducer(editorReducer, initialState);
 
     const selectTab = useCallback((id) => {
@@ -59,6 +59,10 @@ export const Editor = forwardRef(({ }, ref) => {
         dispatch({ type: "SET_MODE", payload: mode });
     }, []);
 
+    const setMappedIds = useCallback((ids) => {
+        dispatch({ type: "SET_MAPPED_IDS", payload: ids });
+    }, []);
+
     const api = useMemo(() => {
         return {
             state,
@@ -68,9 +72,10 @@ export const Editor = forwardRef(({ }, ref) => {
             closeTab,
             moveTab,
             setMapping,
-            setMode
+            setMode,
+            setMappedIds
         };
-    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId, setMapping, setMode]);
+    }, [state, addTab, selectTab, closeTab, moveTab, setTabGroupId, setMapping, setMode, setMappedIds]);
 
     useImperativeHandle(ref, () => api, [api]);
 
@@ -81,7 +86,7 @@ export const Editor = forwardRef(({ }, ref) => {
                     <Tabs />
                 </div>
                 <div className="monacoContainer">
-                    <MonacoInstance />
+                    <MonacoInstance onSelectAbstraction={onSelectAbstraction}/>
                 </div>
             </div>
         </EditorContext.Provider>

package/src/components/Editor/EditorReducer.js

@@ -6,7 +6,8 @@ export const initialState = {
     activeTab: null,
     mode: EDITOR_MODES.DESIGN,
     mapping: new Map(),
-    parentTabGroupId: null
+    parentTabGroupId: null,
+    mappedIds: []
 };
 
 export const editorReducer = (state, action) => {
@@ -121,6 +122,13 @@ export const editorReducer = (state, action) => {
             };
         }
 
+        case "SET_MAPPED_IDS": {
+            return {
+                ...state,
+                mappedIds: action.payload
+            };
+        }
+
         case "RESET_STATE": {
             return initialState;
         }

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

@@ -9,7 +9,7 @@ import "./MonacoInstance.scss"
 
 import { useEditor } from "../Editor";
 
-export const MonacoInstance = ({ }) => {
+export const MonacoInstance = ({onSelectAbstraction}) => {
     const { state } = useEditor();
     const [editorContent, setEditorContent] = useState("Loading content...");
     const [showEditor, setShowEditor] = useState(false);
@@ -29,7 +29,7 @@ export const MonacoInstance = ({ }) => {
         } else {
             setShowEditor(false);
         }
-    }, [state.activeTab, editorRef]);
+    }, [state, editorRef]);
 
     useEffect(() => {
         content.current = editorContent;
@@ -67,16 +67,29 @@ export const MonacoInstance = ({ }) => {
         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();
+            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 overlayDiv = <div className="line-block-overlay" style={{ top: top + "px", height: (bottom - top) + "px" }}></div>;
-             divs.push(overlayDiv);
+
+            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]);
+    }, [editorRef?.current, state, onSelectAbstraction]);
 
     // Scroll the editor and update overlays on wheel event.
     const handleWheel = useCallback((e) => {

package/src/stories/Editor.stories.js

@@ -46,6 +46,10 @@ const Template = (args) => {
 
     const [dragPreviewLabel, setDragPreviewLabel] = useState(<></>);
     const [selectTool, setSelectTool] = useState("select");
+    const [mappedIds, setMappedIds] = useState([
+        "c4f43010-71ef-46e6-bf38-0548d3a34012",
+        "8bf2605a-1940-49de-9b2f-0efa22bf658c"
+    ]);
 
     const editorRef = useRef();
 
@@ -63,6 +67,7 @@ const Template = (args) => {
         editorRef.current.addTab(result);translator_mapping
         editorRef.current.setMapping("TransactionDB.py", transactiondb_mapping);
         editorRef.current.setMapping("FrenchTranslator.py", translator_mapping);
+        editorRef.current.setMappedIds(mappedIds);
     }, []);
 
     const [dragging, setDragging] = useState(false);
@@ -139,6 +144,16 @@ const Template = (args) => {
         }
     }, [editorRef]);
 
+    const onSelectAbstraction = useCallback((entry) => {
+        action("Abstraction Selected")(entry);
+        const found = mappedIds.find((id) => id === entry.uid);
+        const newMap = (found)?
+            mappedIds.filter((id) => id !== found):
+            [...mappedIds, entry.uid];
+        setMappedIds(newMap);
+        editorRef.current.setMappedIds(newMap);
+    }, [mappedIds, setMappedIds, editorRef]);
+
     return (
         <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={handleDragEnd}>
 
@@ -147,7 +162,7 @@ const Template = (args) => {
                     <ToolBarEditor onSelectTool={onSelectTool} />
                 </div>
                 <div className="flow">
-                    <Editor ref={editorRef}{...args} />
+                    <Editor ref={editorRef} onSelectAbstraction={onSelectAbstraction} {...args} />
                     {dragging && (
                         <div
                             style={{