@salesforcedevs/docs-components 0.56.2-seo-test17 → 0.56.2-snyk

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 } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -25,19 +26,35 @@ import {
     REFERENCE_TYPES,
     oldReferenceIdNewReferenceIdMap
 } from "./constants";
+import { restoreScroll } from "dx/scrollManager";
+import { DocPhaseInfo } from "typings/custom";
+import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
+
+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 coveoAnalyticsToken!: string;
     @api coveoSearchHub!: string;
-    @api useOldSidebar?: boolean = false;
+    @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @track navigation = [];
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api hideFooter = false;
+    @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
+    @track showVersionBanner = false;
+    @track _coveoAdvancedQueryConfig!: { [key: string]: any };
 
     // Update this to update what component gets rendered in the content block
     @track
@@ -101,6 +118,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 +140,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,18 +160,47 @@ export default class AmfReference extends LightningElement {
         this._expandChildren = normalizeBoolean(value);
     }
 
+    /*
+     * The get coveoAdvancedQueryConfig() method returns this._coveoAdvancedQueryConfig,
+     * but before returning it, it checks if there are multiple versions (this.versions.length > 1)
+     * and if a version is selected (this.selectedVersion). If both conditions are met,
+     * it updates the version property of this._coveoAdvancedQueryConfig with the selected version.
+     */
+    @api
+    get coveoAdvancedQueryConfig(): { [key: string]: any } {
+        const coveoConfig = this._coveoAdvancedQueryConfig;
+        if (this.versions.length > 1 && this.selectedVersion) {
+            const currentGAVersionRef = this.versions[0];
+            if (this.selectedVersion.id !== currentGAVersionRef.id) {
+                // Currently Coveo only supports query without "v"
+                const version = this.selectedVersion.id.replace("v", "");
+                coveoConfig.version = version;
+                this._coveoAdvancedQueryConfig = coveoConfig;
+            }
+        }
+        return this._coveoAdvancedQueryConfig;
+    }
+
+    set coveoAdvancedQueryConfig(config) {
+        this._coveoAdvancedQueryConfig = toJson(config);
+    }
+
+    private get enableFooter(): boolean {
+        return !this.hideFooter;
+    }
+
     // model
     protected _amfConfigList: AmfConfig[] = [];
     protected _amfConfigMap: Map<string, AmfConfig> = new Map();
     protected _referenceSetConfig!: ReferenceSetConfig;
     protected _currentReferenceId = "";
 
-    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;
 
@@ -153,6 +209,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
@@ -165,6 +223,7 @@ export default class AmfReference extends LightningElement {
 
     constructor() {
         super();
+
         this._boundOnApiNavigationChanged =
             this.onApiNavigationChanged.bind(this);
         this._boundUpdateSelectedItemFromUrlQuery =
@@ -280,6 +339,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
@@ -310,13 +380,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 {
@@ -330,9 +400,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`
             }
@@ -351,7 +423,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;
         }
@@ -363,13 +435,28 @@ export default class AmfReference extends LightningElement {
         return parentReferenceIndex !== -1;
     }
 
+    /**
+     * Expands the children of Markdown-based References.
+     */
+    private expandChildrenForMarkdownReferences(
+        children: ParsedMarkdownTopic[]
+    ): void {
+        if (!children) {
+            return;
+        }
+        for (const childNode of children) {
+            childNode.isExpanded = true;
+            this.expandChildrenForMarkdownReferences(childNode.children);
+        }
+    }
+
     /**
      * 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) {
@@ -383,7 +470,16 @@ export default class AmfReference extends LightningElement {
                 }
                 isChildrenLoading = true;
             } else {
-                navItemChildren = amfConfig.topic.children;
+                const isExpandChildrenEnabled = this.isExpandChildrenEnabled(
+                    amfConfig.id
+                );
+                // check whether we should expand all the child nodes, this is required for Coveo to crawl.
+                if (isExpandChildrenEnabled) {
+                    this.expandChildrenForMarkdownReferences(
+                        amfConfig.topic!.children
+                    );
+                }
+                navItemChildren = amfConfig.topic!.children;
             }
             // store nav items for each spec in order
             navAmfOrder[index] = {
@@ -404,7 +500,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
+        );
     }
 
     /**
@@ -448,12 +546,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,
@@ -501,7 +599,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(
@@ -528,8 +626,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,
@@ -538,7 +636,7 @@ export default class AmfReference extends LightningElement {
                             const childTopics = this.assignEndpointNavItems(
                                 parentReferencePath,
                                 referenceId,
-                                model[childrenPropertyName]
+                                model[childrenPropertyName!]
                             );
                             children.push({
                                 label,
@@ -553,23 +651,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,
@@ -582,8 +682,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,
@@ -620,12 +720,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) {
@@ -641,7 +747,7 @@ export default class AmfReference extends LightningElement {
                 navTitle
             };
         }
-        return meta;
+        return meta!;
     }
 
     /**
@@ -652,7 +758,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) => {
                 return routeMeta.meta === metadata.meta;
             }
-        );
+        )!;
     }
 
     /**
@@ -666,7 +772,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && amfId === metadata.amfId
-        );
+        )!;
     }
 
     /**
@@ -681,7 +787,7 @@ export default class AmfReference extends LightningElement {
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId &&
                 identifier === metadata.identifier
-        );
+        )!;
     }
 
     /**
@@ -695,7 +801,7 @@ export default class AmfReference extends LightningElement {
         return Object.values(this.metadata).find(
             (metadata: AmfMetadataTopic) =>
                 referenceId === metadata.referenceId && type === metadata.type
-        );
+        )!;
     }
 
     /**
@@ -736,6 +842,7 @@ export default class AmfReference extends LightningElement {
         if (meta) {
             // update the encoded url meta param
             const encodedMeta = this.getUrlEncoded(meta);
+
             window.history.pushState(
                 {},
                 "",
@@ -754,8 +861,9 @@ 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,
                 "",
                 `${parentReferencePath}?meta=${encodedMeta}`
             );
@@ -771,9 +879,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) {
@@ -796,6 +903,8 @@ export default class AmfReference extends LightningElement {
         } else {
             this.loadMarkdownBasedReference();
         }
+
+        restoreScroll(); // don't try this at home kids
     }
 
     /**
@@ -807,7 +916,7 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const { meta } = this.selectedTopic;
+            const { meta } = this.selectedTopic!;
             const metadata = this.metadata[meta];
             if (metadata) {
                 const {
@@ -922,7 +1031,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);
@@ -938,7 +1047,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);
@@ -980,10 +1089,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(
@@ -1086,15 +1195,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,
@@ -1128,7 +1238,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()) {
@@ -1142,7 +1255,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
@@ -1171,9 +1284,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) {
@@ -1183,7 +1296,11 @@ export default class AmfReference extends LightningElement {
                     window.location.href = redirectReferenceUrl;
                 } else {
                     // This is for CASE 1,3 and 4 mentioned above, Where we need to update the browser history
-                    window.history.replaceState({}, "", redirectReferenceUrl);
+                    window.history.replaceState(
+                        window.history.state,
+                        "",
+                        redirectReferenceUrl
+                    );
                 }
             }
         }
@@ -1198,10 +1315,17 @@ 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;
         }
@@ -1218,13 +1342,63 @@ 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 {
@@ -1261,8 +1435,13 @@ export default class AmfReference extends LightningElement {
                         elementId,
                         metaVal
                     );
+
+                    logCoveoPageView(
+                        this.coveoOrganizationId,
+                        this.coveoAnalyticsToken
+                    );
                     this.updateUrlWithSelected(parentReferencePath, metaVal);
-                    this.updateNavTitleMetaTag(metadata.navTitle);
+                    this.updateTags(metadata.navTitle);
                 } else {
                     if (this.isParentReferencePath(name)) {
                         this.loadNewReferenceItem(name);
@@ -1294,16 +1473,22 @@ export default class AmfReference extends LightningElement {
 
     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
         };
-
-        window.scrollTo({ top: 0, behavior: "smooth" });
     }
 }