delete block and close tab working

frontend/app/block/block.tsx

@@ -16,7 +16,7 @@ const Block = ({ tabId, blockId }: { tabId: string; blockId: string }) => {
     const [dims, setDims] = React.useState({ width: 0, height: 0 });
 
     function handleClose() {
-        // TODO
+        WOS.DeleteBlock(blockId);
     }
 
     React.useEffect(() => {

frontend/app/store/wos.ts

@@ -178,6 +178,7 @@ function updateWaveObject(update: WaveObjUpdate) {
         waveObjectValueCache.set(oref, wov);
     }
     if (update.updatetype == "delete") {
+        console.log("WaveObj deleted", oref);
         globalStore.set(wov.dataAtom, { value: null, loading: false });
     } else {
         if (!isValidWaveObj(update.obj)) {
@@ -188,6 +189,7 @@ function updateWaveObject(update: WaveObjUpdate) {
         if (curValue.value != null && curValue.value.version >= update.obj.version) {
             return;
         }
+        console.log("WaveObj updated", oref);
         globalStore.set(wov.dataAtom, { value: update.obj, loading: false });
     }
     wov.holdTime = Date.now() + defaultHoldTime;
@@ -226,12 +228,14 @@ Events.On("waveobj:update", (event: any) => {
 
 function wrapObjectServiceCall<T>(fnName: string, ...args: any[]): Promise<T> {
     const uiContext = globalStore.get(atoms.uiContext);
+    const startTs = Date.now();
     let prtn = $Call.ByName(
         "github.com/wavetermdev/thenextwave/pkg/service/objectservice.ObjectService." + fnName,
         uiContext,
         ...args
     );
     prtn = prtn.then((val) => {
+        console.log("Call", fnName, Date.now() - startTs + "ms");
         if (val.updates) {
             updateWaveObjects(val.updates);
         }
@@ -249,18 +253,26 @@ function getStaticObjectValue<T>(oref: string, getFn: jotai.Getter): T {
     return atomVal.value;
 }
 
-function AddTabToWorkspace(tabName: string, activateTab: boolean): Promise<{ tabId: string }> {
+export function AddTabToWorkspace(tabName: string, activateTab: boolean): Promise<{ tabId: string }> {
     return wrapObjectServiceCall("AddTabToWorkspace", tabName, activateTab);
 }
 
-function SetActiveTab(tabId: string): Promise<void> {
+export function SetActiveTab(tabId: string): Promise<void> {
     return wrapObjectServiceCall("SetActiveTab", tabId);
 }
 
-function CreateBlock(blockDef: BlockDef, rtOpts: RuntimeOpts): Promise<{ blockId: string }> {
+export function CreateBlock(blockDef: BlockDef, rtOpts: RuntimeOpts): Promise<{ blockId: string }> {
     return wrapObjectServiceCall("CreateBlock", blockDef, rtOpts);
 }
 
+export function DeleteBlock(blockId: string): Promise<void> {
+    return wrapObjectServiceCall("DeleteBlock", blockId);
+}
+
+export function CloseTab(tabId: string): Promise<void> {
+    return wrapObjectServiceCall("CloseTab", tabId);
+}
+
 export {
     makeORef,
     useWaveObject,
@@ -272,7 +284,4 @@ export {
     updateWaveObjects,
     cleanWaveObjectCache,
     getStaticObjectValue,
-    AddTabToWorkspace,
-    SetActiveTab,
-    CreateBlock,
 };

frontend/app/tab/tab.tsx

@@ -8,7 +8,7 @@ import { atoms } from "@/store/global";
 import * as WOS from "@/store/wos";
 
 import "./tab.less";
-import { CenteredLoadingDiv } from "../element/quickelems";
+import { CenteredDiv, CenteredLoadingDiv } from "../element/quickelems";
 
 const TabContent = ({ tabId }: { tabId: string }) => {
     const [tabData, tabLoading] = WOS.useWaveObjectValue<Tab>(WOS.makeORef("tab", tabId));
@@ -16,7 +16,11 @@ const TabContent = ({ tabId }: { tabId: string }) => {
         return <CenteredLoadingDiv />;
     }
     if (!tabData) {
-        return <div className="tabcontent">Tab not found</div>;
+        return (
+            <div className="tabcontent">
+                <CenteredDiv>Tab Not Found</CenteredDiv>
+            </div>
+        );
     }
     return (
         <div className="tabcontent">

frontend/app/workspace/workspace.less

@@ -55,9 +55,24 @@
         height: 100%;
         border-right: 1px solid var(--border-color);
         cursor: pointer;
+        position: relative;
+
         &.active {
             background-color: var(--highlight-bg-color);
         }
+
+        &.active:hover .tab-close {
+            display: block;
+        }
+
+        .tab-close {
+            position: absolute;
+            display: none;
+            padding: 5px;
+            right: 2px;
+            top: 5px;
+            cursor: pointer;
+        }
     }
 
     .tab-add {

frontend/app/workspace/workspace.tsx

@@ -14,17 +14,22 @@ import "./workspace.less";
 function Tab({ tabId }: { tabId: string }) {
     const windowData = jotai.useAtomValue(atoms.waveWindow);
     const [tabData, tabLoading] = WOS.useWaveObjectValue<Tab>(WOS.makeORef("tab", tabId));
-    function setActiveTab(tabId: string) {
-        if (tabId == null) {
-            return;
-        }
+    function setActiveTab() {
         WOS.SetActiveTab(tabId);
     }
+    function handleCloseTab() {
+        WOS.CloseTab(tabId);
+    }
     return (
         <div
             className={clsx("tab", { active: tabData != null && windowData.activetabid === tabData.oid })}
-            onClick={() => setActiveTab(tabData?.oid)}
+            onClick={() => setActiveTab()}
         >
+            <div className="tab-close" onClick={() => handleCloseTab()}>
+                <div>
+                    <i className="fa fa-solid fa-xmark" />
+                </div>
+            </div>
             {tabData?.name ?? "..."}
         </div>
     );
@@ -115,8 +120,14 @@ function WorkspaceElem() {
         <div className="workspace">
             <TabBar workspace={ws} />
             <div className="workspace-tabcontent">
-                <TabContent key={windowData.workspaceid} tabId={activeTabId} />
-                <Widgets />
+                {activeTabId == "" ? (
+                    <CenteredDiv>No Active Tab</CenteredDiv>
+                ) : (
+                    <>
+                        <TabContent key={windowData.workspaceid} tabId={activeTabId} />
+                        <Widgets />
+                    </>
+                )}
             </div>
         </div>
     );