architwin 1.18.6 → 1.18.8

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

@@ -290,6 +290,7 @@ 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"
             }
         },
         ja: {
@@ -574,7 +575,8 @@ i18n
                 "IotCategoryRequired": "IoTカテゴリは必須です",
                 "SuccessUpdatedFloorLevel": "区画のフロアオフセット値が更新されました",
                 "DuplicatePartitionName": "このパーティション名は既にこの部屋で使用されています。別の名前を選択してください。",
-                "PleaseOnPolygonVisibility": "操作を行う前に、部屋の表示をオンにしてください。"
+                "PleaseOnPolygonVisibility": "操作を行う前に、部屋の表示をオンにしてください。",
+                "IoTType": "IoTタイプ"
             }
         }
     },

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

@@ -1,4 +1,4 @@
-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 function renderTagFormPane(): HTMLDivElement;
@@ -13,6 +13,8 @@ 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;

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, 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;
@@ -168,7 +180,8 @@ export function getTagFormData() {
     }
     if (tagNameInput) {
         const tagName = tagNameInput.value;
-        const tagDescription = tagDescriptionInput.value.split('\n')[0];
+        const tagDescription = tagDescriptionInput.value;
+        //const tagDescription = tagDescriptionInput.value.split('\n')[0]
         const tagEmbed = tagEmbedInput.value;
         const formData = {
             tagName: tagName,
@@ -260,109 +273,228 @@ 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;
+            }
+            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");

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>
@@ -853,7 +853,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 +863,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 +874,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) {

package/lib/atwinui/events.js

@@ -14,7 +14,7 @@ import { getTargetPosition, addMediaScreen, _3DXObjects, selectedObject, setTran
 import { Notyf } from 'notyf';
 import 'notyf/notyf.min.css';
 import { SPACE_EVENTS, COORDINATE_SYSTEM, UNITS, DEGREE, MAP_OPTIONS, sortTagOptions, sortObjectOptions, CUSTOM_MAP_MODE, TAG_TYPE } from "../types";
-import { initFormData, setTagFormMode } from "./components/toolbar/tagFormPane";
+import { initFormData, hideTagsFromSpace, renderTagsInSpace, setTagFormMode } from "./components/toolbar/tagFormPane";
 import { renderObjectList, resetSelectedObjectSortOption, selectedObjectSortOption, sortShowcaseObjects, updateSelectedObjectSortOption } from "./components/toolbar/objectListPane";
 import { renderLibraryList } from "./components/toolbar/libraryPane";
 import { renderObjectCard } from "./components/toolbar/card";
@@ -3281,37 +3281,35 @@ function handleClearSearchTagName() {
     log.info('handleClearSearchTagName()');
     const searchTagName = document.getElementById('at-clear-search-tag-name');
     if (searchTagName) {
-        searchTagName.addEventListener('click', () => {
+        searchTagName.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
             searchClearfield();
             // commented out due to iot Dummy Data
             // const tags = getMpTags()
             const tags = [..._tags];
-            const filteredTags = filterTagList(tags);
             if (selectedCategoryFilterId || selectedSubCategoryFilterId && isTagPaneActive) {
-                const filteredTags = filterTagList(tags);
+                const filteredTags = filterTagList(tags).filter(tag => tag.tag_type === TAG_TYPE.MP);
+                // show filtered tags only
+                yield renderTagsInSpace(filteredTags, true);
                 renderTags(filteredTags);
             }
             else if (tags.length > 0 && isTagPaneActive) {
-                renderTags(tags, true);
+                const filteredMPTags = tags.filter(tag => tag.tag_type === TAG_TYPE.MP);
+                yield renderTagsInSpace(filteredMPTags, true);
+                renderTags(filteredMPTags, true);
             }
             else if (!isTagPaneActive) {
                 const filteredIotTags = filterIotTagList(tags);
+                yield renderTagsInSpace(filteredIotTags, true);
                 renderTags(filteredIotTags);
-                // if (selectedCategoryFilterId || selectedSubCategoryFilterId) {
-                //     const sortedTags = sortTags(filteredTags, {by: 'label', order: 'asc'})
-                //     renderTags(sortedTags)                
-                // } else if (tags.length > 0) {
-                //     const sortedTags = sortTags(tags, {by: 'label', order: 'asc'})
-                //     renderTags(sortedTags,true)
             }
-        });
+        }));
     }
 }
 function handleSearchFromTagListButton() {
     log.info('handleSearchFromTagListButton()');
     const searchTagNameButton = document.getElementById('at-search-tag-button');
     if (searchTagNameButton) {
-        searchTagNameButton.addEventListener('click', () => {
+        searchTagNameButton.addEventListener('click', () => __awaiter(this, void 0, void 0, function* () {
             const tags = getMpTags();
             const tagSearch = getSearchTagTerm();
             if (tagSearch) {
@@ -3321,18 +3319,36 @@ function handleSearchFromTagListButton() {
                 if (foundTag) {
                     if (selectedCategoryFilterId || selectedSubCategoryFilterId && isTagPaneActive) {
                         const filteredTags = filterTagList(foundTag);
+                        const removeTags = tags.filter(tag => !filteredTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+                        log.info("removeTags", removeTags);
+                        // remove tags that is not part in the sorted Tags
+                        yield hideTagsFromSpace(removeTags);
+                        // show filtered tags only
+                        yield renderTagsInSpace(filteredTags, true);
                         renderTags(filteredTags);
                     }
                     else if (foundTag.length > 0 && isTagPaneActive) {
+                        const removeTags = tags.filter(tag => !foundTag.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.MP);
+                        log.info("removeTags", removeTags);
+                        // remove tags that is not part in the sorted Tags
+                        yield hideTagsFromSpace(removeTags);
+                        // show filtered tags only
+                        yield renderTagsInSpace(foundTag, true);
                         renderTags(foundTag, true);
                     }
                     else if (!isTagPaneActive) {
                         const filteredIotTags = filterIotTagList(foundTag);
+                        const removeTags = tags.filter(tag => !filteredIotTags.some(ft => ft.id === tag.id) && tag.tag_type === TAG_TYPE.IOT);
+                        log.info("removeTags", removeTags);
+                        // remove tags that is not part in the sorted Tags
+                        yield hideTagsFromSpace(removeTags);
+                        // show filtered tags only
+                        yield renderTagsInSpace(filteredIotTags, true);
                         renderTags(filteredIotTags);
                     }
                 }
             }
-        });
+        }));
     }
 }
 function handleCustomMapFloorImageUploaded(payload) {

package/lib/graphql.d.ts

@@ -0,0 +1,8 @@
+import { IMattertagsResponse } from "./types";
+/**
+ * Sends a GraphQL query to the Matterport API to retrieve all mattertags and their associated data for a given model ID and application key.
+ * @param modelId - Id of the model space
+ * @param appKey - Matterport app key
+ * @returns
+ */
+export declare function getTagAndTagData(modelId: string, appKey: string): Promise<IMattertagsResponse>;

package/lib/graphql.js

@@ -0,0 +1,60 @@
+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());
+    });
+};
+/**
+ * Sends a GraphQL query to the Matterport API to retrieve all mattertags and their associated data for a given model ID and application key.
+ * @param modelId - Id of the model space
+ * @param appKey - Matterport app key
+ * @returns
+ */
+export function getTagAndTagData(modelId, appKey) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var query = `{
+        model(id: "${modelId}") {
+            mattertags(includeDisabled: true) {
+            id
+            floor { id }
+            created
+            modified
+            enabled
+            color
+            icon
+            keywords
+            label
+            description
+            media
+            mediaType
+            position { x, y, z }
+            anchorPosition { x, y, z }
+            discPosition { x, y, z }
+            stemNormal { x, y, z }
+            stemLength
+            stemEnabled
+            stemDirection { x, y, z } # Deprecated, use stemNormal and stemLength
+            
+            }
+        }
+    }`;
+        var headers = {
+            'Content-Type': 'application/graphql',
+            'x-matterport-application-key': appKey,
+        };
+        var options = {
+            method: 'POST',
+            mode: 'cors',
+            headers: headers,
+            body: query,
+            redirect: 'follow',
+        };
+        var url = 'https://my.matterport.com/api/mp/models/graph';
+        //@ts-ignore
+        const response = yield fetch(url, options);
+        return yield response.json();
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.18.6",
+  "version": "1.18.8",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",