ng-kinintel 0.0.317

package/src/lib/components/dashboard-editor/configure-item/configure-item.component.html

@@ -0,0 +1,2006 @@
+<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 -z-10" id="sidebarWrapper2">
+    <div [ngClass]="{'translate-x-0': sideOpen, 'translate-x-full': !sideOpen}"
+         (click)="$event.stopPropagation()"
+         class="pointer-events-auto w-screen max-w-md transform transition ease-in-out duration-500 sm:duration-700"
+         id="docSidebar">
+        <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
+            <div class="px-4 sm:px-6">
+                <div class="flex items-start justify-between">
+                    <div></div>
+                    <div class="ml-3 flex h-7 items-center">
+                        <button type="button" (click)="openSide.next(false)"
+                                class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none">
+                            <span class="sr-only">Close panel</span>
+                            <!-- Heroicon name: outline/x -->
+                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                 stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                      d="M6 18L18 6M6 6l12 12"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="relative flex-1 px-4 sm:px-6">
+                <ki-html-documentation [columns]="docColumns"></ki-html-documentation>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="configure-header">
+    Configure {{dashboardItemType.label}}
+    <button mat-button (click)="saveDashboard()">
+        <div class="flex items-center">
+            <mat-icon class="mr-1">chevron_left</mat-icon>
+            Back to Dashboard
+        </div>
+    </button>
+</div>
+<nav class="h-10 flex border-b border-gray-200 bg-white" aria-label="Breadcrumb">
+    <ol role="list" class="flex w-full px-4">
+        <li class="flex">
+            <div class="flex items-center">
+                <a mat-dialog-close [routerLink]="['/']" class="text-gray-600 hover:text-gray-800 flex items-center">
+                    <span class="material-symbols-outlined">home</span>
+                </a>
+            </div>
+        </li>
+
+        <li class="flex truncate">
+            <div class="flex items-center">
+                <svg class="h-full w-6 flex-shrink-0 text-gray-200" viewBox="0 0 24 44" preserveAspectRatio="none"
+                     fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/>
+                </svg>
+                <a mat-dialog-close [routerLink]="['/dashboards']"
+                   class="capitalize ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">
+                    Dashboards</a>
+            </div>
+        </li>
+
+        <li class="flex truncate">
+            <div class="flex items-center">
+                <svg class="h-full w-6 flex-shrink-0 text-gray-200" viewBox="0 0 24 44" preserveAspectRatio="none"
+                     fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/>
+                </svg>
+                <a (click)="saveDashboard()"
+                   class="capitalize ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">
+                    Dashboard Editor</a>
+            </div>
+        </li>
+
+        <li class="flex" *ngIf="dashboardDatasetInstance">
+            <div class="flex items-center">
+                <svg class="h-full w-6 flex-shrink-0 text-gray-200" viewBox="0 0 24 44" preserveAspectRatio="none"
+                     fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/>
+                </svg>
+                <a class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700" aria-current="page">
+                    {{dashboardItemType.label}} Editor
+                </a>
+                <ng-template [ngIf]="dashboardDatasetInstance && dashboardDatasetInstance.source">
+                    <span
+                        class="flex items-center border border-gray-200 text-xs px-2 py-0 rounded-xl ml-2 font-thin bg-gray-100">
+                    <span class="uppercase tracking-wider text-gray-700 font-medium">Querying:</span>
+                    <ng-template [ngIf]="dashboardDatasetInstance.source.datasourceInstanceKey">
+                        <img *ngIf="['custom', 'snapshot'].indexOf(dashboardDatasetInstance.source.type) === -1"
+                             src="/assets/favicon-rev.png" class="w-2.5 mx-1.5">
+                        <span *ngIf="dashboardDatasetInstance.source.type === 'custom'"
+                                  class="material-symbols-outlined h-4 w-4 text-lg leading-4 mx-1.5">upload_file</span>
+                        <span *ngIf="dashboardDatasetInstance.source.type === 'snapshot'"
+                                  class="material-symbols-outlined h-4 w-4 text-lg leading-4 mx-1.5">history</span>
+                    </ng-template>
+                    <ng-template [ngIf]="!dashboardDatasetInstance.source.datasourceInstanceKey">
+                        <span class="material-symbols-outlined h-4 w-4 text-lg leading-4 mx-1.5">query_stats</span>
+                    </ng-template>
+                    &nbsp;{{dashboardDatasetInstance.source.title}}
+                    <span class="material-symbols-outlined ml-2 cursor-pointer" title="Change source query"
+                          (click)="changeSource()">change_circle</span>
+                    </span>
+                </ng-template>
+            </div>
+        </li>
+    </ol>
+</nav>
+<div class="configure-content">
+
+    <rsz-layout class="row top" [directions]="['bottom']" [rFlex]="true">
+        <div class="cell-contents p-0">
+            <div *ngIf="!dashboardDatasetInstance" class="flex items-center justify-center h-full w-full">
+                <div class="flex items-center flex-col">
+                    <button mat-stroked-button color="primary" class="config-button"
+                            (click)="selectedDatasource()">
+                        Configure {{dashboardItemType.label}}
+                    </button>
+                    <p class="font-light w-3/4 text-center mt-4">
+                        Please configure this {{dashboardItemType.label}} using a data feed or stored query.
+                    </p>
+                </div>
+            </div>
+
+            <ki-dataset-editor #datasetEditorComponent *ngIf="dashboardDatasetInstance" [(datasetInstanceSummary)]="dashboardDatasetInstance"
+                               (dataLoaded)="dataLoaded($event)" [admin]="admin" [dashboardLayoutSettings]="general"
+                               [dashboardParameters]="widgetParameters"></ki-dataset-editor>
+        </div>
+    </rsz-layout>
+
+    <rsz-layout class="row bottom" [directions]="['none']" [rFlex]="false">
+        <mat-tab-group class="gray-header h-full">
+            <mat-tab label="Header">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Header Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Enter HTML/Text for the Title and Description fields
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex flex-col-reverse justify-stretch">
+                            <a (click)="openSide.next(true)"
+                               class="text-xs ml-2 hover:underline flex items-center primary text-cta">
+                                view help docs&nbsp;
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20"
+                                     fill="currentColor">
+                                    <path
+                                        d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/>
+                                    <path
+                                        d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex justify-between">
+                    <div class="w-1/2">
+                        <div class="p-4">
+                            <label class="mb-2">
+                                Title
+                                <input type="text" [(ngModel)]="general.name">
+                                <small class="font-normal">Title of the item</small>
+                            </label>
+                            <label class="mb-2">
+                                Description
+                                <textarea class="font-mono w-full"
+                                          cols="30" rows="5" [(ngModel)]="general.description"></textarea>
+                                <small class="font-normal">Description of the data item.</small>
+                            </label>
+
+                        </div>
+                    </div>
+                    <div class="w-1/2">
+                        <div class="p-4">
+                            <div class="flex items-center">
+                                <mat-checkbox class="mr-2" [(ngModel)]="general.transparent"></mat-checkbox>
+                                <p class="mb-0 mt-1">Transparent background</p>
+                            </div>
+                            <small class="mb-4 block font-normal">Make this dashboard items background transparent -
+                                requires page refresh to take affect</small>
+
+                            <ng-template [ngIf]="dashboard.layoutSettings && dashboard.layoutSettings.parameters && Object.keys(dashboard.layoutSettings.parameters).length">
+                                <div class="flex items-center">
+                                    <mat-checkbox class="mr-2" [(ngModel)]="general.showParameterBar"></mat-checkbox>
+                                    <p class="mb-0 mt-1">Show Parameter Bar</p>
+                                </div>
+                                <small class="mb-4 block font-normal">
+                                    Enable which parameters to show in this widget. Values entered here will only reload
+                                    this widget.
+                                </small>
+
+                                <ng-template [ngIf]="general.showParameterBar">
+                                    <div class="border-l-2 pl-4">
+                                        <div *ngFor="let parameterKey of Object.keys(dashboard.layoutSettings.parameters)"
+                                             class="flex items-center">
+                                            <mat-checkbox class="mr-2" [(ngModel)]="general.parameterBar[parameterKey]"></mat-checkbox>
+                                            <p class="mb-0 mt-1">{{dashboard.layoutSettings.parameters[parameterKey].title}}</p>
+                                        </div>
+                                    </div>
+
+                                </ng-template>
+
+                            </ng-template>
+                        </div>
+                    </div>
+                </div>
+
+
+            </mat-tab>
+            <mat-tab label="Footer">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Footer Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Enter HTML/Text for the footer field
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex flex-col-reverse justify-stretch">
+                            <a (click)="openSide.next(true)"
+                               class="text-xs ml-2 hover:underline flex items-center primary text-cta">
+                                view help docs&nbsp;
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20"
+                                     fill="currentColor">
+                                    <path
+                                        d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/>
+                                    <path
+                                        d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-1/2">
+                    <div class="p-4">
+                        <label class="mb-2">
+                            Footer
+                            <input type="text" [(ngModel)]="general.footer">
+                            <small class="font-normal">Text to display at the bottom of the item</small>
+                        </label>
+
+                        <label class="mb-2">
+                            Call to action
+                            <select matNativeControl [(ngModel)]="callToAction" [compareWith]="setCallToActionItem"
+                                    (ngModelChange)="ctaUpdate($event)">
+                                <option value="">None</option>
+                                <option [ngValue]="{type: 'custom'}">Custom Link</option>
+                                <optgroup label="Dashboards">
+                                    <option *ngFor="let dashboard of dashboards"
+                                            [ngValue]="{type: 'dashboard', value: dashboard.id, label: dashboard.title}">{{dashboard.title}}</option>
+                                </optgroup>
+                                <optgroup *ngIf="admin" label="DAP Data Feeds">
+                                    <option *ngFor="let dapFeed of dapFeeds"
+                                            [ngValue]="{type: 'feed', value: dapFeed.id, label: dapFeed.title}">{{dapFeed.title}}</option>
+                                </optgroup>
+                            </select>
+                            <small class="font-normal">Select the destination for the action link</small>
+                        </label>
+                        <ng-template [ngIf]="callToAction.type === 'custom'">
+                            <p>Please enter the link for this call to action.</p>
+
+                            <label class="mb-2">
+                                Link
+                                <input type="text" [(ngModel)]="callToAction.link">
+                            </label>
+
+                        </ng-template>
+
+                        <label class="mb-2">
+                            Set action label
+                            <input type="text" [(ngModel)]="callToAction.label">
+                        </label>
+
+                        <ng-template [ngIf]="callToAction && callToAction.parameters && dashboardParameters.length">
+                            <p>Please enter the following parameters to use with this dashboard</p>
+
+                            <ng-template ngFor let-param [ngForOf]="dashboardParameters">
+                                <label>{{param.title}}</label>
+                                <label *ngIf="!callToAction.parameters['custom-'+param.name]"
+                                       class="mb-2 dashboard-param-pick">
+                                    <select matNativeControl [(ngModel)]="callToAction.parameters[param.name]"
+                                            [compareWith]="ctaSelectOption">
+                                        <option [value]="undefined">-- Select Value --</option>
+                                        <option *ngFor="let paramValue of dashboardParamValues"
+                                                [value]="paramValue">
+                                            {{paramValue}}
+                                        </option>
+                                    </select>
+                                </label>
+                                <div class="mb-2 flex items-center">
+                                    <mat-checkbox class="mr-1"
+                                                  [(ngModel)]="callToAction.parameters['custom-'+param.name]"></mat-checkbox>
+                                    <p class="mb-0 mt-1">Use custom value</p>
+                                </div>
+                                <label class="mb-2 dashboard-param-pick">
+                                    <input type="text" *ngIf="callToAction.parameters['custom-'+param.name]"
+                                           placeholder="Enter custom parameter value"
+                                           [(ngModel)]="callToAction.parameters[param.name]">
+                                </label>
+                            </ng-template>
+
+
+                        </ng-template>
+                    </div>
+
+                </div>
+            </mat-tab>
+            <mat-tab label="Dependencies">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Dependency Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    If the loading of this widget is dependant on the results of another,
+                                    you can set the dependency here.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex justify-between">
+                    <div class="w-1/2">
+                        <div class="p-4">
+                            <label class="mb-2">
+                                Select the dashboard item(s) this depends on
+                                <mat-select [(ngModel)]="dependencies.instanceKeys" multiple>
+                                    <mat-option *ngFor="let instance of dashboard.datasetInstances"
+                                                [value]="instance.instanceKey">
+                                        {{dashboard.layoutSettings.general ? (dashboard.layoutSettings.general[instance.instanceKey] ? dashboard.layoutSettings.general[instance.instanceKey].name || instance.instanceKey : instance.instanceKey) : instance.instanceKey }}
+                                    </mat-option>
+                                </mat-select>
+                            </label>
+
+                            <ng-template ngFor let-instanceKey [ngForOf]="dependencies.instanceKeys">
+                                <label class="mb-2">
+                                    Dependency result type for
+                                    {{dashboard.layoutSettings.general ? (dashboard.layoutSettings.general[instanceKey] ? dashboard.layoutSettings.general[instanceKey].name || instanceKey : instanceKey) : instanceKey }}
+                                    <mat-select [(ngModel)]="dependencies[instanceKey]" [compareWith]="depSelection"
+                                                (ngModelChange)="updateInstanceFilterFields($event, instanceKey)">
+                                        <mat-option [value]="{type: null}">-- Select Type --</mat-option>
+                                        <mat-option [value]="{type: 'LOADED'}">Loaded</mat-option>
+                                        <mat-option
+                                            [value]="{type: 'MATCH', filterJunction: _.clone(filterJunction), key: instanceKey}">
+                                            Matches Criteria
+                                        </mat-option>
+                                    </mat-select>
+                                </label>
+
+                                <ng-template
+                                    [ngIf]="dependencies[instanceKey] && dependencies[instanceKey].type === 'MATCH'">
+                                    <div class="w-full flex items-center"
+                                         *ngIf="!dependencies[instanceKey].filterFields">
+                                        Loading filter component...
+                                    </div>
+                                    <ki-dataset-filters *ngIf="dependencies[instanceKey].filterFields" class="ml-0"
+                                                        [filterJunction]="dependencies[instanceKey].filterJunction"
+                                                        [filterFields]="dependencies[instanceKey].filterFields"></ki-dataset-filters>
+                                </ng-template>
+
+                            </ng-template>
+
+                        </div>
+                    </div>
+                    <div class="w-1/2">
+                        <div class="p-4">
+                            <label class="mb-2">
+                                No data notice message
+                                <input type="text" [(ngModel)]="dependencies.notice">
+                                <small class="font-normal">Enter the message to display when no data is returned from
+                                    dependency.</small>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+
+            </mat-tab>
+            <mat-tab label="Action">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Action Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Configure available actions that can be performed on this item.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-1/2">
+                    <div class="p-4">
+                        <div class="font-medium mb-2">
+                            Navigate to another dashboard or URL by clicking on this widget item.
+                        </div>
+
+                        <label class="mb-2">
+                            Destination
+                            <select matNativeControl [(ngModel)]="actionItem" [compareWith]="setCallToActionItem"
+                                    (ngModelChange)="ctaUpdate($event)">
+                                <option value="">None</option>
+                                <option [ngValue]="{type: 'custom'}">Custom Link</option>
+                                <optgroup label="Dashboards">
+                                    <option *ngFor="let dashboard of dashboards"
+                                            [ngValue]="{type: 'dashboard', value: dashboard.id, label: dashboard.title}">{{dashboard.title}}</option>
+                                </optgroup>
+                                <optgroup label="Shared Dashboards">
+                                    <option *ngFor="let dashboard of sharedDashboards"
+                                            [ngValue]="{type: 'dashboard', value: dashboard.id, label: dashboard.title}">{{dashboard.title}}</option>
+                                </optgroup>
+                                <optgroup label="Private Dashboards" *ngIf="privateDashboards.length">
+                                    <option *ngFor="let dashboard of privateDashboards"
+                                            [ngValue]="{type: 'dashboard', value: dashboard.id, label: dashboard.title}">{{dashboard.title}}</option>
+                                </optgroup>
+                            </select>
+                            <small class="font-normal">Select the destination for the action link</small>
+                        </label>
+                        <ng-template [ngIf]="actionItem.type === 'custom'">
+                            <p>Please enter the link for this call to action.</p>
+
+                            <label class="mb-2">
+                                Link
+                                <input type="text" [(ngModel)]="actionItem.link">
+                            </label>
+
+                        </ng-template>
+
+                        <ng-template [ngIf]="actionItem && actionItem.parameters && dashboardParameters.length">
+                            <p>Please enter the following parameters to use with this dashboard</p>
+
+                            <ng-template ngFor let-param [ngForOf]="dashboardParameters">
+                                <label>{{param.title}}</label>
+                                <label *ngIf="!actionItem.parameters['custom-'+param.name]"
+                                       class="mb-2 dashboard-param-pick">
+                                    <select matNativeControl [(ngModel)]="actionItem.parameters[param.name]"
+                                            [compareWith]="ctaSelectOption">
+                                        <option [value]="undefined">-- Select Value --</option>
+                                        <ng-template [ngIf]="dataset">
+                                            <option *ngFor="let column of dataset.columns"
+                                                    [value]="'[['+column.name+']]'">
+                                                {{column.title}}
+                                            </option>
+                                        </ng-template>
+                                    </select>
+                                </label>
+                                <div class="mb-2 flex items-center">
+                                    <mat-checkbox class="mr-1"
+                                                  [(ngModel)]="actionItem.parameters['custom-'+param.name]"></mat-checkbox>
+                                    <p class="mb-0 mt-1">Use custom value</p>
+                                </div>
+                                <label class="mb-2 dashboard-param-pick">
+                                    <input type="text" *ngIf="actionItem.parameters['custom-'+param.name]"
+                                           placeholder="Enter custom parameter value"
+                                           [(ngModel)]="actionItem.parameters[param.name]">
+                                </label>
+                            </ng-template>
+
+
+                        </ng-template>
+                    </div>
+                </div>
+            </mat-tab>
+            <mat-tab label="Text" *ngIf="dashboardItemType.type === 'text'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Text Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Enter HTML/Text for this item.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="flex flex-col-reverse justify-stretch">
+                            <a (click)="openSide.next(true)"
+                               class="text-xs ml-2 hover:underline flex items-center primary text-cta">
+                                view help docs&nbsp;
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20"
+                                     fill="currentColor">
+                                    <path
+                                        d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/>
+                                    <path
+                                        d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <ngx-codemirror
+                    [(ngModel)]="textData.value"
+                    [options]="{lineNumbers: true,theme: 'ttcn',mode: 'htmlmixed',autoRefresh: true,smartIndent: true,extraKeys: {'Ctrl-Space': 'autocomplete'}}">
+
+                </ngx-codemirror>
+            </mat-tab>
+            <mat-tab label="Image" *ngIf="dashboardItemType.type === 'image'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Image Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Set the image to be displayed in this widget.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-1/2">
+                    <div class="p-4">
+                        <label class="mb-2">
+                            Select the column that corresponds to the desired image
+                            <select matNativeControl [(ngModel)]="imageData.column"
+                                    (ngModelChange)="setImageData($event)">
+                                <option [value]="undefined">-- Select Column --</option>
+                                <ng-template [ngIf]="dataset">
+                                    <option *ngFor="let column of dataset.columns"
+                                            [value]="column.name">
+                                        {{column.title}}
+                                    </option>
+                                </ng-template>
+                            </select>
+                        </label>
+                    </div>
+                </div>
+            </mat-tab>
+            <mat-tab label="Table" *ngIf="dashboardItemType.type === 'table'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Table Row Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Adjust the settings to be applied to each table row.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-1/2">
+                    <div class="p-4">
+                        <div class="mb-4 flex items-center">
+                            <mat-checkbox class="mr-2" [(ngModel)]="tabular.expandRows"></mat-checkbox>
+                            <p class="mb-0 mt-1">Expand rows. By default rows are compressed and restrict wrapping.</p>
+                        </div>
+
+                        <div class="mb-4 flex items-center">
+                            <mat-checkbox class="mr-2" [(ngModel)]="tabular.hidePager"></mat-checkbox>
+                            <p class="mb-0 mt-1">Hide the pager at the bottom of the table.</p>
+                        </div>
+
+                        <div class="mb-4 flex items-center">
+                            <mat-checkbox class="mr-2" [(ngModel)]="tabular.actionRows"></mat-checkbox>
+                            <p class="mb-0 mt-1">Make table rows clickable</p>
+                        </div>
+
+                        <ng-template [ngIf]="tabular.actionRows">
+                            <label class="mb-2">
+                                Call to action
+                                <select matNativeControl [(ngModel)]="tabular.cta"
+                                        [compareWith]="setCallToActionItem"
+                                        (ngModelChange)="ctaUpdate($event)">
+                                    <option value="">None</option>
+                                    <option [ngValue]="{type: 'custom', windowLocation: 'EXISTING'}">Custom Link
+                                    </option>
+                                    <optgroup label="Dashboards">
+                                        <option *ngFor="let dashboard of dashboards"
+                                                [ngValue]="{type: 'dashboard', value: dashboard.id, label: dashboard.title, windowLocation: 'EXISTING'}">{{dashboard.title}}</option>
+                                    </optgroup>
+                                    <optgroup label="Shared Dashboards">
+                                        <option *ngFor="let dashboard of sharedDashboards"
+                                                [ngValue]="{type: 'dashboard', value: dashboard.id, label: dashboard.title, windowLocation: 'EXISTING'}">{{dashboard.title}}</option>
+                                    </optgroup>
+                                </select>
+                                <small class="font-normal">Select the destination for the action link</small>
+                            </label>
+                            <ng-template [ngIf]="tabular.cta && tabular.cta.type === 'custom'">
+                                <p>Please enter the link for this call to action.</p>
+
+                                <label class="mb-2">
+                                    Link
+                                    <input type="text" [(ngModel)]="tabular.cta.link">
+                                </label>
+
+                            </ng-template>
+
+                            <ng-template [ngIf]="tabular.cta && dashboardParameters.length">
+                                <p>Please enter the following parameters to use with this dashboard</p>
+
+                                <ng-template ngFor let-param [ngForOf]="dashboardParameters">
+                                    <label>{{param.title}}</label>
+                                    <label *ngIf="!tabular.cta.parameters['custom-'+param.name]"
+                                           class="mb-2 dashboard-param-pick">
+                                        <select matNativeControl [(ngModel)]="tabular.cta.parameters[param.name]"
+                                                [compareWith]="ctaSelectOption">
+                                            <option>-- Select Value --</option>
+                                            <ng-template [ngIf]="dataset">
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="'[['+column.name+']]'">
+                                                    {{column.title}}
+                                                </option>
+                                            </ng-template>
+                                        </select>
+                                    </label>
+                                    <div class="mb-2 flex items-center">
+                                        <mat-checkbox class="mr-2"
+                                                      [(ngModel)]="tabular.cta.parameters['custom-'+param.name]"></mat-checkbox>
+                                        <p class="mb-0 mt-1">Use custom value</p>
+                                    </div>
+                                    <label class="mb-2 dashboard-param-pick">
+                                        <input type="text" *ngIf="tabular.cta.parameters['custom-'+param.name]"
+                                               placeholder="Enter custom parameter value"
+                                               [(ngModel)]="tabular.cta.parameters[param.name]">
+                                    </label>
+                                </ng-template>
+                            </ng-template>
+
+                            <mat-radio-group *ngIf="tabular.cta" [(ngModel)]="tabular.cta.windowLocation">
+                                <mat-radio-button class="mr-4" value="EXISTING">Existing Window</mat-radio-button>
+                                <mat-radio-button value="_blank">New Window/Tab</mat-radio-button>
+                            </mat-radio-group>
+                        </ng-template>
+                    </div>
+
+                </div>
+
+
+            </mat-tab>
+            <mat-tab label="Columns" *ngIf="dashboardItemType.type === 'table'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Table Column Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Apply specific cell formatting to each table column.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="w-1/2">
+                    <div class="p-4">
+                        <label class="mb-2">
+                            Select the column to format
+                            <select matNativeControl [(ngModel)]="tableCells.column"
+                                    (ngModelChange)="setColumn($event)">
+                                <option [value]="undefined">-- Select Column --</option>
+                                <ng-template [ngIf]="dataset">
+                                    <option *ngFor="let column of dataset.columns"
+                                            [value]="column.name">
+                                        {{column.title}}
+                                    </option>
+                                </ng-template>
+                            </select>
+                        </label>
+
+                        <ng-template [ngIf]="tableCells[tableCells.column]">
+                            <label class="mb-4">
+                                Specify Max Column Width
+                                <div class="mt-1 relative rounded-md shadow-sm w-1/4">
+                                    <input type="number" [(ngModel)]="tableCells[tableCells.column].maxWidth"
+                                           class="block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md"
+                                           placeholder="Enter width">
+                                    <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                                        <span class="text-gray-500 sm:text-sm"> px </span>
+                                    </div>
+                                </div>
+                            </label>
+
+                            <label class="mb-2">
+                                Column Format
+                                <select matNativeControl [(ngModel)]="tableCells[tableCells.column].type"
+                                        (ngModelChange)="setColumnFormat($event)">
+                                    <option [value]="undefined">Automatic</option>
+                                    <option *ngFor="let format of columnFormats"
+                                            [value]="format.type">
+                                        {{format.title}}
+                                    </option>
+                                </select>
+                            </label>
+
+                            <ki-table-cell-formatter *ngIf="tableCells[tableCells.column].type"
+                                                     [type]="tableCells[tableCells.column].type"
+                                                     [data]="tableCells[tableCells.column].data"
+                                                     [openSide]="openSide" [dataset]="dataset"
+                                                     [currencies]="currencies" [dashboards]="dashboards"
+                                                     [sharedDashboards]="sharedDashboards"
+                                                     [privateDashboards]="privateDashboards"
+                                                     [actionEvents]="actionEvents">
+                            </ki-table-cell-formatter>
+
+                        </ng-template>
+
+                    </div>
+                </div>
+            </mat-tab>
+            <mat-tab label="Metric" *ngIf="dashboardItemType.type === 'metric'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Metric Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Select which pieces of information to display.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-4 flex justify-between">
+                    <div class="flex-grow p-4">
+                        <label class="mb-4">
+                            Main Metric
+                            <select [(ngModel)]="metric.main" (ngModelChange)="updateMetricDataValues()">
+                                <option value="">-- Select Main Metric --</option>
+                                <option [value]="field.name" *ngFor="let field of filterFields">
+                                    {{field.title}}
+                                </option>
+                            </select>
+                        </label>
+
+                        <hr>
+
+                        <label class="mb-4">
+                            Sub Metric
+                            <select [(ngModel)]="metric.subMetric" (ngModelChange)="updateMetricDataValues()">
+                                <option value="">-- Select Sub Metric --</option>
+                                <option [value]="field.name" *ngFor="let field of filterFields">
+                                    {{field.title}}
+                                </option>
+                            </select>
+                        </label>
+
+                        <mat-slide-toggle [(ngModel)]="metric.showSubChange" class="mb-4"
+                                          (ngModelChange)="updateMetricDataValues()">
+                            Show Metric Change
+                        </mat-slide-toggle>
+                    </div>
+
+                    <div class="w-6/12 p-4">
+                        <p><b>Preview</b></p>
+
+                        <div class="shadow p-4 flex items-center metric-preview">
+
+                            <div class="w-full">
+                                <dt class="text-base font-normal text-gray-900">{{metric.title}}</dt>
+                                <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+                                    <div class="flex items-baseline text-2xl font-semibold text-indigo-600">
+                                        {{metric.mainValue}}
+                                        <span *ngIf="metric.subMetric" class="ml-2 text-sm font-medium text-gray-500">from {{metric.subValue}}
+                                            <span class="text-xs">({{metric.subTitle}})</span></span>
+                                    </div>
+
+                                    <div *ngIf="metric.showSubChange"
+                                         class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium md:mt-2 lg:mt-0"
+                                         [ngClass]="{'bg-green-100 text-green-800': metric.mainValue >= metric.subValue, 'bg-red-100 text-red-800': metric.mainValue < metric.subValue}">
+                                        <!-- Heroicon name: mini/arrow-up -->
+                                        <svg *ngIf="metric.mainValue >= metric.subValue"
+                                             class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-green-500"
+                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                             aria-hidden="true">
+                                            <path fill-rule="evenodd"
+                                                  d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
+                                                  clip-rule="evenodd"/>
+                                        </svg>
+                                        <svg *ngIf="metric.mainValue < metric.subValue "
+                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                                             class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-red-500">
+                                            <path fill-rule="evenodd"
+                                                  d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
+                                                  clip-rule="evenodd"/>
+                                        </svg>
+                                        {{metric.difference}}
+                                    </div>
+                                </dd>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+            </mat-tab>
+            <mat-tab label="Chart" *ngIf="chartTypes.indexOf(dashboardItemType.type) > -1">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Chart Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Configure the chart data and display options.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex flex-col-reverse justify-stretch">
+                            <a (click)="openSide.next(true)"
+                               class="text-xs ml-2 hover:underline flex items-center primary">
+                                view help docs&nbsp;
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20"
+                                     fill="currentColor">
+                                    <path
+                                        d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"/>
+                                    <path
+                                        d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-4 flex justify-between">
+                    <div class="flex-grow p-4">
+                        <label class="mb-4">
+                            Chart Type
+                            <select [(ngModel)]="dashboardItemType.type">
+                                <option value="line">Line</option>
+                                <option value="bar">Bar</option>
+                                <option value="pie">Pie</option>
+                                <option value="doughnut">Doughnut</option>
+                                <option value="scatter">Scatter</option>
+                            </select>
+                        </label>
+
+                        <label class="mb-4">
+                            <ng-template
+                                [ngIf]="dashboardItemType.type !== 'pie' && dashboardItemType.type !== 'doughnut'">
+                                X Axis Column
+                            </ng-template>
+                            <ng-template
+                                [ngIf]="dashboardItemType.type === 'pie' || dashboardItemType.type === 'doughnut'">
+                                Labels Column
+                            </ng-template>
+                            <select [(ngModel)]="dashboardItemType.xAxis" (ngModelChange)="setChartData()">
+                                <option value="">-- Select
+                                    <ng-template
+                                        [ngIf]="dashboardItemType.type !== 'pie' && dashboardItemType.type !== 'doughnut'">
+                                        X
+                                        Axis Column
+                                    </ng-template>
+                                    <ng-template
+                                        [ngIf]="dashboardItemType.type === 'pie' || dashboardItemType.type === 'doughnut'">
+                                        Labels Column
+                                    </ng-template>
+                                    --
+                                </option>
+                                <option [value]="field.name" *ngFor="let field of filterFields">
+                                    {{field.title}}
+                                </option>
+                            </select>
+                        </label>
+
+                        <label class="mb-4">
+                            <ng-template
+                                [ngIf]="dashboardItemType.type !== 'pie' && dashboardItemType.type !== 'doughnut'">
+                                Y Axis Column
+                            </ng-template>
+                            <ng-template
+                                [ngIf]="dashboardItemType.type === 'pie' || dashboardItemType.type === 'doughnut'">
+                                Values Column
+                            </ng-template>
+                            <select [(ngModel)]="dashboardItemType.yAxis" (ngModelChange)="setChartData()">
+                                <option value="">-- Select
+                                    <ng-template
+                                        [ngIf]="dashboardItemType.type !== 'pie' && dashboardItemType.type !== 'doughnut'">
+                                        Y
+                                        Axis Column
+                                    </ng-template>
+                                    <ng-template
+                                        [ngIf]="dashboardItemType.type === 'pie' || dashboardItemType.type === 'doughnut'">
+                                        Values Column
+                                    </ng-template>
+                                    --
+                                </option>
+                                <option [value]="field.name" *ngFor="let field of filterFields">
+                                    {{field.title}}
+                                </option>
+                            </select>
+                        </label>
+
+                        <ng-template [ngIf]="dashboardItemType.type !== 'pie' && dashboardItemType.type !== 'doughnut'">
+                            <label class="mb-4">
+                                Series Column
+                                <select [(ngModel)]="dashboardItemType.seriesColumn" (ngModelChange)="setChartData()">
+                                    <option value="">-- Select Series Column--</option>
+                                    <option [value]="field.name" *ngFor="let field of filterFields">
+                                        {{field.title}}
+                                    </option>
+                                </select>
+                            </label>
+
+                            <label class="mb-4">
+                                Trend Line Options
+                                <select [(ngModel)]="dashboardItemType.trendLine" (ngModelChange)="setChartData()">
+                                    <option value="">-- Select Trend Line Option--</option>
+                                    <option value="average">Average Line</option>
+                                    <option value="linear">Linear Line</option>
+                                    <option value="exponential">Exponential Line</option>
+                                    <option value="logarithmic">Logarithmic Line</option>
+                                    <option value="power">Power Line</option>
+                                    <optgroup label="Use Column Data">
+                                        <option [value]="field.name" *ngFor="let field of filterFields">
+                                            {{field.title}}
+                                        </option>
+                                    </optgroup>
+                                </select>
+                                <div class="mt-1 text-xs font-normal text-gray-400">
+                                    Select one of the options, or an existing column of data to plot an additional
+                                    line on the graph.
+                                </div>
+                            </label>
+
+                            <ng-template [ngIf]="dashboardItemType.trendLine">
+                                <label class="flex-1">
+                                    Trend Line Colour
+                                    <input type="color" [(ngModel)]="dashboardItemType.trendLineColour"
+                                           (ngModelChange)="setChartData()">
+                                </label>
+                            </ng-template>
+
+                        </ng-template>
+
+                        <div class="mt-4 mb-4 align-center justify-between">
+                            <label class="flex-1">
+                                Limit Results
+                                <input type="number" [(ngModel)]="dashboardItemType.limit">
+                            </label>
+                            <label class="ml-4 mt-4 flex-1">
+                                <mat-checkbox [(ngModel)]="dashboardItemType.combineRemaining">
+                                    Combine remaining results
+                                </mat-checkbox>
+                            </label>
+                        </div>
+
+                        <label class="mb-4" *ngIf="dashboardItemType.combineRemaining">
+                            Remaining results label
+                            <input type="text" [(ngModel)]="dashboardItemType.combineRemaingingLabel">
+                        </label>
+
+                        <ng-template [ngIf]="dashboardItemType.type !== 'pie' && dashboardItemType.type !== 'doughnut'">
+                            <label class="mb-4">
+                                Y Axes Max value
+                                <input class="w-1/2" type="number" [(ngModel)]="dashboardItemType.maxValue">
+                            </label>
+
+                            <mat-slide-toggle [(ngModel)]="dashboardItemType.beginAtZero" class="block mb-4">
+                                Start Y Axes at Zero
+                            </mat-slide-toggle>
+                        </ng-template>
+
+                        <mat-slide-toggle [(ngModel)]="dashboardItemType.legend" class="block mb-4">Show Legend
+                        </mat-slide-toggle>
+                        <mat-slide-toggle *ngIf="dashboardItemType.type === 'line'"
+                                          [(ngModel)]="dashboardItemType.fill"
+                                          (ngModelChange)="setChartData()" class="block mb-4">Fill Background
+                        </mat-slide-toggle>
+
+                        <label class="mb-4">
+                            Colour Palette
+                            <select matNativeControl [compareWith]="paletteSelectOption"
+                                [(ngModel)]="dashboardItemType.colourPalette" (ngModelChange)="updateColourPalette()">
+                                <option value="">-- Select Colour Palette--</option>
+                                <option [ngValue]="palette" *ngFor="let palette of colourPalettes">
+                                    {{palette.name}}
+                                </option>
+                            </select>
+
+                            <div *ngIf="!colourPalettes.length" class="border-l-4 border-yellow-400 bg-yellow-50 p-4">
+                                <div class="flex">
+                                    <div class="flex-shrink-0">
+                                        <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+                                        </svg>
+                                    </div>
+                                    <div class="ml-3">
+                                        <p class="text-sm text-yellow-700 mb-0 flex">
+                                            <span class="font-normal">No colour palettes available.</span>
+                                            <a [routerLink]="['/project-settings']" target="_blank" class="flex items-center ml-2 font-medium text-yellow-700 underline hover:text-yellow-600">Manage palettes in project settings.<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4">
+                                                <path d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z" />
+                                                <path d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z" />
+                                            </svg>
+                                            </a>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </label>
+
+<!--                        <button mat-flat-button color="accent" (click)="resetDefaultColours()">-->
+<!--                            <div class="flex items-center">-->
+<!--                                Reset to Default Colours-->
+<!--                            </div>-->
+<!--                        </button>-->
+
+
+                        <ng-template [ngIf]="dashboardItemType.type === 'line' || dashboardItemType.type === 'scatter'">
+                            <div *ngFor="let dataItem of chartData; let i = index" class="mt-4 align-center justify-between">
+                                <label class="flex-1">
+                                    {{_.startCase(dataItem.label)}} Colour
+                                    <input type="color" [(ngModel)]="dashboardItemType.borderColor[i]"
+                                           (ngModelChange)="setChartData()">
+                                </label>
+                            </div>
+                        </ng-template>
+
+                        <ng-template [ngIf]="dashboardItemType.type !== 'line'">
+                            <div *ngIf="!dashboardItemType.colourPalette" class="mt-4 mb-4 flex items-end justify-between">
+                                <label class="flex-1">
+                                    Background Colour Range
+                                    <input type="color" [(ngModel)]="dashboardItemType.backgroundColorFrom"
+                                           (ngModelChange)="backgroundColourUpdate()">
+                                </label>
+                                <label class="flex-1">
+                                    &nbsp;
+                                    <input type="color" [(ngModel)]="dashboardItemType.backgroundColorTo"
+                                           (ngModelChange)="backgroundColourUpdate()">
+                                </label>
+                            </div>
+
+                            <div class="mt-4 mb-4 align-center justify-between">
+                                <label class="flex-1">
+                                    Colour Generator Mode
+                                    <mat-radio-group [(ngModel)]="dashboardItemType.colourMode"
+                                                     (ngModelChange)="backgroundColourUpdate()">
+                                        <mat-radio-button class="mr-4" value="repeat">Repeat</mat-radio-button>
+                                        <mat-radio-button class="mr-4" value="lrgb">Gradient</mat-radio-button>
+                                        <mat-radio-button class="mr-4" value="hsl">HSL</mat-radio-button>
+                                        <mat-radio-button value="lch">LCH</mat-radio-button>
+                                    </mat-radio-group>
+                                </label>
+                            </div>
+
+                            <ng-template [ngIf]="Array.isArray(dashboardItemType.backgroundColor)">
+                                <label
+                                    *ngIf="dashboardItemType.backgroundColor && dashboardItemType.backgroundColor.length">
+                                    Set Individual Colours
+                                </label>
+                                <div *ngFor="let backColour of dashboardItemType.backgroundColor; let i = index">
+                                    <ng-template [ngIf]="dataset && dataset.allData[i]">
+                                        <div class="tracking-wider uppercase text-gray-500 text-xs mt-2"
+                                             *ngIf="dataset && dataset.allData">
+                                            {{dataset.allData[i][dashboardItemType.xAxis]}}
+                                        </div>
+                                        <input type="color" (change)="updateChart($event.target.value, i)"
+                                               [name]="'colour' + i" [value]="dashboardItemType.backgroundColor[i]">
+                                    </ng-template>
+                                </div>
+                            </ng-template>
+                        </ng-template>
+
+
+
+                    </div>
+
+                    <div class="w-6/12 p-4">
+                        <canvas #chart baseChart class="sticky top-10" *ngIf="chartData"
+                                [datasets]="chartData"
+                                [labels]="dashboardItemType.labels"
+                                [options]="{scales: {y: {beginAtZero: dashboardItemType.beginAtZero, max: dashboardItemType.maxValue || null}}, responsive: true}"
+                                [legend]="!!dashboardItemType.legend"
+                                [type]="dashboardItemType.type"
+                                [plugins]="[]">
+                        </canvas>
+                    </div>
+
+                </div>
+            </mat-tab>
+            <mat-tab label="Word Cloud" *ngIf="dashboardItemType.type === 'words'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Word Cloud Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Adjust the settings for the Word Cloud generator.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-1/2">
+                    <div class="p-4">
+                        <label class="mb-2">
+                            Use an indexed document data source to populate word cloud, or provide a string from a
+                            single column.
+                            <mat-radio-group [(ngModel)]="wordCloud.populationMethod">
+                                <mat-radio-button value="WHOLE">Word Frequencies</mat-radio-button>
+                                <mat-radio-button class="ml-4" value="SINGLE">Single String</mat-radio-button>
+                            </mat-radio-group>
+                        </label>
+
+                        <ng-template [ngIf]="wordCloud.populationMethod === 'SINGLE'">
+                            <label class="mb-2">
+                                Select which row to use for the word cloud
+                                <select matNativeControl [(ngModel)]="wordCloud.row">
+                                    <option [value]="undefined">-- Select Row --</option>
+                                    <ng-template [ngIf]="dataset">
+                                        <option *ngFor="let row of dataset.allData; let i = index"
+                                                [value]="i">
+                                            {{_.values(row)[0]}}
+                                        </option>
+                                    </ng-template>
+                                </select>
+                            </label>
+
+                            <label class="mb-2">
+                                Select the column to use for the word cloud
+                                <select matNativeControl [(ngModel)]="wordCloud.column">
+                                    <option [value]="undefined">-- Select Column --</option>
+                                    <ng-template [ngIf]="dataset">
+                                        <option *ngFor="let column of dataset.columns"
+                                                [value]="column.name">
+                                            {{column.title}}
+                                        </option>
+                                    </ng-template>
+                                </select>
+                            </label>
+                        </ng-template>
+
+                        <ng-template [ngIf]="wordCloud.populationMethod === 'WHOLE'">
+                            <label class="mb-2">
+                                Select the column to use for the words
+                                <select matNativeControl [(ngModel)]="wordCloud.column">
+                                    <option [value]="undefined">-- Select Column --</option>
+                                    <ng-template [ngIf]="dataset">
+                                        <option *ngFor="let column of dataset.columns"
+                                                [value]="column.name">
+                                            {{column.title}}
+                                        </option>
+                                    </ng-template>
+                                </select>
+                            </label>
+                            <label class="mb-2">
+                                Select the column to use for the frequency
+                                <select matNativeControl [(ngModel)]="wordCloud.frequency">
+                                    <option [value]="undefined">-- Select Column --</option>
+                                    <ng-template [ngIf]="dataset">
+                                        <option *ngFor="let column of dataset.columns"
+                                                [value]="column.name">
+                                            {{column.title}}
+                                        </option>
+                                    </ng-template>
+                                </select>
+                            </label>
+                        </ng-template>
+
+                    </div>
+
+                </div>
+            </mat-tab>
+            <mat-tab label="Network Graph" *ngIf="dashboardItemType.type === 'network'">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Network Graph Settings</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Adjust the settings for the Network Graph.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex">
+                    <div class="flex-1 w-1/2">
+                        <div class="p-4">
+
+                            <div class="w-full bg-white p-4 border rounded">
+                                <div class="font-medium mb-3 text-base">Node Data</div>
+                                <div class="mb-2 flex items-center justify-between">
+                                    <label class="flex-1 mb-2 mr-1">
+                                        ID Column
+                                        <select class="w-full" matNativeControl [(ngModel)]="networkData.nodeIds"
+                                            (ngModelChange)="setNetworkChartData(true)">
+                                            <option value="">-- Select Column --</option>
+                                            <ng-template [ngIf]="dataset">
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="column.name">
+                                                    {{column.title}}
+                                                </option>
+                                            </ng-template>
+                                        </select>
+                                        <div class="text-xs font-normal text-gray-500">IDs must be unique</div>
+                                    </label>
+                                    <label class="flex-1 mb-2 ml-1">
+                                        Label Column
+                                        <select class="w-full" matNativeControl [(ngModel)]="networkData.nodeLabels"
+                                                (ngModelChange)="setNetworkChartData(true)">
+                                            <option value="">-- Select Column --</option>
+                                            <ng-template [ngIf]="dataset">
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="column.name">
+                                                    {{column.title}}
+                                                </option>
+                                            </ng-template>
+                                        </select>
+                                        <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                    </label>
+                                    <label class="flex-1 mb-2 ml-1">
+                                        Group Column
+                                        <select class="w-full" matNativeControl [(ngModel)]="networkData.nodeGroups"
+                                                (ngModelChange)="setNetworkChartData(true)">
+                                            <option value="">-- Select Column --</option>
+                                            <ng-template [ngIf]="dataset">
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="column.name">
+                                                    {{column.title}}
+                                                </option>
+                                            </ng-template>
+                                        </select>
+                                        <div class="text-xs font-normal text-gray-500">Set which group nodes belong to.</div>
+                                    </label>
+                                </div>
+
+                                <hr class="py-2">
+
+                                <div class="flex items-start justify-between">
+                                    <div>
+                                        <div class="font-medium text-base">Global Node Options</div>
+                                        <div class="mb-3 text-xs text-gray-500">Options defined here will apply to all nodes.</div>
+                                    </div>
+                                    <button mat-stroked-button color="primary" (click)="addOption('nodeOptions')">
+                                        <div class="flex items-center">
+                                            Add Node Option
+                                        </div>
+                                    </button>
+                                </div>
+
+                                <ng-template ngFor let-nodeOption [ngForOf]="networkData.nodeOptions" let-i=index>
+                                    <div class="mb-2 flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            Option
+                                            <select class="w-full" matNativeControl [(ngModel)]="networkData.nodeOptions[i].key">
+                                                <option value="">-- Select Option --</option>
+                                                <option *ngFor="let option of availableNodeOptions"
+                                                        [disabled]="_.find(networkData.nodeOptions, {key: option})"
+                                                        [value]="option">
+                                                    {{option}}
+                                                </option>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            Option Value
+                                            <ng-template [ngIf]="networkData.nodeOptions[i].key && visNetworkOptions.nodes[networkData.nodeOptions[i].key].type !== 'boolean'">
+                                                <input [type]="visNetworkOptions.nodes[networkData.nodeOptions[i].key].type" [(ngModel)]="nodeOption.value">
+                                            </ng-template>
+                                            <ng-template [ngIf]="networkData.nodeOptions[i].key && visNetworkOptions.nodes[networkData.nodeOptions[i].key].type === 'boolean'">
+                                                <select [(ngModel)]="nodeOption.value">
+                                                    <option [value]="true">True</option>
+                                                    <option [value]="false">False</option>
+                                                </select>
+                                            </ng-template>
+                                            <div class="text-xs font-normal text-gray-500">
+                                                <a href="https://visjs.github.io/vis-network/docs/network/nodes.html"
+                                                   target="_blank" class="text-secondary flex items-center hover:underline">
+                                                    node options documentation
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                         stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                        </label>
+                                        <button mat-icon-button color="warn" (click)="networkData.nodeOptions.splice(i, 1)">
+                                            <mat-icon>clear</mat-icon>
+                                        </button>
+                                    </div>
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 w-1/2">
+                        <div class="p-4">
+
+                            <div class="w-full bg-white p-4 border rounded">
+                                <div class="flex items-start justify-between">
+                                    <div class="font-medium mb-3 text-base">Edge Data</div>
+                                    <button mat-stroked-button color="primary" (click)="pickNetworkEdgeDataset()">
+                                        <div class="flex items-center">
+                                            Select Edge Dataset
+                                        </div>
+                                    </button>
+                                </div>
+
+                                <ng-template [ngIf]="networkData.edgeDatasetTitle">
+                                    <div class="bg-blue-50 p-4 mb-2">
+                                        <div class="flex">
+                                            <div class="flex-shrink-0">
+                                                <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+                                                </svg>
+                                            </div>
+                                            <div class="ml-3 flex-1 md:flex md:justify-between">
+                                                <p class="mb-0 text-sm text-blue-700">
+                                                    You are currently using {{networkData.edgeDatasetTitle}} dataset
+                                                </p>
+                                                <p class="mb-0 mt-3 text-sm md:ml-6 md:mt-0">
+                                                    <a (click)="clearEdgeDataset()"
+                                                       class="whitespace-nowrap font-medium text-blue-700 hover:text-blue-600 hover:underline">
+                                                        Clear Dataset
+                                                    </a>
+                                                </p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            From Node ID Column
+                                            <select class="w-full" matNativeControl [(ngModel)]="networkData.fromIds">
+                                                <option value="">-- Select Column --</option>
+                                                <ng-template [ngIf]="edgeDataset">
+                                                    <option *ngFor="let column of edgeDataset.columns"
+                                                            [value]="column.name">
+                                                        {{column.title}}
+                                                    </option>
+                                                </ng-template>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            To Node ID Column
+                                            <select class="w-full" matNativeControl [(ngModel)]="networkData.toIds">
+                                                <option value="">-- Select Column --</option>
+                                                <ng-template [ngIf]="edgeDataset">
+                                                    <option *ngFor="let column of edgeDataset.columns"
+                                                            [value]="column.name">
+                                                        {{column.title}}
+                                                    </option>
+                                                </ng-template>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                    </div>
+                                </ng-template>
+
+                                <div *ngIf="!networkData.edgeDatasetTitle" class="flex items-center justify-between">
+                                    <label class="flex-1 mb-2 mr-1">
+                                        From ID
+                                        <select class="w-full" matNativeControl [(ngModel)]="networkData.fromIds">
+                                            <option value="">-- Select Column --</option>
+                                            <ng-template [ngIf]="dataset">
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="column.name">
+                                                    {{column.title}}
+                                                </option>
+                                            </ng-template>
+                                        </select>
+                                        <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                    </label>
+                                    <label class="flex-1 mb-2 ml-1">
+                                        To ID
+                                        <select class="w-full" matNativeControl [(ngModel)]="networkData.toIds">
+                                            <option value="">-- Select Column --</option>
+                                            <ng-template [ngIf]="dataset">
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="column.name">
+                                                    {{column.title}}
+                                                </option>
+                                            </ng-template>
+                                        </select>
+                                        <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                    </label>
+                                </div>
+
+                                <hr class="py-2">
+
+                                <div class="flex items-start justify-between">
+                                    <div>
+                                        <div class="font-medium text-base">Global Edge Options</div>
+                                        <div class="mb-3 text-xs text-gray-500">Options defined here will apply to all edges.</div>
+                                    </div>
+                                    <button mat-stroked-button color="primary" (click)="addOption('edgeOptions')">
+                                        <div class="flex items-center">
+                                            Add Edge Option
+                                        </div>
+                                    </button>
+                                </div>
+
+                                <ng-template ngFor let-edgeOption [ngForOf]="networkData.edgeOptions" let-i=index>
+                                    <div class="mb-2 flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            Option
+                                            <select class="w-full" matNativeControl [(ngModel)]="networkData.edgeOptions[i].key">
+                                                <option value="">-- Select Option --</option>
+                                                <option *ngFor="let option of availableEdgeOptions"
+                                                        [disabled]="_.find(networkData.edgeOptions, {key: option})"
+                                                        [value]="option">
+                                                    {{option}}
+                                                </option>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            Option Value
+                                            <ng-template [ngIf]="networkData.edgeOptions[i].key && visNetworkOptions.edges[networkData.edgeOptions[i].key].type !== 'boolean'">
+                                                <input [type]="visNetworkOptions.edges[networkData.edgeOptions[i].key].type" [(ngModel)]="edgeOption.value">
+                                            </ng-template>
+                                            <ng-template [ngIf]="networkData.edgeOptions[i].key && visNetworkOptions.edges[networkData.edgeOptions[i].key].type === 'boolean'">
+                                                <select [(ngModel)]="edgeOption.value">
+                                                    <option [value]="true">True</option>
+                                                    <option [value]="false">False</option>
+                                                </select>
+                                            </ng-template>
+                                            <div class="text-xs font-normal text-gray-500">
+                                                <a href="https://visjs.github.io/vis-network/docs/network/edges.html"
+                                                   target="_blank" class="text-secondary flex items-center hover:underline">
+                                                    edge options documentation
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                         stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                        </label>
+                                        <button mat-icon-button color="warn" (click)="networkData.edgeOptions.splice(i, 1)">
+                                            <mat-icon>clear</mat-icon>
+                                        </button>
+                                    </div>
+                                </ng-template>
+
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+
+            </mat-tab>
+            <mat-tab label="Groups" *ngIf="dashboardItemType.type === 'network' && networkData.nodeGroups">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Group Options</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Define the options for each group.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex-1 w-1/2">
+                    <div class="p-4">
+                        <div class="w-full bg-white p-4 border rounded">
+                            <div class="font-medium mb-3 text-base">Group Data</div>
+                            <ng-template ngFor let-nodeGroup [ngForOf]="nodeGroups">
+
+
+                                <div class="mb-2 flex items-center justify-between">
+                                    <label class="flex-1 mb-2 ml-1">
+                                        Group Name
+                                        <input type="text" [value]="nodeGroup || ''" disabled>
+                                    </label>
+                                </div>
+
+
+                                <div class="flex items-start justify-between">
+                                    <div>
+                                        <div class="font-medium text-base">Group Options</div>
+                                        <div class="mb-3 text-xs text-gray-500">Set the options for this node.</div>
+                                    </div>
+                                    <button mat-stroked-button color="primary" (click)="addGroupOption(nodeGroup)">
+                                        <div class="flex items-center">
+                                            Add Group Option
+                                        </div>
+                                    </button>
+                                </div>
+
+                                <ng-template [ngIf]="networkData.nodeGroupOptions && networkData.nodeGroupOptions[nodeGroup]">
+                                <ng-template ngFor let-groupOption [ngForOf]="networkData.nodeGroupOptions[nodeGroup]?.options" let-i=index>
+                                    <div class="mb-2 flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            Option
+                                            <select class="w-full" matNativeControl [(ngModel)]="groupOption.key">
+                                                <option value="">-- Select Option --</option>
+                                                <option *ngFor="let option of availableNodeOptions"
+                                                        [disabled]="_.find(networkData.nodeGroupOptions, {key: option})"
+                                                        [value]="option">
+                                                    {{option}}
+                                                </option>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            Option Value
+                                            <ng-template [ngIf]="groupOption.key && visNetworkOptions.nodes[groupOption.key].type !== 'boolean'">
+                                                <input [type]="visNetworkOptions.nodes[groupOption.key].type" [(ngModel)]="groupOption.value">
+                                            </ng-template>
+                                            <ng-template [ngIf]="groupOption.key && visNetworkOptions.nodes[groupOption.key].type === 'boolean'">
+                                                <select [(ngModel)]="groupOption.value">
+                                                    <option [value]="true">True</option>
+                                                    <option [value]="false">False</option>
+                                                </select>
+                                            </ng-template>
+                                            <div class="text-xs font-normal text-gray-500">
+                                                <a href="https://visjs.github.io/vis-network/docs/network/nodes.html"
+                                                   target="_blank" class="text-secondary flex items-center hover:underline">
+                                                    node options documentation
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                         stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                        </label>
+                                        <button mat-icon-button color="warn" (click)="networkData.nodeGroupOptions[nodeGroup]?.options.splice(i, 1)">
+                                            <mat-icon>clear</mat-icon>
+                                        </button>
+                                    </div>
+                                </ng-template>
+                                </ng-template>
+                                <hr class="py-2">
+                            </ng-template>
+                        </div>
+                    </div>
+                </div>
+            </mat-tab>
+            <mat-tab label="Nodes" *ngIf="dashboardItemType.type === 'network' && datasetNodes.length">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Node Options</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Define the options for each node.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex">
+                    <div class="flex-1 w-1/2">
+                        <div class="p-4">
+                            <div class="w-full bg-white p-4 border rounded">
+                            <div class="flex items-start justify-between">
+                                <div>
+                                    <div class="font-medium text-base">Node Options</div>
+                                    <div class="mb-3 text-xs text-gray-500">These options will be applied to all nodes
+                                        based on the column or custom value provided.</div>
+                                </div>
+                                <button mat-stroked-button color="primary" (click)="addOption('globalNodeOptions')">
+                                    <div class="flex items-center">
+                                        Add Node Option
+                                    </div>
+                                </button>
+                            </div>
+
+                            <ng-template ngFor let-nodeOption [ngForOf]="networkData.globalNodeOptions" let-i=index>
+                                <div class="mb-2 flex items-center justify-between">
+                                    <label class="flex-1 mb-2 mr-1">
+                                        Option
+                                        <select class="w-full" matNativeControl [(ngModel)]="nodeOption.key">
+                                            <option value="">-- Select Option --</option>
+                                            <option *ngFor="let option of availableNodeOptions"
+                                                    [disabled]="_.find(networkData.globalNodeOptions, {key: option})"
+                                                    [value]="option">
+                                                {{option}}
+                                            </option>
+                                        </select>
+                                        <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                    </label>
+                                    <div class="flex items-center">
+                                        <label class="flex-1 mb-2 ml-1">
+                                            Data Column
+                                            <select class="w-full" matNativeControl [(ngModel)]="nodeOption.column"
+                                                (ngModelChange)="updateOptions(nodeOption, 'datasetNodes')">
+                                                <option value="">-- Select Column --</option>
+                                                <option *ngFor="let column of dataset.columns"
+                                                        [value]="column.name">
+                                                    {{column.title}}
+                                                </option>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            Custom Value
+                                            <ng-template [ngIf]="nodeOption.key && visNetworkOptions.nodes[nodeOption.key].type !== 'boolean'">
+                                                <input [type]="visNetworkOptions.nodes[nodeOption.key].type" [(ngModel)]="nodeOption.value" (change)="updateOptions(nodeOption, 'datasetNodes')">
+                                            </ng-template>
+                                            <ng-template [ngIf]="nodeOption.key && visNetworkOptions.nodes[nodeOption.key].type === 'boolean'">
+                                                <select [(ngModel)]="nodeOption.value" (change)="updateOptions(nodeOption, 'datasetNodes')">
+                                                    <option [value]="true">True</option>
+                                                    <option [value]="false">False</option>
+                                                </select>
+                                            </ng-template>
+                                            <div class="text-xs font-normal text-gray-500">
+                                                <a href="https://visjs.github.io/vis-network/docs/network/nodes.html"
+                                                   target="_blank" class="text-secondary flex items-center hover:underline">
+                                                    node options documentation
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                         stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                        </label>
+                                    </div>
+
+                                    <button mat-icon-button color="warn" (click)="networkData.globalNodeOptions.splice(i, 1)">
+                                        <mat-icon>clear</mat-icon>
+                                    </button>
+                                </div>
+                            </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 w-1/2">
+                        <div class="p-4">
+                            <div class="w-full bg-white p-4 border rounded">
+                                <div class="font-medium mb-3 text-base">Node Data</div>
+                                <ng-template ngFor let-node [ngForOf]="datasetNodes">
+
+
+                                <div class="mb-2 flex items-center justify-between">
+                                    <label class="flex-1 mb-2 mr-1">
+                                        Node ID
+                                        <input type="text" [value]="node.id" disabled>
+                                    </label>
+                                    <label class="flex-1 mb-2 ml-1">
+                                        Node Label
+                                        <input type="text" [value]="node.label" disabled>
+                                    </label>
+                                    <label class="flex-1 mb-2 ml-1">
+                                        Node Group
+                                        <input type="text" [value]="node.group || ''" disabled>
+                                    </label>
+                                </div>
+
+
+                                <div class="flex items-start justify-between">
+                                    <div>
+                                        <div class="font-medium text-base">Node Options</div>
+                                        <div class="mb-3 text-xs text-gray-500">Set the options for this node.</div>
+                                    </div>
+                                    <button mat-stroked-button color="primary" (click)="node.options.unshift({})">
+                                        <div class="flex items-center">
+                                            Add Node Option
+                                        </div>
+                                    </button>
+                                </div>
+
+                                <ng-template ngFor let-nodeOption [ngForOf]="node.options" let-i=index>
+                                    <div class="mb-2 flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            Option
+                                            <select class="w-full" matNativeControl [(ngModel)]="nodeOption.key">
+                                                <option [value]="undefined">-- Select Column --</option>
+                                                <option *ngFor="let option of availableNodeOptions"
+                                                        [disabled]="_.find(node.options, {key: option})"
+                                                        [value]="option">
+                                                    {{option}}
+                                                </option>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            Option Value
+                                            <ng-template [ngIf]="nodeOption.key && visNetworkOptions.nodes[nodeOption.key].type !== 'boolean'">
+                                                <input [type]="visNetworkOptions.nodes[nodeOption.key].type" [(ngModel)]="nodeOption.value">
+                                            </ng-template>
+                                            <ng-template [ngIf]="nodeOption.key && visNetworkOptions.nodes[nodeOption.key].type === 'boolean'">
+                                                <select [(ngModel)]="nodeOption.value">
+                                                    <option [value]="true">True</option>
+                                                    <option [value]="false">False</option>
+                                                </select>
+                                            </ng-template>
+                                            <div class="text-xs font-normal text-gray-500">
+                                                <a href="https://visjs.github.io/vis-network/docs/network/nodes.html"
+                                                   target="_blank" class="text-secondary flex items-center hover:underline">
+                                                    node options documentation
+                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                         stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                    </svg>
+                                                </a>
+                                            </div>
+                                        </label>
+                                        <button mat-icon-button color="warn" (click)="node.options.splice(i, 1)">
+                                            <mat-icon>clear</mat-icon>
+                                        </button>
+                                    </div>
+                                </ng-template>
+                                    <hr class="py-2">
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </mat-tab>
+            <mat-tab label="Edges" *ngIf="dashboardItemType.type === 'network' && datasetEdges.length">
+                <div class="px-6 py-3 bg-white border-b border-gray-200">
+                    <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                        <div class="flex items-start flex-1">
+                            <div class="pt-1.5">
+                                <h1 class="text-xl font-bold text-gray-900 mb-0">Edge Options</h1>
+                                <p class="text-xs font-medium text-gray-500">
+                                    Define the options for each node.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex">
+                    <div class="flex-1 w-1/2">
+                        <div class="p-4">
+                            <div class="w-full bg-white p-4 border rounded">
+                                <div class="flex items-start justify-between">
+                                    <div>
+                                        <div class="font-medium text-base">Edge Options</div>
+                                        <div class="mb-3 text-xs text-gray-500">These options will be applied to all edges
+                                            based on the column or custom value provided.</div>
+                                    </div>
+                                    <button mat-stroked-button color="primary" (click)="addOption('globalEdgeOptions')">
+                                        <div class="flex items-center">
+                                            Add Edge Option
+                                        </div>
+                                    </button>
+                                </div>
+
+                                <ng-template ngFor let-edgeOption [ngForOf]="networkData.globalEdgeOptions" let-i=index>
+                                    <div class="mb-2 flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            Option
+                                            <select class="w-full" matNativeControl [(ngModel)]="edgeOption.key">
+                                                <option [value]="undefined">-- Select Option --</option>
+                                                <option *ngFor="let option of availableEdgeOptions"
+                                                        [disabled]="_.find(networkData.globalEdgeOptions, {key: option})"
+                                                        [value]="option">
+                                                    {{option}}
+                                                </option>
+                                            </select>
+                                            <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                        </label>
+                                        <div class="flex items-center">
+                                            <label class="flex-1 mb-2 ml-1">
+                                                Data Column
+                                                <select class="w-full" matNativeControl [(ngModel)]="edgeOption.column"
+                                                        (ngModelChange)="updateOptions(edgeOption, 'datasetEdges')">
+                                                    <option value="">-- Select Option --</option>
+                                                    <option *ngFor="let column of (edgeDataset && edgeDataset.columns) ? edgeDataset.columns : dataset.columns"
+                                                            [value]="column.name">
+                                                        {{column.title}}
+                                                    </option>
+                                                </select>
+                                                <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                            </label>
+                                            <label class="flex-1 mb-2 ml-1">
+                                                Custom Value
+                                                <ng-template [ngIf]="edgeOption.key && visNetworkOptions.edges[edgeOption.key].type !== 'boolean'">
+                                                    <input [type]="visNetworkOptions.edges[edgeOption.key].type" [(ngModel)]="edgeOption.value" (change)="updateOptions(edgeOption, 'datasetEdges')">
+                                                </ng-template>
+                                                <ng-template [ngIf]="edgeOption.key && visNetworkOptions.edges[edgeOption.key].type === 'boolean'">
+                                                    <select [(ngModel)]="edgeOption.value" (change)="updateOptions(edgeOption, 'datasetEdges')">
+                                                        <option [value]="true">True</option>
+                                                        <option [value]="false">False</option>
+                                                    </select>
+                                                </ng-template>
+                                                <div class="text-xs font-normal text-gray-500">
+                                                    <a href="https://visjs.github.io/vis-network/docs/network/nodes.html"
+                                                       target="_blank" class="text-secondary flex items-center hover:underline">
+                                                        node options documentation
+                                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                             stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                        </svg>
+                                                    </a>
+                                                </div>
+                                            </label>
+                                        </div>
+
+                                        <button mat-icon-button color="warn" (click)="networkData.globalEdgeOptions.splice(i, 1)">
+                                            <mat-icon>clear</mat-icon>
+                                        </button>
+                                    </div>
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 w-1/2">
+                        <div class="p-4">
+                            <div class="w-full bg-white p-4 border rounded">
+                                <div class="font-medium mb-3 text-base">Edge Data</div>
+                                <ng-template ngFor let-edge [ngForOf]="datasetEdges">
+
+
+                                    <div class="mb-2 flex items-center justify-between">
+                                        <label class="flex-1 mb-2 mr-1">
+                                            From Node
+                                            <input type="text" [value]="edge.from" disabled>
+                                        </label>
+                                        <label class="flex-1 mb-2 ml-1">
+                                            To Node
+                                            <input type="text" [value]="edge.to" disabled>
+                                        </label>
+                                    </div>
+
+
+                                    <div class="flex items-start justify-between">
+                                        <div>
+                                            <div class="font-medium text-base">Edge Options</div>
+                                            <div class="mb-3 text-xs text-gray-500">Set the options for this edge.</div>
+                                        </div>
+                                        <button mat-stroked-button color="primary" (click)="edge.options.unshift({})">
+                                            <div class="flex items-center">
+                                                Add Edge Option
+                                            </div>
+                                        </button>
+                                    </div>
+
+                                    <ng-template ngFor let-edgeOption [ngForOf]="edge.options" let-i=index>
+                                        <div class="mb-2 flex items-center justify-between">
+                                            <label class="flex-1 mb-2 mr-1">
+                                                Option
+                                                <select class="w-full" matNativeControl [(ngModel)]="edgeOption.key">
+                                                    <option value="">-- Select Option --</option>
+                                                    <option *ngFor="let option of availableEdgeOptions"
+                                                            [disabled]="_.find(edge.options, {key: option})"
+                                                            [value]="option">
+                                                        {{option}}
+                                                    </option>
+                                                </select>
+                                                <div class="text-xs font-normal text-gray-500">&nbsp;</div>
+                                            </label>
+                                            <label class="flex-1 mb-2 ml-1">
+                                                Option Value
+                                                <ng-template [ngIf]="edgeOption.key && visNetworkOptions.edges[edgeOption.key].type !== 'boolean'">
+                                                    <input [type]="visNetworkOptions.edges[edgeOption.key].type" [(ngModel)]="edgeOption.value">
+                                                </ng-template>
+                                                <ng-template [ngIf]="edgeOption.key && visNetworkOptions.edges[edgeOption.key].type === 'boolean'">
+                                                    <select [(ngModel)]="edgeOption.value">
+                                                        <option [value]="true">True</option>
+                                                        <option [value]="false">False</option>
+                                                    </select>
+                                                </ng-template>
+                                                <div class="text-xs font-normal text-gray-500">
+                                                    <a href="https://visjs.github.io/vis-network/docs/network/edges.html"
+                                                       target="_blank" class="text-secondary flex items-center hover:underline">
+                                                        edge options documentation
+                                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                             stroke-width="1.5" stroke="currentColor" class="h-3 w-3 ml-1">
+                                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                                        </svg>
+                                                    </a>
+                                                </div>
+                                            </label>
+                                            <button mat-icon-button color="warn" (click)="edge.options.splice(i, 1)">
+                                                <mat-icon>clear</mat-icon>
+                                            </button>
+                                        </div>
+                                    </ng-template>
+                                    <hr class="py-2">
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </mat-tab>
+            <mat-tab label="Alert">
+                <div class="relative">
+                    <div *ngIf="!canSetAlerts" class="px-4 sm:px-6 lg:px-8 mt-0">
+                        <div class="flex flex-col">
+                            <div class="mt-8 border-l-4 border-yellow-400 bg-yellow-50 p-4">
+                                <div class="flex">
+                                    <div class="flex-shrink-0">
+                                        <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"
+                                             aria-hidden="true">
+                                            <path fill-rule="evenodd"
+                                                  d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                                                  clip-rule="evenodd"/>
+                                        </svg>
+                                    </div>
+                                    <div class="ml-3">
+                                        <p class="text-sm text-yellow-700 mb-0">
+                                            Dashboard Alerts are reserved for our Accredited users. Please <a class="font-medium text-yellow-700 underline hover:text-yellow-600"
+                                                                                                          href="https://dnsrf.org/joining-options/index.html">review our Tiers</a> to find out more.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <ng-template [ngIf]="canSetAlerts">
+                        <div *ngIf="showAlertWarning"
+                             class="bg-white shadow sm:rounded-lg absolute top-4 left-0 right-0 w-96 mx-auto z-20">
+                            <div class="px-4 py-5 sm:p-6 bg-gray-50">
+                                <h3 class="text-lg leading-6 font-medium text-gray-900" id="renew-subscription-label">
+                                    Turn on Dashboard Alerts
+                                </h3>
+                                <div class="mt-2 sm:flex sm:items-start sm:justify-between">
+                                    <div class="max-w-xl text-sm text-gray-500">
+                                        <p id="renew-subscription-description">
+                                            Alerts for this dashboard are currently <b>off</b>. Slide the toggle to turn
+                                            them on and start receiving notifications.
+                                        </p>
+                                    </div>
+                                    <div class="mt-5 sm:mt-0 sm:ml-6 sm:flex-shrink-0 sm:flex sm:items-center">
+                                        <mat-slide-toggle [(ngModel)]="dashboard.alertsEnabled"></mat-slide-toggle>
+                                    </div>
+
+                                </div>
+                                <div class="flex items-center justify-between mt-2">
+                                    <button mat-stroked-button (click)="showAlertWarning = false">Close</button>
+                                    <div></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div [ngClass]="{'filter blur-sm': showAlertWarning}">
+                            <div class="px-6 py-3 bg-white border-b border-gray-200">
+                                <div class="md:flex md:items-center md:justify-between md:space-x-5">
+                                    <div class="flex items-start flex-1">
+                                        <div class="pt-1.5">
+                                            <h1 class="text-xl font-bold text-gray-900 mb-0">Alert Settings</h1>
+                                            <p class="text-xs font-medium text-gray-500">
+                                                Configure alerts and notifications for this widget.
+                                            </p>
+                                        </div>
+                                    </div>
+                                    <div class="flex flex-col-reverse justify-stretch">
+                                        <button mat-flat-button color="primary" (click)="editAlert(null)">
+                                            <mat-icon>add</mat-icon>
+                                            New Alert
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <table class="min-w-full border-separate" style="border-spacing: 0"
+                                   *ngIf="dashboardDatasetInstance && dashboardDatasetInstance.alerts && dashboardDatasetInstance.alerts.length">
+                                <thead class="bg-gray-100">
+                                <tr>
+                                    <th scope="col"
+                                        class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                        Alert
+                                    </th>
+                                    <th scope="col"
+                                        class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 text-left text-xs font-semibold text-gray-900 backdrop-blur backdrop-filter">
+                                        Configuration
+                                    </th>
+                                    <th scope="col"
+                                        class="sticky top-0 z-10 border-b border-gray-300 bg-gray-50 bg-opacity-75 py-3.5 px-4 backdrop-blur backdrop-filter">
+                                        <span class="sr-only">Edit</span>
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody class="bg-white">
+                                <tr *ngFor="let alert of dashboardDatasetInstance.alerts; let i = index">
+                                    <td class="whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm font-medium text-gray-900">
+                                        {{alert.title}}
+                                    </td>
+                                    <td class="whitespace-nowrap border-b border-gray-200 py-2 px-4 text-sm text-gray-500 capitalize"
+                                        [innerHTML]="getAlertDetails(alert)"></td>
+                                    <td class="relative whitespace-nowrap border-b border-gray-200 py-2 px-4 text-right text-sm">
+                                        <div class="align-center justify-end">
+                                            <button mat-button color="primary" (click)="editAlert(alert, i)"> Edit
+                                            </button>
+                                            <div class="divider"></div>
+                                            <button mat-button color="warn" (click)="deleteAlert(i)"> Delete</button>
+                                        </div>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                            <div class="p-4"
+                                 *ngIf="dashboardDatasetInstance && (!dashboardDatasetInstance.alerts || !dashboardDatasetInstance.alerts.length)">
+                                <button type="button" (click)="editAlert(null)"
+                                        class="relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none">
+
+                                    <div class="relative inline-block">
+                                        <mat-icon
+                                            class="mx-auto text-6xl h-14 w-20 text-gray-300">notifications_active
+                                        </mat-icon>
+                                        <svg xmlns="http://www.w3.org/2000/svg"
+                                             class="right-0 bottom-0 absolute h-8 w-8 text-gray-400" fill="none"
+                                             viewBox="0 0 24 24"
+                                             stroke="currentColor" stroke-width="4">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+                                        </svg>
+                                    </div>
+
+                                    <span class="mt-2 block text-sm font-medium text-gray-900">Create New Alert</span>
+                                </button>
+                            </div>
+                        </div>
+                    </ng-template>
+
+                </div>
+            </mat-tab>
+        </mat-tab-group>
+    </rsz-layout>
+
+</div>
+
+<div class="configure-footer">
+    <div></div>
+    <button mat-flat-button color="primary" (click)="saveDashboard()">
+        <div class="flex items-center">
+            <mat-icon class="mr-1">chevron_left</mat-icon>
+            Back to Dashboard
+        </div>
+    </button>
+</div>