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

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>

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

@@ -22,7 +22,7 @@ export const Tabs = () => {
         if (state.tabs?.length >= 0 && state.parentTabGroupId != null) {
             drawTabs(state.tabs, state.parentTabGroupId);
         }
-    }, [state.tabs, state.parentTabGroupId]);
+    }, [state.tabs, state.modifiedIndicator, state.parentTabGroupId]);
 
     /**
      * Draw the tabs provided in the tabs info. This includes the gutters
@@ -34,7 +34,7 @@ export const Tabs = () => {
         const list = [];
         tabs.forEach((tab, index) => {
             list.push(<Gutter key={tab.uid + "-gutter"} id={tabGroupId + "-" + index} index={index} parentId={tabGroupId} />);
-            list.push(<Tab key={tab.uid} id={tabGroupId + "-" + tab.uid} parentId={tabGroupId} node={tab} />);
+            list.push(<Tab key={tab.uid} isDirty={tab.isDirty} id={tabGroupId + "-" + tab.uid} parentId={tabGroupId} node={tab} />);
         });
         list.push(<Gutter key="last-gutter" id={tabGroupId + "-" + tabs.length} index={tabs.length} parentId={tabGroupId} />);
         setTabsList(list);

package/src/stories/Editor.stories.js

@@ -46,23 +46,33 @@ 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();
 
     useLayoutEffect(() => {
         editorRef.current.setTabGroupId("tab-group-1");
-        flattenTree(WorkspaceSampleTree.tree).forEach((node, index) => {
+        flattenTree(WorkspaceSampleTree.tree).slice(1,5).forEach((node, index) => {
             if (node.type === "file") {
                 editorRef.current.addTab(node);
             }
         });
 
-        const result = flattenTree(WorkspaceSampleTree.tree).find(
-            (obj) => obj.name === "TransactionDB.py"
-        );
-        editorRef.current.addTab(result);translator_mapping
-        editorRef.current.setMapping("TransactionDB.py", transactiondb_mapping);
-        editorRef.current.setMapping("FrenchTranslator.py", translator_mapping);
+        // const result = flattenTree(WorkspaceSampleTree.tree).find(
+        //     (obj) => obj.name === "TransactionDB.py"
+        // );
+        // editorRef.current.addTab(result);translator_mapping
+        // editorRef.current.setMapping("TransactionDB.py", transactiondb_mapping);
+        // editorRef.current.setMapping("FrenchTranslator.py", translator_mapping);
+        // editorRef.current.setMappedIds(mappedIds);
+
+        // setTimeout(() => {
+        //     console.log(editorRef.current.getTabs());
+        //     console.log(editorRef.current.getActiveTab());
+        // }, 5000);
     }, []);
 
     const [dragging, setDragging] = useState(false);
@@ -139,6 +149,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 +167,7 @@ const Template = (args) => {
                     <ToolBarEditor onSelectTool={onSelectTool} />
                 </div>
                 <div className="flow">
-                    <Editor ref={editorRef}{...args} />
+                    <Editor ref={editorRef} onSelectAbstraction={onSelectAbstraction} {...args} />
                     {dragging && (
                         <div
                             style={{