architwin 1.18.10 → 1.19.1

package/lib/atwinui/components/toolbar/generalSettingsMenuPane.js

@@ -40,6 +40,20 @@ export function renderGeneralSettingsMenu() {
             <span class="at_text_xxs at_mx-w-16 mdi mdi-information-slab-circle" id="at-general-settings-note">
                 ${i18n.t("Due to restrictions, original minimap is unavailable in password protected spaces. Please select and setup a custom minimap instead.")}
             </span>
+
+            <div class="at_field at_flex_column">
+                <span class="at_text_base">${i18n.t("ImportMTagHeader")}</span>
+                <div id="at-import-mattertags" data-cy="at-import-mattertags">
+                    <div class="at_button at_import_matterport_btn at_ghost" id="at-import-mattertag-btn" data-cy="at-import-mattertag-btn">
+                        ${i18n.t('ImportMTButton')}
+                        <span class="mdi mdi-tray-arrow-down" id="at-import-mattertag-btn"></span>
+                    </div>
+                </div>
+            </div>
+            <span class="at_text_xxs at_mx-w-16 mdi mdi-information-slab-circle" id="at-import-mattertag-note">
+                ${i18n.t("ImportMTagInfo")}
+            </span>
+
             <div class="at_scrollable_container at_h-min-45"></div>
         </div>
     </div>

package/lib/atwinui/components/toolbar/i18n.js

@@ -290,6 +290,14 @@ i18n
                 "SuccessUpdatedFloorLevel": "Updated the partition's floor level",
                 "DuplicatePartitionName": "This partition name is already used in this room. Please choose a different name.",
                 "PleaseOnPolygonVisibility": "Action cannot be done, please turn on room visibility.",
+                "IoTType": "IoT Type",
+                "ImportMTagHeader": "Import Mattertags",
+                "ImportMTButton": "Import",
+                "ImportMTagInfo": "Importing the same tags more than once from your Matterport Space will cause duplicates",
+                "ImportResultPartial": "Failed to import {{errorCount}} tag(s).",
+                "ImportResultNone": "Failed to import any tags.",
+                "ImportResultSuccess": "Successfully imported {{count}} tag(s).",
+                "NothingToImport": "Nothing to import.",
             }
         },
         ja: {
@@ -574,7 +582,15 @@ i18n
                 "IotCategoryRequired": "IoTカテゴリは必須です",
                 "SuccessUpdatedFloorLevel": "区画のフロアオフセット値が更新されました",
                 "DuplicatePartitionName": "このパーティション名は既にこの部屋で使用されています。別の名前を選択してください。",
-                "PleaseOnPolygonVisibility": "操作を行う前に、部屋の表示をオンにしてください。"
+                "PleaseOnPolygonVisibility": "操作を行う前に、部屋の表示をオンにしてください。",
+                "IoTType": "IoTタイプ",
+                "ImportMTagHeader": "Mattertagsインポート",
+                "ImportMTButton": "インポート",
+                "ImportMTagInfo": "Matterportから複数回インポートすると、タグの重複が発生します。",
+                "ImportResultPartial": "{{errorCount}}個のタグのインポートに失敗しました",
+                "ImportResultNone": "タグのインポートに失敗しました",
+                "ImportResultSuccess": "{{count}}個のタグのインポートに成功しました",
+                "NothingToImport": "インポートするタグがありませんでした"
             }
         }
     },

package/lib/atwinui/components/toolbar/index.d.ts

@@ -1,7 +1,7 @@
 import { IToolbarData } from "../../../types";
 import { setActiveMenu, clearActiveMenu, getObjectListStatus } from "./menuBar";
 import { renderObjectCards, removeObjectCard } from "./objectListPane";
-import { getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown } from "./tagFormPane";
+import { getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown, originalTagBackup } from "./tagFormPane";
 import { renderTags, renderTagRow, addClickEventToTagRow, setTagLink, getTagLink, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./tagListPane";
 import { renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal } from "./previewModal";
 import { setActiveActionBtn, clearActiveActionBtn, toggleActionBarButtons } from "./actionBar";
@@ -22,4 +22,4 @@ declare let actionBar: HTMLElement;
  */
 declare function setPreferredLanguage(): void;
 declare function renderToolbarUI(payload: IToolbarData): void;
-export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };
+export { actionBar, tagFormMode, selectedTag, originalTagBackup, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };

package/lib/atwinui/components/toolbar/index.js

@@ -5,7 +5,7 @@ import { renderObjectListPane, renderObjectCards, removeObjectCard } from "./obj
 import { renderSpaceUserListPane } from "./spaceUserListPane";
 import { renderViewingRemoteSpace } from "./viewingRemoteSpace";
 import { renderAddObjectPane } from "./addObjectPane";
-import { renderTagFormPane, getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown } from "./tagFormPane";
+import { renderTagFormPane, getTagFormData, setTagCategoriesOption, tagFormMode, selectedTag, renderCategoryDropdownOptions, toggleDropdown, originalTagBackup } from "./tagFormPane";
 import { renderTagListPane, renderTags, renderTagRow, addClickEventToTagRow, setTagLink, getTagLink, selectedCategoryFilterId, selectedSubCategoryFilterId, filterTagList } from "./tagListPane";
 import { renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal } from "./previewModal";
 import { renderAddMediascreenFormPane } from "./addMediascreenFormPane";
@@ -167,4 +167,4 @@ function renderToolbarUI(payload) {
         themeManager(config);
     }
 }
-export { actionBar, tagFormMode, selectedTag, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };
+export { actionBar, tagFormMode, selectedTag, originalTagBackup, selectedCategoryFilterId, selectedSubCategoryFilterId, renderToolbarUI, renderObjectCards, setActiveMenu, clearActiveMenu, setActiveActionBtn, renderLibraryCards, renderTags, getTagFormData, renderTagRow, addClickEventToTagRow, setTagCategoriesOption, setActiveThemeCard, setActiveCard, setActiveLibraryCard, clearActiveCard, clearActiveLibraryCard, removeObjectCard, renderRecepientOptions, renderTagMessages, createTagMessage, renderCategoryDropdownOptions, toggleDropdown, setTagLink, getTagLink, setTagMessagingDetails, clearTagFormDropdown, clearTagFilterDropdown, getObjectListStatus, toggleModal, setModalAction, toggleModelControl, toggleActionSettings, clearActiveActionBtn, toggleActionBarButtons, filterTagList, setPreferredLanguage, renderPreviewModal, togglePreviewModal, closePreviewModal, setPreviewModalAction, activePreviewModal };

package/lib/atwinui/components/toolbar/tagFormPane.d.ts

@@ -1,6 +1,7 @@
-import { FORM_MODE, ITagCategory } from "../../../types";
+import { FORM_MODE, ITagCategory, ITag } from "../../../types";
 export declare let tagFormMode: FORM_MODE;
 export declare let selectedTag: any;
+export declare let originalTagBackup: any;
 export declare function renderTagFormPane(): HTMLDivElement;
 export declare function initFormData(tagId?: string): void;
 export declare function getTagFormData(): {
@@ -13,8 +14,12 @@ export declare function getTagFormData(): {
 export declare function setTagCategoriesOption(): void;
 export declare function toggleDropdown(elementId: string): void;
 export declare function clearInnerHTML(elementId: string): void;
+export declare function hideTagsFromSpace(tags?: ITag[]): Promise<void>;
+export declare function renderTagsInSpace(tags: ITag[], _withIcon?: boolean, iframeId?: string): Promise<void>;
 export declare function renderCategoryDropdownOptions(elementId: string, items: Array<ITagCategory>, toggleId?: string): void;
 export declare function renderSubcategoryDropdownOptions(elementId: string, items: Array<ITagCategory>): void;
 export declare function clearTagFormDropdown(): void;
 export declare function clearTagFilterDropdown(): void;
 export declare function setTagFormMode(formMode: FORM_MODE): void;
+export declare function clearSelectedTag(): void;
+export declare function setSelectedTag(tag: any): void;

package/lib/atwinui/components/toolbar/tagFormPane.js

@@ -1,8 +1,20 @@
-import { _tagCategories, _tags, getMpTags } from "../../../architwin";
-import { convertToCssRgb, stringContains } from "../../../utils";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { _atwin, _atwinConnections, _tagCategories, _tags, editTagColor, attachSandbox, disposeTags, getIoTDeviceTagIcons, getMpTags, renderTag, setTagIcon } from "../../../architwin";
+import { convertToCssRgb, stringContains, useHexToRgb } from "../../../utils";
 import { TAG_TYPE } from "../../../types";
 import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories, selectedCategoryFilterId, sortTags, selectedTagSortOption } from './tagListPane';
 import i18n from './i18n';
+import log from "loglevel";
+import ShortUniqueId from "short-unique-id";
+import * as _tag from './../../../tag';
 let mode = 'adding';
 let tagNameInput, tagDescriptionInput, tagEmbedInput, tagCategoryDropdown, tagSubcategoryDropdown;
 let selectedCategoryId = undefined;
@@ -10,6 +22,7 @@ let selectedSubCategoryId = undefined;
 let isChevronEventAdded = false;
 export let tagFormMode = "NONE" /* FORM_MODE.NONE */;
 export let selectedTag = undefined;
+export let originalTagBackup = null;
 export function renderTagFormPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -92,15 +105,12 @@ export function initFormData(tagId) {
         const targetTag = _tags.find(tag => tag.json_data.id === tagId);
         console.log("targetTag", targetTag);
         selectedTag = targetTag;
+        // keep a deep copy of original tag data so we can revert on cancel
+        originalTagBackup = targetTag ? JSON.parse(JSON.stringify(targetTag.json_data)) : null;
         if (targetTag) {
             if (!tagNameInput) {
                 setInputElements();
             }
-            const tagCategory = _tagCategories.find((category) => {
-                const tagCategory = category.subcategories.find(subcategory => subcategory.uuid === targetTag.category_uuid);
-                return tagCategory;
-            });
-            console.log('tagCategoryId', tagCategory, tagCategory.uuid);
             tagNameInput.value = targetTag.json_data.label;
             tagDescriptionInput.value = targetTag.json_data.description;
             tagEmbedInput.value = targetTag.media_url && targetTag.media_url !== '' ? targetTag.media_url : '';
@@ -130,6 +140,8 @@ export function initFormData(tagId) {
         tagNameInput.value = '';
         tagDescriptionInput.value = '';
         tagEmbedInput.value = '';
+        // clear any previous edit backup when entering add mode
+        originalTagBackup = null;
     }
     const categoryChevron = document.getElementById('at-category-dropdown');
     const subcategoryChevron = document.getElementById('at-subcategory-dropdown');
@@ -261,109 +273,237 @@ export function clearInnerHTML(elementId) {
     targetElement.innerHTML = ``;
 }
 function selectOption(option, elementId, skipToggle = false) {
-    console.log("selectOption()");
-    //const dropdownToggle = document.querySelector('.at_dropdown_toggle');
-    if (!elementId || elementId === '' || elementId == null) {
-        console.error("ElementId is empty or undefined");
-        return;
-    }
-    const dropdownToggle = document.getElementById(elementId);
-    //dropdownToggle.textContent = option.textContent;
-    dropdownToggle.innerHTML = option.innerHTML;
-    //selectedText = option.textContent;
-    const isFilterDropdown = stringContains(elementId, 'filter');
-    const categoryUUID = option.getAttribute('category-uuid');
-    const categoryType = option.getAttribute('dropdown-type');
-    console.log("categoryUUID ", categoryUUID);
-    console.log("categoryType ", categoryType);
-    if (categoryUUID && categoryUUID !== null) {
-        if (categoryType == 'category' && isFilterDropdown == false) {
-            selectedCategoryId = categoryUUID;
-        }
-        else if (categoryType == 'category' && isFilterDropdown) {
-            setSelectedCategoryFilter(categoryUUID);
-            setSelectedSubcategoryFilter(undefined); //reset selected subcategory
-            const tags = getMpTags();
-            const filteredTags = filterTagList(tags);
-            const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
-            renderTags(sortedTags);
-        }
-        else if (categoryType == 'subcategory' && isFilterDropdown == false) {
-            selectedSubCategoryId = categoryUUID;
-        }
-        else if (categoryType == 'subcategory' && isFilterDropdown) {
-            setSelectedSubcategoryFilter(categoryUUID);
-            const tags = getMpTags();
-            const filteredTags = filterTagList(tags);
-            const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
-            renderTags(filteredTags);
-        }
-        //Populate subcategory dropdown
-        const targetCategory = _tagCategories.find(cat => cat.uuid === categoryUUID);
-        if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
-            console.log("Subcategories found", targetCategory.subcategories);
-            renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        console.log("selectOption()");
+        //const dropdownToggle = document.querySelector('.at_dropdown_toggle');
+        if (!elementId || elementId === '' || elementId == null) {
+            console.error("ElementId is empty or undefined");
+            return;
         }
-        else {
-            if (categoryType == 'category') {
-                const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
-                const subcatToggleId = isFilterDropdown ? 'at-subcategory-filter-dropdown-toggle' : 'at-subcategory-dropdown-toggle';
-                const subcategoryToggle = document.getElementById(elementId);
-                const subcatDropdownToggle = document.getElementById(subcatToggleId);
-                subcategoryToggle.innerHTML = `
+        const dropdownToggle = document.getElementById(elementId);
+        //dropdownToggle.textContent = option.textContent;
+        dropdownToggle.innerHTML = option.innerHTML;
+        //selectedText = option.textContent;
+        const isFilterDropdown = stringContains(elementId, 'filter');
+        const categoryUUID = option.getAttribute('category-uuid');
+        const categoryType = option.getAttribute('dropdown-type');
+        console.log("categoryUUID ", categoryUUID);
+        console.log("categoryType ", categoryType);
+        if (categoryUUID && categoryUUID !== null) {
+            if (categoryType == 'category' && isFilterDropdown == false) {
+                selectedCategoryId = categoryUUID;
+            }
+            else if (categoryType == 'category' && isFilterDropdown) {
+                setSelectedCategoryFilter(categoryUUID);
+                setSelectedSubcategoryFilter(undefined); //reset selected subcategory
+                const tags = getMpTags();
+                const filteredTags = filterTagList(tags);
+                const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
+                const removeTags = tags.filter(tag => !filteredTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+                // remove tags that is not part in the sorted Tags
+                yield hideTagsFromSpace(removeTags);
+                // show filtered tags only
+                yield renderTagsInSpace(sortedTags, true);
+                log.info("sortedTags", sortedTags);
+                renderTags(sortedTags);
+            }
+            else if (categoryType == 'subcategory' && isFilterDropdown == false) {
+                selectedSubCategoryId = categoryUUID;
+                // updates the tag icon color
+                const targetCategory = _tagCategories.find(cat => cat.uuid === selectedCategoryId);
+                if (targetCategory && selectedTag != undefined) {
+                    yield editTagColor({ tagId: selectedTag.json_data.id, color: targetCategory.json_data.color.rgb });
+                    _atwin.Tag.editPosition(selectedTag.json_data.id, {
+                        anchorPosition: selectedTag.json_data.anchorPosition,
+                        stemVector: Object.assign({}, selectedTag.json_data.stemVector),
+                    });
+                }
+            }
+            else if (categoryType == 'subcategory' && isFilterDropdown) {
+                setSelectedSubcategoryFilter(categoryUUID);
+                const tags = getMpTags();
+                const filteredTags = filterTagList(tags);
+                const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
+                const removeTags = tags.filter(tag => !filteredTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+                // remove tags that is not part in the sorted Tags
+                yield hideTagsFromSpace(removeTags);
+                // show filtered tags only
+                yield renderTagsInSpace(filteredTags, true);
+                renderTags(filteredTags);
+            }
+            //Populate subcategory dropdown
+            const targetCategory = _tagCategories.find(cat => cat.uuid === categoryUUID);
+            if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
+                console.log("Subcategories found", targetCategory.subcategories);
+                renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+            }
+            else {
+                if (categoryType == 'category') {
+                    const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
+                    const subcatToggleId = isFilterDropdown ? 'at-subcategory-filter-dropdown-toggle' : 'at-subcategory-dropdown-toggle';
+                    const subcategoryToggle = document.getElementById(elementId);
+                    const subcatDropdownToggle = document.getElementById(subcatToggleId);
+                    subcategoryToggle.innerHTML = `
                     <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
                     `;
-                subcatDropdownToggle.innerHTML = `
+                    subcatDropdownToggle.innerHTML = `
                 <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
                 `;
+                }
             }
         }
-    }
-    else {
-        console.log("categoryUUID is undefined");
-        if (categoryType == 'category' && isFilterDropdown) {
-            console.log("Clearing subcategory filter");
-            const subcategoryToggle = document.getElementById('at-subcategory-filter-dropdown-toggle');
-            subcategoryToggle.textContent = `${i18n.t('NoSelection')}`;
-            subcategoryToggle.innerHTML = `
+        else {
+            console.log("categoryUUID is undefined");
+            if (categoryType == 'category' && isFilterDropdown) {
+                console.log("Clearing subcategory filter");
+                const subcategoryToggle = document.getElementById('at-subcategory-filter-dropdown-toggle');
+                subcategoryToggle.textContent = `${i18n.t('NoSelection')}`;
+                subcategoryToggle.innerHTML = `
             <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
             `;
-            setSelectedCategoryFilter(undefined);
+                setSelectedCategoryFilter(undefined);
+            }
+            if (isFilterDropdown) {
+                setSelectedSubcategoryFilter(undefined); //reset selected subcategory
+            }
+            //Populate subcategory dropdown
+            const targetCategory = _tagCategories.find(cat => cat.uuid === selectedCategoryFilterId);
+            if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
+                console.log("Subcategories found", targetCategory.subcategories);
+                renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+            }
+            else {
+                const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
+                clearInnerHTML(elementId);
+            }
+            let tags = getMpTags().filter(tag => !tag.tag_type || tag.tag_type !== TAG_TYPE.IOT);
+            const filteredTags = (_a = filterTagList(tags)) !== null && _a !== void 0 ? _a : [];
+            const sortedTags = sortTags(filteredTags.length ? filteredTags : tags, selectedTagSortOption);
+            const removeTags = tags.filter(tag => !filteredTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+            if (filteredTags.length > 0) {
+                // remove tags that is not part in the sorted Tags
+                yield hideTagsFromSpace(removeTags);
+            }
+            // show filtered tags only
+            yield renderTagsInSpace(sortedTags, true);
+            renderTags(sortedTags);
+        }
+        let toggleId = '';
+        if (elementId === 'at-category-dropdown-toggle') {
+            toggleId = 'at-category-options';
+        }
+        else if (elementId === 'at-subcategory-dropdown-toggle') {
+            toggleId = 'at-subcategory-options';
+        }
+        else if (elementId === 'at-category-filter-dropdown-toggle') {
+            toggleId = 'at-category-filter-options';
         }
-        if (isFilterDropdown) {
-            setSelectedSubcategoryFilter(undefined); //reset selected subcategory
+        else if (elementId === 'at-subcategory-filter-dropdown-toggle') {
+            toggleId = 'at-subcategory-filter-options';
         }
-        //Populate subcategory dropdown
-        const targetCategory = _tagCategories.find(cat => cat.uuid === selectedCategoryFilterId);
-        if (targetCategory && targetCategory.subcategories && targetCategory.subcategories.length > 0) {
-            console.log("Subcategories found", targetCategory.subcategories);
-            renderSubcategoryDropdownOptions(isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options', targetCategory.subcategories);
+        if (skipToggle == false) {
+            toggleDropdown(toggleId);
+        }
+    });
+}
+export function hideTagsFromSpace(tags = null) {
+    return __awaiter(this, void 0, void 0, function* () {
+        log.info('hideTagsFromSpace', tags);
+        if (tags != null) {
+            tags.map((tag) => __awaiter(this, void 0, void 0, function* () {
+                yield _tag.disposeTag({ tagId: tag.json_data.id, sdk: _atwin, tags: _tags });
+            }));
         }
         else {
-            const elementId = isFilterDropdown ? 'at-subcategory-filter-options' : 'at-subcategory-options';
-            clearInnerHTML(elementId);
+            disposeTags();
         }
-        let tags = getMpTags().filter(tag => !tag.tag_type || tag.tag_type !== TAG_TYPE.IOT);
-        const filteredTags = filterTagList(tags);
-        const sortedTags = sortTags(filteredTags ? filteredTags : tags, selectedTagSortOption);
-        renderTags(sortedTags);
-    }
-    let toggleId = '';
-    if (elementId === 'at-category-dropdown-toggle') {
-        toggleId = 'at-category-options';
-    }
-    else if (elementId === 'at-subcategory-dropdown-toggle') {
-        toggleId = 'at-subcategory-options';
-    }
-    else if (elementId === 'at-category-filter-dropdown-toggle') {
-        toggleId = 'at-category-filter-options';
-    }
-    else if (elementId === 'at-subcategory-filter-dropdown-toggle') {
-        toggleId = 'at-subcategory-filter-options';
-    }
-    if (skipToggle == false) {
-        toggleDropdown(toggleId);
-    }
+    });
+}
+// render tags to space
+export function renderTagsInSpace(tags, _withIcon = false, iframeId = undefined) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function* () {
+        log.info('renderTagsInSpace', tags);
+        let renderedTagIds = [];
+        const sdk = iframeId ? _atwinConnections[iframeId] : _atwin;
+        for (let tag of tags) {
+            log.info('tag', tag);
+            const isDuplicate = renderedTagIds.includes(tag.json_data.id);
+            const rsid = new ShortUniqueId({ length: 10 });
+            if (isDuplicate) {
+                //assign a different unique id if the existing tag id is a duplicate
+                tag.json_data.id = rsid.rnd();
+            }
+            renderedTagIds.push(tag.json_data.id);
+            try {
+                const renderedTag = yield renderTag({ tag: tag.json_data }, false, iframeId);
+            }
+            catch (error) {
+                log.info("Tag is already rendered in space");
+                continue;
+            }
+            // check if tag needs tag icon display
+            if (_withIcon && tag.tag_icon_base64 !== '') {
+                // set tag icon
+                log.info("__@ showTags: ", tags);
+                yield setTagIcon({ tag: tag.json_data, iconName: tag.tag_icon_name, iconUrl: tag.tag_icon_base64, color: tag.json_data.color, iframeId });
+            }
+            if (tag.media_url && tag.media_url !== '') {
+                try {
+                    const attachments = [tag.media_url];
+                    yield _tag.attachTagMedia({ sdk, tag: tag.json_data, attachments });
+                }
+                catch (error) {
+                    log.warn(error);
+                }
+            }
+            if (tag.sandboxId) {
+                try {
+                    yield attachSandbox({ sandboxId: tag.sandboxId, tagIds: [tag.json_data.id] });
+                }
+                catch (error) {
+                    log.error("Attach sandbox error ", error);
+                }
+            }
+            if (tag.tag_type === TAG_TYPE.IOT) {
+                const icons = getIoTDeviceTagIcons();
+                let iconUrl = icons.normal;
+                let iconName = "normal.png";
+                let color = { r: 0.3, g: 0.5, b: 1.0 }; // default soft royal blue
+                for (const device of tag.iot_tag.linked_devices) {
+                    if (!device)
+                        continue;
+                    const { quality, status } = device;
+                    // If any device is offline, override color to gray and stop checking further
+                    if (status === "offline") {
+                        iconUrl = icons.normal;
+                        iconName = "normal.png";
+                        color = useHexToRgb("667c89"); // gray
+                        break;
+                    }
+                    // If any device is alert (highest priority), set red and stop
+                    if (quality === 2) {
+                        iconUrl = icons.alert;
+                        iconName = "alert.png";
+                        color = { r: 1, g: 0, b: 0 }; // red
+                        break;
+                    }
+                    // If any device is attention, set orange but keep checking in case of alert
+                    if (quality === 3) {
+                        iconUrl = icons.alert;
+                        iconName = "normal.png";
+                        color = useHexToRgb("ffae42"); // orange
+                        // continue loop to see if alert is present
+                    }
+                }
+                tag.tag_icon_url = iconUrl;
+                tag.tag_icon_name = iconName;
+                tag.json_data.color = color;
+                yield setTagIcon({ tag: tag.json_data, iconName: (_a = tag.tag_icon_base64) !== null && _a !== void 0 ? _a : '', iconUrl: tag.tag_icon_url, color: tag.json_data.color });
+            }
+        }
+    });
 }
 function createOptionElement(item, dropdownType) {
     console.log("createOptionElement");
@@ -539,3 +679,9 @@ export function clearTagFilterDropdown() {
 export function setTagFormMode(formMode) {
     tagFormMode = formMode;
 }
+export function clearSelectedTag() {
+    selectedTag = undefined;
+}
+export function setSelectedTag(tag) {
+    selectedTag = tag;
+}

package/lib/atwinui/components/toolbar/tagIotFormPane.js

@@ -51,7 +51,7 @@ export function renderTagIOTFormPane() {
           </div>
         </div>
 
-        <label for="">${i18n.t('Category')}</label>
+        <label for="">${i18n.t('IoTType')}</label>
         <div id="at-iot-category-dropdown" data-cy="at-iot-category-dropdown">
           <div id="at-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
             <div class="at_dropdown_toggle" id="at-iot-selected-cat" data-cy="at-iot-selected-cat">${i18n.t(selectedIoTCatOption)}</div>

package/lib/atwinui/components/toolbar/tagListPane.d.ts

@@ -32,6 +32,6 @@ export declare function initializeTagVisibility(): void;
 export declare function updateShowAllButton(): void;
 export declare function clearTagVisibilityStorage(): void;
 export declare function setIotCategoryFilterOptions(): void;
-export declare function filterIotTagByCategory(tags: ITag[]): void;
+export declare function filterIotTagByCategory(tags: ITag[]): Promise<void>;
 export declare function setSelectedIoTCategoryFilter(payload: ITagIOTCategory): void;
 export declare function renderIotCategoryDropdownFilterOptions(elementId: string, items: Array<ITagIOTCategory>): void;

package/lib/atwinui/components/toolbar/tagListPane.js

@@ -11,7 +11,7 @@ import { SPACE_EVENTS, sortTagOptions, TAG_TYPE } from "../../../types";
 import { batchAddEventListenerByClassName, toggleDisplayPane, batchAddEventListenerByDataAttribute } from "../../events";
 import { convertToCssRgb, getBundleVersion, stringContains } from "../../../utils";
 import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig, moveTag, getAtwinSdk, toggleVisibilityTag, _tagIotCategoryTypes } from "../../../architwin";
-import { initFormData, toggleDropdown } from "./tagFormPane";
+import { hideTagsFromSpace, initFormData, renderTagsInSpace, toggleDropdown } from "./tagFormPane";
 import { toggleModal, setModalAction } from "./modal";
 import { initIoTFormData, setIoTFormMode } from './tagIotFormPane';
 import { Notyf } from 'notyf';
@@ -121,7 +121,7 @@ export function renderTagListPane() {
             </div>
 
             <div class="at_field at_flex_column" id="at-custom-iot-category-filter-dropdown-container">
-                <label for="">${i18n.t('Category')}</label>
+                <label for="">${i18n.t('IoTType')}</label>
                 <div id="at-custom-iot-category-filter-dropdown" data-cy="at-custom-iot-category-filterdropdown">
                 <div id="at-custom-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
                     <div class="at_dropdown_toggle" id="at-custom-iot-selected-filter-category" data-cy="at-custom-iot-selected-filter-category">${i18n.t('NoSelection')}</div>
@@ -190,12 +190,10 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     tags.forEach(tag => {
         console.log('@caroline render tag checking: ', tag);
         if (showOwnTagsOnly) {
-            if (isTagPartOfCategory(tag.category_uuid)) {
-                const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
-                tagContainer.appendChild(row);
-                addTagButton.classList.remove('at_disabled');
-                visibilityTagButton.classList.remove('at_disabled');
-            }
+            const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
+            tagContainer.appendChild(row);
+            addTagButton.classList.remove('at_disabled');
+            visibilityTagButton.classList.remove('at_disabled');
         }
         else {
             console.log('@caroline render tag checking 2: ', tag);
@@ -853,7 +851,7 @@ export function setIotCategoryFilterOptions() {
     log.info('setIotCategoryOptions()');
     if (_tagIotCategoryTypes) {
         renderIotCategoryDropdownFilterOptions('at-iot-category-filter-options', _tagIotCategoryTypes);
-        batchAddEventListenerByClassName('at_iot_cat_filter_option', (event) => {
+        batchAddEventListenerByClassName('at_iot_cat_filter_option', (event) => __awaiter(this, void 0, void 0, function* () {
             log.info("category filter clicked");
             //@ts-ignore
             const selectedCat = event.target;
@@ -863,6 +861,7 @@ export function setIotCategoryFilterOptions() {
                 // no selection selected
                 selectedIoTCategoryFilter = { uuid: '', name: 'NoSelection' };
                 setSelectedIoTCategoryFilter(selectedIoTCategoryFilter);
+                yield renderTagsInSpace(iotTags, true);
                 renderTags(iotTags);
             }
             const getCatName = _tagIotCategoryTypes.find(cat => cat.uuid === catUUID);
@@ -873,13 +872,18 @@ export function setIotCategoryFilterOptions() {
                 filterIotTagByCategory(iotTags);
             }
             toggleDropdown('at-iot-category-filter-options');
-        });
+        }));
     }
 }
 export function filterIotTagByCategory(tags) {
-    log.info("selectedIoTCategoryFilter", selectedIoTCategoryFilter, _tags);
-    const filteredTags = tags.filter(tag => tag.iot_tag.iot_category == selectedIoTCategoryFilter.name);
-    renderTags(filteredTags);
+    return __awaiter(this, void 0, void 0, function* () {
+        log.info("selectedIoTCategoryFilter", selectedIoTCategoryFilter, _tags);
+        const filteredTags = tags.filter(tag => tag.iot_tag.iot_category == selectedIoTCategoryFilter.name);
+        const removeTags = tags.filter(tag => !filteredTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.IOT);
+        yield hideTagsFromSpace(removeTags);
+        yield renderTagsInSpace(filteredTags, true);
+        renderTags(filteredTags);
+    });
 }
 // displays selected Category in the dropdown
 export function setSelectedIoTCategoryFilter(payload) {