@salesforcedevs/arch-components 1.20.17-alpha13 → 1.20.17-alpha15

package/src/modules/arch/explorer/explorer.ts

@@ -0,0 +1,718 @@
+import { LightningElement, api } from 'lwc';
+//import { ExpandableSection } from '../expandableSection/expandableSection';
+import { Pattern, Behavior, Location, Filter } from './types';
+import jsPDF from 'jspdf';
+import { debounce } from 'arch/debounce';
+import { sendInteractionEvent, InteractionEventTypes } from 'arch/helpers';
+
+export default class Explorer extends LightningElement {
+
+    // get the inuts from the calling page
+    _content: string | undefined;
+
+    // lets get the inputs from the form
+    private _keywordFilter: string = '';
+    private _selectedTrusted: string = '-1';
+    private _selectedEasy: string = '-1';
+    private _selectedAdaptable: string = '-1';
+    private _selectedLocation: string = '-1';
+    private _selectedProductArea: string = '-1';
+
+    // set up some controlling sys vars
+    private isLoading = true;
+    private filterData = '/assets/data/wa_framework.json';
+    private feedbackURL = 'https://docs.google.com/forms/d/e/1FAIpQLSf172WosVDuSjMnTS2tGL8024TyBswpWTv4vNjwfbwces0HlQ/viewform';
+    @api private version: string = '';
+    private frameworkArr: any;
+    private trustedArr: Behavior[] = [];
+    private easyArr: Behavior[] = [];
+    private adaptableArr: Behavior[] = [];
+    private locationsArr: Location[] = [];
+    private productAreasArr: Location[] = [];
+    private selectedFilters: Filter[] = [];
+    private currentPageIndex = 0;
+    private pageSize = 10;
+    private shareUrl = window.location.href;
+
+
+    // vars for pdf export
+    private logoURL = 'https://a.sfdcstatic.com/developer-website/images/architect/architects_logo_horizontal_bg.png';
+    private logoImageData: string | undefined;
+
+
+    // lets set the pattern data (this includes anti-patterns)
+    entireLibrary: Pattern[] = [];
+    allPatterns: Pattern[] = [];
+    allAntiPatterns: Pattern[] = [];
+    filteredPatterns: Pattern[] = [];
+    filteredAntiPatterns: Pattern[] = [];
+
+    connectedCallback(): void {
+
+        this.loadImage(this.logoURL).then(data => {
+            this.logoImageData = data;
+        })
+            .catch(error => {
+                console.error('Error loading image:', error);
+            });
+    }
+
+    @api
+    set content(value) {
+        if (this._content !== value) {
+            this._content = value;
+            this.fetchFilterData();
+            this.fetchPatternData();
+        }
+
+    }
+    get content() {
+        return this._content;
+    }
+
+    // get the patterns loaded into a variable
+    async fetchPatternData() {
+        try {
+            if (!this._content) {
+                return;
+            }
+            const response = await fetch(this._content);
+            const data = await response.json();
+            this.allPatterns = this.sortPatterns(data.values[0][0].Patterns as Pattern[]);
+            this.allAntiPatterns = this.sortPatterns(data.values[0][0].AntiPatterns as Pattern[]);
+            this.removeEmptyFilterOptions();
+            this.checkURLParams();
+            this.applyFilters();
+
+        } catch (error: unknown) {
+            console.error("An error occurred fetching the library:", error instanceof Error ? error.message : String(error));
+        }
+    }
+    private removeEmptyFilterOptions = () => {
+        const availableProductAreas = [...new Set(
+            [...this.allPatterns.map(item => item.ProductArea),
+            ...this.allAntiPatterns.map(item => item.ProductArea)
+            ]
+        )].sort();
+
+        this.productAreasArr = availableProductAreas.map(area => ({ Name: area, isDisabled: false }))
+    }
+    private sortPatterns(arr: any[]) {
+        return arr.sort((a, b) => {
+            // Compare by CapabilityWeight
+            if (a.CapabilityWeight > b.CapabilityWeight) {
+                return -1;
+            }
+            if (a.CapabilityWeight < b.CapabilityWeight) {
+                return 1;
+            }
+
+            // If CapabilityWeight is equal, compare by BehaviorWeight
+            if (a.BehaviorWeight > b.BehaviorWeight) {
+                return -1;
+            }
+            if (a.BehaviorWeight < b.BehaviorWeight) {
+                return 1;
+            }
+
+            // If BehaviorWeight is equal, compare by DimensionWeight
+            if (a.DimensionWeight > b.DimensionWeight) {
+                return -1;
+            }
+            if (a.DimensionWeight < b.DimensionWeight) {
+                return 1;
+            }
+
+            // If DimensionWeight is equal, compare by ConsiderationWeight
+            if (a.ConsiderationWeight > b.ConsiderationWeight) {
+                return -1;
+            }
+            if (a.ConsiderationWeight < b.ConsiderationWeight) {
+                return 1;
+            }
+
+            // If all properties are equal, consider the elements equal in this sort context
+            return 0;
+        });
+    }
+
+    private get hasPatterns(): boolean {
+        return this.filteredPatterns.length > 0;
+    }
+
+    private get hasAntiPatterns(): boolean {
+        return this.filteredAntiPatterns.length > 0;
+    }
+
+    handleFeedbackClick() {
+        window.open(this.feedbackURL, '_blank');
+    }
+
+    //#region FILTER FUNCTIONS
+
+    async fetchFilterData() {
+        try {
+
+            fetch(this.filterData).then((response) => response.json()).then((data) => {
+                // get the entire framework
+                this.frameworkArr = data.values[0][0].Capabilities;
+
+                //  populate the framework dropdowns
+                this.trustedArr = this.frameworkArr.filter((capability: any) => capability.Name === "Trusted")[0].Behaviors.sort((a: any, b: any) => b.Weight - a.Weight);
+                this.trustedArr.forEach((behavior: any) => {
+                    behavior.Dimensions.forEach((dim: any) => {
+                        dim.isDisabled = false;
+                    });
+                });
+
+                this.easyArr = this.frameworkArr.filter((capability: any) => capability.Name === "Easy")[0].Behaviors.sort((a: any, b: any) => b.Weight - a.Weight);
+                this.easyArr.forEach((behavior: any) => {
+                    behavior.Dimensions.forEach((dim: any) => {
+                        dim.isDisabled = false;
+                    });
+                });
+
+                this.adaptableArr = this.frameworkArr.filter((capability: any) => capability.Name === "Adaptable")[0].Behaviors.sort((a: any, b: any) => b.Weight - a.Weight);
+                this.adaptableArr.forEach((behavior: any) => {
+                    behavior.Dimensions.forEach((dim: any) => {
+                        dim.isDisabled = false;
+                    });
+                });
+
+                this.locationsArr.push(...data.values[0][0].Locations);
+                this.locationsArr.forEach((loc: any) => {
+                    loc.isDisabled = false;
+                });
+
+                this.productAreasArr.push(...data.values[0][0].ProductAreas);
+                this.productAreasArr.forEach((area: any) => {
+                    area.isDisabled = false;
+                });
+
+            });
+
+        } catch (error: unknown) {
+            console.error("An error occurred getting the filter list:", error instanceof Error ? error.message : String(error));
+        }
+    }
+
+    filterChange(evt: CustomEvent) {
+        if (evt.detail === "-1") {
+            return;
+        }
+        const newFilter: Filter = {
+            Type: (evt.target as HTMLElement).id,
+            Name: evt.detail
+        };
+        // Check if the filter already exists in the array
+        const filterExists = this.selectedFilters.some(filter => filter.Type === newFilter.Type && filter.Name === newFilter.Name);
+        if (!filterExists) {
+            this.selectedFilters.push(newFilter);
+            this.setDimensionOption(newFilter.Type, newFilter.Name, true);
+        }
+
+        this.applyFilters();
+    }
+
+    removeFilter(evt: Event) {
+        const index = this.selectedFilters.findIndex(filter => filter.Name === (evt.target as HTMLElement).innerText);
+        this.setDimensionOption(this.selectedFilters[index].Type, this.selectedFilters[index].Name, false);
+        this.selectedFilters.splice(index, 1);
+        this.applyFilters();
+    }
+
+    private sendInteractionEvent = debounce((event: Event, target: HTMLElement) => {
+        sendInteractionEvent("Explorer Search", InteractionEventTypes.INPUT_CHANGE, event, target);
+    }, 1000);
+    // handle typing in the search box
+    keywordFilterChange(evt: InputEvent) {
+        const target = (evt.currentTarget as HTMLInputElement);
+        this.sendInteractionEvent(evt,target);
+        this._keywordFilter = target.value;
+        this.applyFilters();
+    }
+
+
+    async applyFilters() {
+        try {
+            this.filteredPatterns = [...this.allPatterns];
+            this.filteredAntiPatterns = [...this.allAntiPatterns];
+            const frameworkFilters = this.selectedFilters.filter(filter => filter.Type !== 'Location' && filter.Type !== 'ProductArea');
+            const locationFilters = this.selectedFilters.filter(filter => filter.Type === 'Location');
+            const productAreaFilters = this.selectedFilters.filter(filter => filter.Type === 'ProductArea');
+
+            if (frameworkFilters.length > 0) {
+                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
+                    frameworkFilters.some(filter => (pattern.Capability === filter.Type && pattern.Dimension === filter.Name))
+                );
+
+                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(pattern =>
+                    frameworkFilters.some(filter => (pattern.Capability === filter.Type && pattern.Dimension === filter.Name))
+                );
+            }
+            if (locationFilters.length > 0) {
+                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
+                    locationFilters.some(filter => (filter.Type === 'Location' && pattern.Location === filter.Name))
+                );
+                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(pattern =>
+                    locationFilters.some(filter => (filter.Type === 'Location' && pattern.Location === filter.Name))
+                );
+            }
+            if (productAreaFilters.length > 0) {
+                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
+                    productAreaFilters.some(filter => (filter.Type === 'ProductArea' && pattern.ProductArea === filter.Name))
+                );
+                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(pattern =>
+                    productAreaFilters.some(filter => (filter.Type === 'ProductArea' && pattern.ProductArea === filter.Name))
+                );
+            }
+            this.isLoading = false;
+
+            // and we want to the search to be reductive as well so only check filterd array 
+            if (this._keywordFilter.length > 0) {
+                this.filteredPatterns = this.filteredPatterns.filter(pattern =>
+                    pattern.Name?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    pattern.Description.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    pattern.Location?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    pattern.Dimension?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    pattern.Consideration?.toLowerCase().includes(this._keywordFilter.toLowerCase())
+                );
+
+                this.filteredAntiPatterns = this.filteredAntiPatterns.filter(ap =>
+                    ap.Name?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    ap.Description.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    ap.Location?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    ap.Dimension?.toLowerCase().includes(this._keywordFilter.toLowerCase()) ||
+                    ap.Consideration?.toLowerCase().includes(this._keywordFilter.toLowerCase())
+                );
+            }
+
+            this.currentPageIndex = 0;
+            this.udpateSearchParams();
+
+        } catch (error: unknown) {
+            console.error("An error occurred applying the filters:", error instanceof Error ? error.message : String(error));
+        }
+    }
+
+    checkURLParams() {
+        // Load filters from URL params
+        const url = new URL(window.location.href.replace('#', ''));
+        const params = url.searchParams;
+        for (const [key, value] of params.entries()) {
+            switch (key) {
+                case 'Trusted':
+                case 'Easy':
+                case 'Adaptable':
+                case 'Location':
+                case 'ProductArea':
+                    this.selectedFilters.push({ Type: key, Name: value });
+                    this.setDimensionOption(key, value, true);
+                    break;
+                case 'keywords':
+                    this._keywordFilter = value;
+                    break;
+                default:
+                    break;
+            }
+        };
+    }
+
+    udpateSearchParams() {
+        try {
+            // Update page state so that we track filters in URL params
+            const params = new URLSearchParams();
+
+            this.selectedFilters.forEach((filter) => {
+                params.append(filter.Type, filter.Name);
+            });
+
+            if (this._keywordFilter.length > 0 && this._keywordFilter !== '') {
+                params.set('keywords', this._keywordFilter);
+            }
+
+            const paramsString = params.toString();
+            let updatedUrl = window.location.pathname;
+
+            if (paramsString) {
+                updatedUrl += `?${paramsString}`;
+            }
+
+            // eslint-disable-next-line no-restricted-globals
+            history.replaceState(history.state, document.title, updatedUrl);
+            this.shareUrl = `${window.location.protocol}//${window.location.hostname}${updatedUrl}`;
+
+        } catch (error: unknown) {
+            console.error("An error occured applying the url params:", error instanceof Error ? error.message : String(error));
+        }
+    }
+
+    handleResetFiltersClick() {
+        this.selectedFilters = [] as Filter[];
+        this._keywordFilter = '';
+        this.locationsArr.forEach((loc: any) => {
+            loc.isDisabled = false;
+        });
+        this.productAreasArr.forEach((area: any) => {
+            area.isDisabled = false;
+        });
+        this.trustedArr.forEach((behavior: any) => {
+            behavior.Dimensions.forEach((dim: any) => {
+                dim.isDisabled = false;
+            });
+        });
+        this.easyArr.forEach((behavior: any) => {
+            behavior.Dimensions.forEach((dim: any) => {
+                dim.isDisabled = false;
+            });
+        });
+        this.adaptableArr.forEach((behavior: any) => {
+            behavior.Dimensions.forEach((dim: any) => {
+                dim.isDisabled = false;
+            });
+        });
+        this.applyFilters();
+    }
+
+    setDimensionOption(dropDown: string, itemToDisable: string, state: boolean) {
+
+        switch (dropDown) {
+            case 'ProductArea':
+                this.productAreasArr = this.productAreasArr.map((area: any) => area.Name === itemToDisable ? { ...area, isDisabled: state } : area);
+                break;
+            case 'Location':
+                this.locationsArr = this.locationsArr.map((location: any) => location.Name === itemToDisable ? { ...location, isDisabled: state } : location);
+                break;
+            case 'Trusted':
+                this.trustedArr = this.trustedArr.map((behavior: any) => ({
+                    ...behavior,
+                    Dimensions: behavior.Dimensions.map((dimension: any) => dimension.Name === itemToDisable ? { ...dimension, isDisabled: state } : dimension)
+                }));
+                break;
+            case 'Easy':
+                this.easyArr = this.easyArr.map((behavior: any) => ({
+                    ...behavior,
+                    Dimensions: behavior.Dimensions.map((dimension: any) => dimension.Name === itemToDisable ? { ...dimension, isDisabled: state } : dimension)
+                }));
+                break;
+            case 'Adaptable':
+                this.adaptableArr = this.adaptableArr.map((behavior: any) => ({
+                    ...behavior,
+                    Dimensions: behavior.Dimensions.map((dimension: any) => dimension.Name === itemToDisable ? { ...dimension, isDisabled: state } : dimension)
+                }));
+                break;
+            default:
+                break;
+        }
+    }
+
+    //#endregion END FILTER FUNCTIONS
+
+    //#region PAGINATION FUNCTIONS 
+
+    private handlePageSizeChange(event: CustomEvent) {
+        this.pageSize = parseInt(event.detail, 10);
+        this.applyFilters();
+    }
+
+    private handlePreviousPageClick() {
+        if (this.currentPageIndex > 0) {
+            this.currentPageIndex--;
+        }
+    }
+
+    private handleNextPageClick() {
+        if (this.currentPageIndex < this.totalPages - 1) {
+            this.currentPageIndex++;
+        }
+    }
+
+    private get filterStatsLabel(): string {
+        const filteredItemCount = (this.activeTab === 'pattern') ? this.filteredPatterns.length : this.filteredAntiPatterns.length;
+        const allItemCount = (this.activeTab === 'pattern') ? this.allPatterns.length : this.allAntiPatterns.length;
+
+        let label;
+        if (filteredItemCount === allItemCount) {
+            label = `Showing ${allItemCount} ${this.activeTab}${allItemCount === 1 ? '' : 's'
+                }`;
+        } else {
+            label = `Showing ${filteredItemCount} ${this.activeTab}${filteredItemCount === 1 ? '' : 's'
+                }`;
+        }
+        if (this.totalPages > 1) {
+            label += ` • page ${this.currentPageIndex + 1} out of ${this.totalPages
+                }`;
+        }
+        return label;
+    }
+
+    private get currentPagePatterns(): Pattern[] {
+        const startIndex = this.currentPageIndex * this.pageSize;
+        return this.filteredPatterns.slice(
+            startIndex,
+            startIndex + this.pageSize
+        );
+    }
+
+    private get currentPageAntiPatterns(): Pattern[] {
+        const startIndex = this.currentPageIndex * this.pageSize;
+        return this.filteredAntiPatterns.slice(
+            startIndex,
+            startIndex + this.pageSize
+        );
+    }
+
+    private get isLastPage() {
+        let isActive = false;
+        if (this.activeTab === 'pattern') {
+            isActive = this.filteredPatterns.length === 0 || (this.currentPageIndex + 1) * this.pageSize >= this.filteredPatterns.length;
+        } else {
+            isActive = this.filteredAntiPatterns.length === 0 || (this.currentPageIndex + 1) * this.pageSize >= this.filteredAntiPatterns.length;
+        }
+        return isActive;
+    }
+
+    private get isFirstPage() {
+        return this.currentPageIndex === 0;
+    }
+
+    private get totalPages() {
+        const totPages = (this.activeTab === 'pattern') ? Math.ceil(this.filteredPatterns.length / this.pageSize) : Math.ceil(this.filteredAntiPatterns.length / this.pageSize);
+        return totPages;
+    }
+
+    private get activeTab() {
+        const tabset = this.template.querySelector('arch-tabset');
+        const activeTab = (tabset as any).activeTabValue;
+        return activeTab;
+    }
+
+    //#endregion PAGINATION FUNCTIONS
+
+    //#region  EXPORT FUNCTIONS
+
+    loadImage(url: string): Promise<string> {
+        // Function to load an image and convert it to a base64 string
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'Anonymous';
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                const ctx = canvas.getContext('2d');
+                ctx?.drawImage(img, 0, 0);
+                resolve(canvas.toDataURL('image/png'));
+            };
+            img.onerror = reject;
+            img.src = url;
+        });
+    }
+
+    getExportFileMetaData() {
+        let fileName = '';
+        let keywords = '';
+        this.selectedFilters.forEach((filter) => {
+            fileName += `${filter.Name}_`;
+            keywords += `${filter.Name} `;
+        });
+        keywords = keywords.trimEnd();
+        fileName += (this.activeTab === 'pattern') ? `Patterns_${this.version}` : `Anti-Patterns_${this.version}`;
+        return { fileName, keywords };
+    }
+
+    async handlePdfClick() {
+
+        const fileMeta = this.getExportFileMetaData();
+
+        const margins = {
+            top: 20,
+            bottom: 20,
+            left: 20,
+            width: 522,
+            windowWidth: 800
+        };
+
+        const doc = new jsPDF('p', 'pt', 'letter');
+        doc.setFont('Helvetica');
+        doc.setFontSize(10);
+        doc.setProperties({
+            title: 'Salesforce Well-Architected Pattern & Anti-Pattern Explorer',
+            subject: 'Exported lists of patterns and anti-patterns',
+            author: 'Salesforce Architects',
+            keywords: 'Salesoforce, Well-Architected, ' + fileMeta.keywords,
+            creator: 'Salesforce Architects'
+        });
+
+        // set up vars for the header once
+        this.loadImage('https://a.sfdcstatic.com/developer-website/images/architect/architects_logo_horizontal.png');
+        const expLink = fileMeta.keywords.replaceAll(' ', ' | ');
+        const expLinkWidth = doc.getTextWidth(expLink);
+        const pageWidth = doc.internal.pageSize.width;
+        const expLinkXPosition = pageWidth - expLinkWidth - margins.left;
+
+        const header = (pdfDoc: jsPDF) => {
+            // Add header content, e.g., a title or an image
+            if (this.logoImageData) {
+                pdfDoc.addImage(this.logoImageData, 'png', margins.top, margins.left, 200, 19);
+                pdfDoc.setTextColor("0070d2");
+                pdfDoc.textWithLink(expLink, expLinkXPosition, margins.top, {
+                    url: window.location.href
+                });
+            }
+        };
+
+        // get the up footer vars once
+        const pageHeight = doc.internal.pageSize.height;
+
+        const footer = (pdfDoc: jsPDF) => {
+
+            // link to the release page
+            pdfDoc.setTextColor("0070d2");
+            pdfDoc.textWithLink(`Release (${this.version})`, margins.left, pageHeight - margins.bottom, {
+                url: "https://architect.salesforce.com/releases/"
+            });
+
+            // get the page count and formatting
+            const pageCount = `Page ${pdfDoc.getNumberOfPages()}`;
+            const pageCountTextWidth = pdfDoc.getTextWidth(pageCount);
+            const pageCountXPosition = pageWidth - pageCountTextWidth - margins.left;
+            // add a page count before changing color
+            pdfDoc.setTextColor("000000");
+            pdfDoc.text(pageCount, pageCountXPosition, pageHeight - margins.bottom);
+        };
+
+        doc.internal.events.subscribe('addPage', () => {
+            header(doc);
+            footer(doc);
+        });
+
+        // add the initial header and footer
+        header(doc);
+        footer(doc);
+
+        const htmlOptions = {
+            margin: [margins.top * 2.5, margins.left, margins.bottom * 2, margins.left],
+            autoPaging: true,
+            x: margins.left,
+            y: margins.top,
+            width: margins.width,
+            windowWidth: margins.windowWidth
+        };
+
+        const htmlTable = (this.activeTab === 'pattern') ? this.makeHTMLTable('What Good Looks Like<p>Pattern</p>', this.filteredPatterns) : this.makeHTMLTable('What to Avoid<p>Anti-Pattern</p>', this.filteredAntiPatterns);
+
+        await this.addHtmlToPdf(doc, htmlTable, htmlOptions);
+        htmlOptions.y = doc.internal.pageSize.getHeight() * doc.internal.pages.length;
+
+        // below if we want them in the same doc
+        // doc.addPage();      
+        //await this.addHtmlToPdf(doc, antipatternsHtml, htmlOptions); 
+
+        doc.save(`${fileMeta.fileName}.pdf`);
+
+    }
+
+    addHtmlToPdf(pdfDoc: jsPDF, htmlContent: string, options: any = {}) {
+        return new Promise((resolve) => {
+            pdfDoc.html(htmlContent, {
+                ...options,
+                callback: function (pdfDocResult: jsPDF) {
+                    resolve(pdfDocResult);
+                }
+            });
+        });
+    }
+
+    makeHTMLTable(tableName: string, tableArr: Pattern[]) {
+        let htmlTable = `
+                    <table width="100%" style="font-family:Helvetica; border-collapse: collapse;">
+                    <colgroup>
+                        <col width="44%">
+                        <col width="26%">
+                        <col width="30%">
+                    </colgroup>
+                    <thead>
+                    <tr>
+                        <th style="background-color: #ebf5ff; border: 1px solid #dddbda; text-align: left; padding: 10px; vertical-align: middle;">${tableName}</th>
+                        <th style="background-color: #ebf5ff; border: 1px solid #dddbda; text-align: left; padding: 10px; vertical-align: middle;">Where to Look<p>Product Area | Location</p></th>
+                        <th style="background-color: #ebf5ff; border: 1px solid #dddbda; text-align: left; padding: 10px; vertical-align: middle;">Learn More <p>Dimension | Consideration</p></th>
+                    </tr>
+                    </thead>
+                    <tbody>`;
+
+        tableArr.forEach((pattern: Pattern, index: number) => {
+            const backgroundColor = (index % 2 === 0) ? '#fafaf9' : '#ffffff'; // Add background color to even rows
+            const description = (typeof pattern.Name === 'undefined' || pattern.Name === null || pattern.Name === '') ? pattern.Description : `${pattern.Name}<br/>${pattern.Description}`;
+
+            htmlTable += `<tr style="background-color: ${backgroundColor}">
+                                <td style="border: 1px solid #dddbda; text-align: left; padding: 10px;">
+                                    ${description}
+                                </td>
+                                <td style="border: 1px solid #dddbda; text-align: left; padding: 10px;">
+                                   ${pattern.ProductArea} | In your ${pattern.Location}
+                                </td>
+                                <td style="border: 1px solid #dddbda; text-align: left; padding: 10px;">
+                                        ${pattern.Dimension} | ${pattern.Consideration}                         
+                                </td>
+                            </tr>`;
+        });
+        htmlTable += `</tbody></table>`;
+        return htmlTable;
+    }
+
+    async handleCsvClick() {
+
+        const fileMeta = this.getExportFileMetaData();
+
+        if (this.activeTab === 'pattern') {
+            this.exportToCSV('What Good Looks Like,Where to Look,Learn More', 'Pattern,Product Area | Location,Dimension | Consideration', this.filteredPatterns, fileMeta.fileName);
+        } else {
+            this.exportToCSV('What to Avoid,Where to Look,Learn More', 'Anti-Pattern,Product Area | Location,Dimension | Consideration', this.filteredAntiPatterns, fileMeta.fileName);
+        }
+
+    }
+
+    exportToCSV(headers: string, subheaders: string, patArray: Pattern[], filename: string) {
+        // Convert Array to CSV
+        const csv: String[] = [];
+        csv.push(headers); // Add headers row
+        csv.push(subheaders);
+        patArray.forEach((pattern: Pattern) => {
+
+            const row: String[] = [];
+            const description = (typeof pattern.Name === 'undefined' || pattern.Name === '') ? pattern.Description : `${pattern.Name} ${pattern.Description}`;
+            row.push(this.escapeCSVField(description));
+            row.push(this.escapeCSVField(`${pattern.ProductArea} | ${pattern.Location}`));
+            row.push(this.escapeCSVField(`${pattern.Dimension} | ${pattern.Consideration}`));
+
+            csv.push(row.join(","));
+
+        });
+
+        const csvString = csv.join('\n');
+
+        // Create Blob and Download Link
+        const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `${filename}.csv`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+    }
+
+    escapeCSVField(field: string): string {
+        if (field.includes(',') || field.includes('"') || field.includes('\n')) {
+            // Escape double quotes
+            field = field.replace(/"/g, '""');
+            // Enclose field in double quotes
+            field = `"${field}"`;
+        }
+        return field;
+    }
+
+    //#endregion EXPORT FUNCTIONS
+
+}