Patch for cageUI bugs

CageUI/src/client/components/home/roomView/RoomLayout.tsx

@@ -21,7 +21,7 @@ import { FC, useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
 import { ActionURL } from '@labkey/api';
 import { ReactSVG } from 'react-svg';
-import { Cage, Room } from '../../../types/typings';
+import { Cage, Room, RoomObject, RoomObjectTypes } from '../../../types/typings';
 import { addPrevRoomSvgs, isRoomModifier } from '../../../utils/helpers';
 import { findCageInGroup, updateBorderSize } from '../../../utils/LayoutEditorHelpers';
 import { ConfirmationPopup } from '../../ConfirmationPopup';
@@ -34,6 +34,7 @@ import { RoomLegend } from './RoomLegend';
 import { CagePopup } from './CagePopup';
 import { useHomeNavigationContext } from '../../../context/HomeNavigationContextManager';
 import { RoomObjectPopup } from './RoomObjectPopup';
+import { availRoomObjPopups } from '../../../utils/homeHelpers';
 
 interface RoomLayoutProps {
 }
@@ -59,10 +60,18 @@ export const RoomLayout: FC<RoomLayoutProps> = (props) => {
         if (showCageContextMenu || showObjContextMenu) {
             return;
         }
+
+        let cancelled = false;
+        const isCancelled = () => cancelled;
+
         d3.select('#layout-svg').selectAll('*:not(#layout-border, #layout-border *)').remove();
         const layoutSvg = d3.select('#layout-svg') as d3.Selection<SVGElement, {}, HTMLElement, any>;
         contextRef.current = selectedLocalRoom;
-        addPrevRoomSvgs(userProfile,'view', selectedLocalRoom, layoutSvg,undefined, selectedLocalRoom.mods, setSelectedContextObj, contextRef);
+        addPrevRoomSvgs(userProfile,'view', selectedLocalRoom, layoutSvg,undefined, selectedLocalRoom.mods, setSelectedContextObj, contextRef, undefined, undefined, isCancelled);
+
+        return () => {
+            cancelled = true;
+        };
     }, [selectedLocalRoom.name, showCageContextMenu, showObjContextMenu]);
 
 
@@ -189,7 +198,7 @@ export const RoomLayout: FC<RoomLayoutProps> = (props) => {
                     closeMenu={() => setShowCageContextMenu(false)}
                 />
             }
-            {(showObjContextMenu && isRoomModifier(userProfile)) &&
+            {(showObjContextMenu && isRoomModifier(userProfile) && availRoomObjPopups(selectedContextObj as RoomObject)) &&
                 <RoomObjectPopup
                     selectedObj={selectedContextObj}
                     closeMenu={() => setShowObjContextMenu(false)}

CageUI/src/client/components/home/roomView/RoomObjectPopup.tsx

@@ -87,11 +87,11 @@ export const RoomObjectPopup: FC<CagePopupProps> = (props) => {
                     <h1 className="room-display-popup-title">{formatRoomObj(roomObj.itemId)}</h1>
                     <button className="room-display-popup-close" onClick={handleCleanup}>&times;</button>
                 </div>
-                {(roomObj.type === RoomObjectTypes.GateOpen || RoomObjectTypes.GateClosed) &&
-                        <GateEditor
-                                roomObj={roomObj}
-                                setRoomObj={setRoomObj}
-                        />
+                {(roomObj.type === RoomObjectTypes.GateOpen || roomObj.type === RoomObjectTypes.GateClosed) &&
+                    <GateEditor
+                            roomObj={roomObj}
+                            setRoomObj={setRoomObj}
+                    />
                 }
                 <div className="room-display-popup-content" style={{alignItems: 'flex-end'}}>
                     <div className="room-display-popup-error">

CageUI/src/client/utils/helpers.ts

@@ -532,10 +532,23 @@ const loadSvgs = async (): Promise<LoadedSvgs> => {
 
 // Adds the svgs from the saved layouts to the DOM. Mode edit is version displayed in the layout editor and view is the one in the home views.
 // roomForMods is passed if the unitsToRender is not room but needs access to the room object. This is for loading mods.
-export const addPrevRoomSvgs = async (user: GetUserPermissionsResponse, mode: 'edit' | 'view', unitsToRender: Room | RackGroup | Rack | Cage, layoutSvg: d3.Selection<SVGElement, {}, HTMLElement, any>, currRoom?: Room, modsToLoad?: RoomMods, setSelectedObj?, contextMenuRef?: MutableRefObject<Room>, setCtxMenuStyle?, closeMenuThenDrag?) => {
+export const addPrevRoomSvgs = async (
+    user: GetUserPermissionsResponse,
+    mode: 'edit' | 'view',
+    unitsToRender: Room | RackGroup | Rack | Cage,
+    layoutSvg: d3.Selection<SVGElement, {}, HTMLElement, any>,
+    currRoom?: Room, modsToLoad?: RoomMods, setSelectedObj?,
+    contextMenuRef?: MutableRefObject<Room>,
+    setCtxMenuStyle?,
+    closeMenuThenDrag?,
+    isCancelled?: () => boolean) => {
     let renderType: 'room' | 'group' | 'rack' | 'cage';
     const loadedSvgs: LoadedSvgs = await loadSvgs();
 
+    if (isCancelled && isCancelled()) {
+        return;
+    }
+
     if ((unitsToRender as Room)?.rackGroups) {
         renderType = 'room';
     } else if ((unitsToRender as RackGroup)?.racks) { // we are rendering a single rack group

CageUI/src/client/utils/homeHelpers.ts

@@ -18,13 +18,17 @@
 
 import {
     Cage,
-    CageDirection, CageModification, CageModificationsType,
+    CageDirection,
+    CageModification,
+    CageModificationsType,
     CageNumber,
     CurrCageMods,
     ModDirections,
     ModLocations,
-    ModTypes, Room,
-    RoomMods
+    ModTypes,
+    Room,
+    RoomMods, RoomObject,
+    RoomObjectTypes
 } from '../types/typings';
 import {
     getAdjLocation,
@@ -35,9 +39,16 @@ import {
     parseRoomItemType
 } from './helpers';
 import { GetUserPermissionsResponse } from '@labkey/api/dist/labkey/security/Permission';
-import { ConnectedModType } from '../types/homeTypes';
 
 
+// Returns true if the obj is in the list of available room objects that have a popup.
+export const availRoomObjPopups = (obj: RoomObject): boolean => {
+    if(obj.type === RoomObjectTypes.GateOpen || obj.type === RoomObjectTypes.GateClosed){
+        return true;
+    }
+    return false;
+}
+
 // Determines if the user has access to editing the layout
 export const canEditLayout = (user: GetUserPermissionsResponse) => {
     if(isRoomCreator(user) || isTemplateCreator(user) || isRoomModifier(user)) {