@salesforcedevs/docs-components 0.0.0 → 0.0.1-superscript

package/src/modules/doc/amfReference/amfReference.ts

@@ -2,8 +2,9 @@ import { LightningElement, api, track } from "lwc";
 import { noCase } from "no-case";
 import { sentenceCase } from "sentence-case";
 import qs from "query-string";
-import { AmfModelParser } from "./utils";
-import { normalizeBoolean } from "dxUtils/normalizers";
+import { AmfModelParser } from "doc/amfModelParser";
+import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import type { OptionWithLink, Breadcrumb } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -25,19 +26,31 @@ import {
     REFERENCE_TYPES,
     oldReferenceIdNewReferenceIdMap
 } from "./constants";
+import { restoreScroll } from "dx/scrollManager";
+import { DocPhaseInfo } from "typings/custom";
+import { oldVersionDocInfo } from "docUtils/utils";
+import { track as trackEvent } from "dxUtils/analytics";
+
+type NavigationItem = {
+    label: string;
+    name: string;
+    isExpanded: boolean;
+    children: ParsedMarkdownTopic[];
+    isChildrenLoading: boolean;
+};
 
 export default class AmfReference extends LightningElement {
-    @api breadcrumbs?: string | null | undefined = null;
+    @api breadcrumbs: string | null = null;
     @api sidebarHeader!: string;
-    @api coveoOrganizationId!: string;
-    @api coveoPublicAccessToken!: string;
-    @api coveoAdvancedQueryConfig!: string;
-    @api coveoSearchHub!: string;
-    @api useOldSidebar?: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @track navigation = [];
+    @api tocAriaLevel?: string;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api hideFooter = false;
+    @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
+    @track showVersionBanner = false;
 
     // Update this to update what component gets rendered in the content block
     @track
@@ -101,6 +114,16 @@ export default class AmfReference extends LightningElement {
                 this.versions = this.getVersions();
             }
             this.selectedVersion = selectedVersion;
+            if (this.isSpecBasedReference(this._currentReferenceId)) {
+                this.isVersionFetched = true;
+                if (this.oldVersionInfo) {
+                    this.showVersionBanner = true;
+                } else {
+                    this.latestVersion = true;
+                }
+            }
+        } else {
+            this.isVersionFetched = true;
         }
 
         // This is to check if the url is hash based and redirect if needed
@@ -113,8 +136,8 @@ export default class AmfReference extends LightningElement {
     }
 
     @api
-    get docPhaseInfo() {
-        return this.selectedReferenceDocPhase;
+    get docPhaseInfo(): string | null {
+        return this.selectedReferenceDocPhase || null;
     }
 
     set docPhaseInfo(value: string) {
@@ -133,19 +156,30 @@ export default class AmfReference extends LightningElement {
         this._expandChildren = normalizeBoolean(value);
     }
 
+    private get enableFooter(): boolean {
+        return !this.hideFooter;
+    }
+
+    private get emptyStateMessage(): string {
+        return JSON.stringify([
+            "Select a relevant API specification",
+            "Please consider misspellings",
+            "Try different search keywords"
+        ]);
+    }
+
     // model
     protected _amfConfigList: AmfConfig[] = [];
     protected _amfConfigMap: Map<string, AmfConfig> = new Map();
     protected _referenceSetConfig!: ReferenceSetConfig;
     protected _currentReferenceId = "";
-    protected _scrollInterval = 0;
 
-    protected parentReferenceUrls = [];
+    protected parentReferenceUrls = [] as string[];
     protected amfMap: Record<string, AmfModelRecord> = {};
-    protected amfFetchPromiseMap = {};
+    protected amfFetchPromiseMap = {} as any;
     protected metadata: { [key: string]: AmfMetadataTopic } = {};
     protected selectedTopic?: AmfMetaTopicType = undefined;
-    protected selectedSidebarValue = undefined;
+    protected selectedSidebarValue: string | undefined = undefined;
 
     protected selectedVersion: ReferenceVersion | null = null;
 
@@ -154,6 +188,8 @@ export default class AmfReference extends LightningElement {
     private isParentLevelDocPhaseEnabled = false;
     private selectedReferenceDocPhase?: string | null = null;
     private _expandChildren?: boolean = false;
+    private isVersionFetched = false;
+    private latestVersion = false;
 
     /**
      * Key for storing the currently selected reference url. This will be used to save the
@@ -182,9 +218,6 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
-        this._scrollInterval = window.setInterval(() => {
-            this.saveScroll();
-        }, 1000);
     }
 
     disconnectedCallback(): void {
@@ -196,20 +229,6 @@ export default class AmfReference extends LightningElement {
             "popstate",
             this._boundUpdateSelectedItemFromUrlQuery
         );
-        window.clearInterval(this._scrollInterval);
-    }
-
-    saveScroll() {
-        window.history.replaceState(
-            { scrollValue: document.body.scrollTop },
-            "",
-            window.location.href
-        );
-    }
-
-    restoreScroll() {
-        document.body.scrollTop = document.documentElement.scrollTop =
-            window.history.state?.scrollValue;
     }
 
     renderedCallback(): void {
@@ -299,6 +318,17 @@ export default class AmfReference extends LightningElement {
         return referenceId;
     }
 
+    private get oldVersionInfo(): DocPhaseInfo | null {
+        let info = null;
+        if (this.versions.length > 1 && this.selectedVersion) {
+            const currentGAVersionRef = this.versions[0];
+            if (this.selectedVersion.id !== currentGAVersionRef.id) {
+                info = oldVersionDocInfo(currentGAVersionRef.link.href);
+            }
+        }
+        return info;
+    }
+
     /**
      * @returns versions to be shown in the dropdown
      * For markdown based specs, Adds selected markdown topic url to same references
@@ -329,13 +359,13 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns the selected version or the first available version.
      */
-    private getSelectedVersion(): ReferenceVersion {
+    private getSelectedVersion(): ReferenceVersion | null {
         const versions = this._referenceSetConfig?.versions || [];
         const selectedVersion = versions.find(
             (v: ReferenceVersion) => v.selected
         );
         // return a selected version if there is one, else return the first one.
-        return selectedVersion || (versions.length && versions[0]);
+        return selectedVersion || (versions.length && versions[0]) || null;
     }
 
     private updateAmfConfigInView(): void {
@@ -349,9 +379,11 @@ export default class AmfReference extends LightningElement {
         }
     }
 
-    private async fetchAmf(amfConfig): Promise<AmfModel | AmfModel[]> {
+    private async fetchAmf(
+        amfConfig: AmfConfig
+    ): Promise<AmfModel | AmfModel[]> {
         const { amf } = amfConfig;
-        const response = await fetch(amf, {
+        const response = await fetch(amf!, {
             headers: {
                 "Cache-Control": `max-age=86400`
             }
@@ -370,7 +402,7 @@ export default class AmfReference extends LightningElement {
     /**
      * Returns whether given url is parent reference path like ../example-project/references/reference-id
      */
-    private isParentReferencePath(urlPath: string): boolean {
+    private isParentReferencePath(urlPath?: string | null): boolean {
         if (!urlPath) {
             return false;
         }
@@ -401,9 +433,9 @@ export default class AmfReference extends LightningElement {
      * Populates reference Items from amfConfigList and assigns it to navigation for sidebar
      */
     private populateReferenceItems(): void {
-        const navAmfOrder = [];
+        const navAmfOrder = [] as NavigationItem[];
         for (const [index, amfConfig] of this._amfConfigList.entries()) {
-            let navItemChildren = [];
+            let navItemChildren = [] as ParsedMarkdownTopic[];
             let isChildrenLoading = false;
             if (amfConfig.referenceType !== REFERENCE_TYPES.markdown) {
                 if (amfConfig.isSelected) {
@@ -423,10 +455,10 @@ export default class AmfReference extends LightningElement {
                 // check whether we should expand all the child nodes, this is required for Coveo to crawl.
                 if (isExpandChildrenEnabled) {
                     this.expandChildrenForMarkdownReferences(
-                        amfConfig.topic.children
+                        amfConfig.topic!.children
                     );
                 }
-                navItemChildren = amfConfig.topic.children;
+                navItemChildren = amfConfig.topic!.children;
             }
             // store nav items for each spec in order
             navAmfOrder[index] = {
@@ -447,7 +479,9 @@ export default class AmfReference extends LightningElement {
      * Returns a boolean indicating whether the children should be expanded or not.
      */
     private isExpandChildrenEnabled(referenceId: string): boolean {
-        return this.expandChildren && this._currentReferenceId === referenceId;
+        return (
+            !!this.expandChildren && this._currentReferenceId === referenceId
+        );
     }
 
     /**
@@ -491,12 +525,12 @@ export default class AmfReference extends LightningElement {
         referenceId: string,
         items: ParsedTopicModel[]
     ): NavItem[] {
-        const methodList = [];
+        const methodList = [] as NavItem[];
 
         items.forEach((item) => {
             item.methods?.forEach((method) => {
                 const title =
-                    this.getTitleForLabel(method.label) || method.method;
+                    this.getTitleForLabel(method.label!) || method.method;
                 const meta = this.addToMetadata(
                     parentReferencePath,
                     referenceId,
@@ -544,7 +578,7 @@ export default class AmfReference extends LightningElement {
         const parentReferencePath = amfConfig.href;
         const model = this.amfMap[referenceId].parser.parsedModel;
 
-        const children = [];
+        const children: any[] = [];
         const expandChildren = this.isExpandChildrenEnabled(referenceId);
 
         NAVIGATION_ITEMS.forEach(
@@ -571,8 +605,8 @@ export default class AmfReference extends LightningElement {
                     }
                     case "endpoint":
                         if (
-                            model[childrenPropertyName] &&
-                            model[childrenPropertyName].length
+                            model[childrenPropertyName!] &&
+                            model[childrenPropertyName!].length
                         ) {
                             const amfTopicId = this.getFormattedIdentifier(
                                 referenceId,
@@ -581,7 +615,7 @@ export default class AmfReference extends LightningElement {
                             const childTopics = this.assignEndpointNavItems(
                                 parentReferencePath,
                                 referenceId,
-                                model[childrenPropertyName]
+                                model[childrenPropertyName!]
                             );
                             children.push({
                                 label,
@@ -596,23 +630,25 @@ export default class AmfReference extends LightningElement {
                         break;
                     case "security":
                     case "type":
-                        if (model[childrenPropertyName]?.length) {
+                        if (model[childrenPropertyName!]?.length) {
                             // Sorting the types alphabetically
-                            model[childrenPropertyName].sort((typeA, typeB) => {
-                                const typeALbl = typeA.label.toLowerCase();
-                                const typeBLbl = typeB.label.toLowerCase();
-                                return typeALbl < typeBLbl
-                                    ? -1
-                                    : typeALbl > typeBLbl
-                                    ? 1
-                                    : 0;
-                            });
+                            model[childrenPropertyName!].sort(
+                                (typeA: any, typeB: any) => {
+                                    const typeALbl = typeA.label.toLowerCase();
+                                    const typeBLbl = typeB.label.toLowerCase();
+                                    return typeALbl < typeBLbl
+                                        ? -1
+                                        : typeALbl > typeBLbl
+                                        ? 1
+                                        : 0;
+                                }
+                            );
                         }
                     // eslint-disable-next-line no-fallthrough
                     default:
                         if (
-                            model[childrenPropertyName] &&
-                            model[childrenPropertyName].length
+                            model[childrenPropertyName!] &&
+                            model[childrenPropertyName!].length
                         ) {
                             const amfTopicId = this.getFormattedIdentifier(
                                 referenceId,
@@ -625,8 +661,8 @@ export default class AmfReference extends LightningElement {
                                     this.metadata[amfTopicId]?.meta
                                 ),
                                 isExpanded: expandChildren,
-                                children: model[childrenPropertyName].map(
-                                    (topic) => {
+                                children: model[childrenPropertyName!].map(
+                                    (topic: any) => {
                                         const meta = this.addToMetadata(
                                             parentReferencePath,
                                             referenceId,
@@ -663,12 +699,18 @@ export default class AmfReference extends LightningElement {
         type: string,
         topic: { id: string; domId: string },
         navTitle: string
-    ): string | undefined {
-        const { urlIdentifer, prefix } = URL_CONFIG[type];
+    ): string {
+        const config = URL_CONFIG[type as keyof typeof URL_CONFIG];
+        const urlIdentifer = config.urlIdentifer;
+        let prefix = null;
+        if ("prefix" in config) {
+            prefix = config.prefix;
+        }
 
         // encodeURI to avoid special characters in the URL meta.
         const identifier =
-            topic[urlIdentifer] && this.encodeIdentifier(topic[urlIdentifer]);
+            urlIdentifer in topic &&
+            this.encodeIdentifier(topic[urlIdentifer as keyof typeof topic]);
         let meta;
         // Assuming that there will be an identifier always
         if (identifier) {
@@ -684,7 +726,7 @@ export default class AmfReference extends LightningElement {
                 navTitle
             };
         }
-        return meta;
+        return meta!;
     }
 
     /**
@@ -695,7 +737,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) => {
                 return routeMeta.meta === metadata.meta;
             }
-        );
+        )!;
     }
 
     /**
@@ -709,7 +751,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && amfId === metadata.amfId
-        );
+        )!;
     }
 
     /**
@@ -724,7 +766,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId &&
                 identifier === metadata.identifier
-        );
+        )!;
     }
 
     /**
@@ -738,7 +780,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && type === metadata.type
-        );
+        )!;
     }
 
     /**
@@ -798,6 +840,7 @@ export default class AmfReference extends LightningElement {
         if (meta) {
             // update the encoded url meta param
             const encodedMeta = this.getUrlEncoded(meta);
+
             window.history.replaceState(
                 window.history.state,
                 "",
@@ -815,9 +858,8 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const currentMeta: RouteMeta | null = this.getReferenceMetaInfo(
-                window.location.href
-            );
+            const currentMeta: RouteMeta | undefined =
+                this.getReferenceMetaInfo(window.location.href);
             const metadata =
                 currentMeta && this.getMetadataByUrlQuery(currentMeta);
             if (metadata) {
@@ -841,7 +883,7 @@ export default class AmfReference extends LightningElement {
             this.loadMarkdownBasedReference();
         }
 
-        this.restoreScroll();
+        restoreScroll(); // don't try this at home kids
     }
 
     /**
@@ -849,13 +891,11 @@ export default class AmfReference extends LightningElement {
      * @param event
      */
     protected onApiNavigationChanged(): void {
-        this.saveScroll();
-
         const specBasedReference = this.isSpecBasedReference(
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const { meta } = this.selectedTopic;
+            const { meta } = this.selectedTopic!;
             const metadata = this.metadata[meta];
             if (metadata) {
                 const {
@@ -906,6 +946,16 @@ export default class AmfReference extends LightningElement {
         this.handleSelectedItem();
 
         this.updateDocPhase();
+
+        // Track page view when a new spec reference page is loaded
+        trackEvent(this.template.host, "doc_page_view", {
+            page_path: window.location.pathname + window.location.search,
+            reference_id: referenceId,
+            reference_type: "spec",
+            meta: meta,
+            topic_type: type,
+            article_name: this.getArticleName()
+        });
     }
 
     /**
@@ -970,7 +1020,7 @@ export default class AmfReference extends LightningElement {
      * 1. If the url is encoded already
      * 2. If the url is decoded
      */
-    getUrlEncoded(url: string) {
+    getUrlEncoded(url: string): string {
         // if url matches, then return the encoded url.
         if (decodeURIComponent(url) === url) {
             return encodeURIComponent(url);
@@ -986,7 +1036,7 @@ export default class AmfReference extends LightningElement {
      * For spec based references gets meta parm from url and then topicId & type from meta
      * For markdown based references gets topicId as last html path in the name, meta & type will be empty
      */
-    getReferenceMetaInfo(referenceUrl: string): RouteMeta | undefined {
+    getReferenceMetaInfo(referenceUrl: string | null): RouteMeta | undefined {
         let metaReferenceInfo;
         if (referenceUrl) {
             const referenceId = this.getReferenceIdFromUrl(referenceUrl);
@@ -1028,10 +1078,10 @@ export default class AmfReference extends LightningElement {
         let topicTitle = "";
         for (let i = 0; i < topics.length; i++) {
             const topic = topics[i];
-            const meta = this.getMarkdownReferenceMeta(topic.link.href);
+            const meta = this.getMarkdownReferenceMeta(topic.link!.href);
             const childTopics = topic.children;
             if (meta === topicMeta) {
-                referenceUrl = topic.link.href;
+                referenceUrl = topic.link!.href;
                 topicTitle = topic.label;
             } else if (childTopics && childTopics.length) {
                 const referenceDetails = this.getReferenceDetailsInGivenTopics(
@@ -1134,15 +1184,16 @@ export default class AmfReference extends LightningElement {
                         "",
                         selectedItemMetaData.meta
                     );
+
                     this.updateUrlWithSelected(
                         selectedItemMetaData.parentReferencePath,
                         selectedItemMetaData.meta
                     );
-                    this.updateNavTitleMetaTag(selectedItemMetaData.navTitle);
+                    this.updateTags(selectedItemMetaData.navTitle);
                 }
             });
         } else {
-            let invalidTopicReferenceUrl = "";
+            let invalidTopicReferenceUrl: string | null = "";
             if (topicId) {
                 const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                     referenceId,
@@ -1176,7 +1227,10 @@ export default class AmfReference extends LightningElement {
      * set selected sidebar value as a pathname
      */
 
-    private loadMarkdownBasedReference(referenceUrl?: string): void {
+    private loadMarkdownBasedReference(referenceUrl?: string | null): void {
+        // MILES TODO: figure out if we ever need to log a coveo page view in here
+        // this would be the case if at some point we 'load' a new 'markdown based reference'
+        // without actually triggering a page load
         let referenceId = "";
         const currentUrl = window.location.href;
         if (this.isProjectRootPath()) {
@@ -1190,7 +1244,7 @@ export default class AmfReference extends LightningElement {
              * CASE2: This case is to navigate to respective reference when the user clicked on root item
              * Ex: .../references/markdown-ref should navigate to first topic.
              */
-            referenceId = this.getReferenceIdFromUrl(referenceUrl);
+            referenceId = this.getReferenceIdFromUrl(referenceUrl!);
         } else if (this.isParentReferencePath(currentUrl)) {
             /**
              * CASE3: This case is to navigate to respective reference when the user entered url with reference id
@@ -1219,9 +1273,9 @@ export default class AmfReference extends LightningElement {
             const amfConfig = this.getAmfConfigWithId(referenceId);
             let redirectReferenceUrl = "";
             if (amfConfig) {
-                const childrenItems = amfConfig.topic.children;
+                const childrenItems = amfConfig.topic!.children;
                 if (childrenItems.length > 0) {
-                    redirectReferenceUrl = childrenItems[0].link.href;
+                    redirectReferenceUrl = childrenItems[0].link!.href;
                 }
             }
             if (redirectReferenceUrl) {
@@ -1250,12 +1304,28 @@ export default class AmfReference extends LightningElement {
                 referenceMeta
             );
             if (referenceDetails) {
-                this.updateNavTitleMetaTag(referenceDetails.topicTitle);
+                this.updateTags(referenceDetails.topicTitle);
             }
 
             this.versions = this.getVersions();
+            if (this.oldVersionInfo) {
+                this.showVersionBanner = true;
+            } else {
+                this.latestVersion = true;
+            }
+
+            this.isVersionFetched = true;
             this.updateDocPhase();
             this.selectedSidebarValue = window.location.pathname;
+
+            // Track page view when a new markdown reference page is loaded
+            trackEvent(this.template.host, "doc_page_view", {
+                page_path: window.location.pathname + window.location.search,
+                reference_id: selectedItemRefId,
+                reference_type: "markdown",
+                topic_meta: referenceMeta,
+                article_name: this.getArticleName()
+            });
         }
     }
 
@@ -1270,18 +1340,66 @@ export default class AmfReference extends LightningElement {
         );
     }
 
-    private updateNavTitleMetaTag(navTitle = ""): void {
+    handleDismissVersionBanner() {
+        this.showVersionBanner = false;
+    }
+
+    private updateTags(navTitle = ""): void {
+        if (!navTitle) {
+            return;
+        }
+
         // this is required to update the nav title meta tag.
         // eslint-disable-next-line @lwc/lwc/no-document-query
         const metaNavTitle = document.querySelector('meta[name="nav-title"]');
-        if (metaNavTitle && navTitle) {
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const titleTag = document.querySelector("title");
+        const TITLE_SEPARATOR = " | ";
+
+        if (metaNavTitle) {
             metaNavTitle.setAttribute("content", navTitle);
         }
+
+        /**
+         * Right now, the title tag only changes when you pick a Ref spec,
+         * not every time you choose a subsection of the Ref spec.
+         * This update aims to refresh the title tag with each selection.
+         * If a Ref spec is chosen, we add the value of the <selected topic> to the title.
+         * If a subsection is selected, we update the first part of the current
+         * title with the new <selected topic>.
+         * Example: Following is a sample project structure.
+         * - Project Name
+         *  - Ref Spec1
+         *      - Summary
+         *      - Endpoints
+         *          - E1
+         *          - E2
+         *  - Ref Spec2
+         *      - Summary
+         *      - Endpoints
+         *          - E1 (Selected)
+         *          - E2
+         * Previous Title: Ref Spec2 | Project Name | Salesforce Developer
+         * New Title: E1 | Ref Spec2 | Project Name | Salesforce Developer
+         *
+         */
+        if (titleTag) {
+            let titleTagValue = titleTag.textContent;
+            const titleTagSectionValues: string[] =
+                titleTagValue?.split(TITLE_SEPARATOR);
+            if (titleTagSectionValues) {
+                if (titleTagSectionValues.length <= 3) {
+                    titleTagValue = navTitle + TITLE_SEPARATOR + titleTagValue;
+                } else {
+                    titleTagSectionValues[0] = navTitle;
+                    titleTagValue = titleTagSectionValues.join(TITLE_SEPARATOR);
+                }
+            }
+            titleTag.textContent = titleTagValue;
+        }
     }
 
     onNavSelect(event: CustomEvent): void {
-        this.saveScroll();
-
         const name = event.detail.name;
         if (name) {
             const urlReferenceId = this.getReferenceIdFromUrl(name);
@@ -1315,8 +1433,9 @@ export default class AmfReference extends LightningElement {
                         elementId,
                         metaVal
                     );
+
                     this.updateUrlWithSelected(parentReferencePath, metaVal);
-                    this.updateNavTitleMetaTag(metadata.navTitle);
+                    this.updateTags(metadata.navTitle);
                 } else {
                     if (this.isParentReferencePath(name)) {
                         this.loadNewReferenceItem(name);
@@ -1346,14 +1465,39 @@ export default class AmfReference extends LightningElement {
         }
     }
 
+    private getArticleName(): string | undefined {
+        if (!this.breadcrumbs) {
+            return undefined;
+        }
+        try {
+            const breadcrumbArray = toJson(this.breadcrumbs) as Breadcrumb[];
+            if (Array.isArray(breadcrumbArray) && breadcrumbArray.length > 0) {
+                // Join all breadcrumb labels with "/" to create article name
+                // e.g., "Tooling API Objects/FieldDefinition"
+                return breadcrumbArray.map((crumb) => crumb.label).join("/");
+            }
+        } catch (e) {
+            // If parsing fails, return undefined
+        }
+        return undefined;
+    }
+
     handleSelectedItem(): void {
         // update topic view
-        const { referenceId, amfId, type } = this.selectedTopic;
+        const { referenceId, amfId, type } = this.selectedTopic!;
+
+        // Adding stringify inside try/catch
+        let amfModelString = "";
+        try {
+            amfModelString = JSON.stringify(this.amfMap[referenceId].model);
+        } catch (error) {
+            console.error(`Error stringifying amf model: ${error}`);
+        }
 
         // This updates the component in the content section.
         this.topicModel = {
             type,
-            amf: this.amfMap[referenceId].model,
+            amf: amfModelString,
             parser: this.amfMap[referenceId].parser,
             id: amfId
         };