ng-kinintel 0.0.317

package/src/lib/components/datasource/document-datasource/document-datasource.component.html

@@ -0,0 +1,558 @@
+<div class="p-6 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-2xl font-bold text-gray-900">
+                    {{!datasourceKey ? 'Document Datasource' : (datasource.title || 'Document Datasource')}}
+                </h1>
+                <p class="text-sm font-medium text-gray-500">
+                    <ng-template [ngIf]="!datasourceKey">
+                        Upload your documents using the form below.
+                    </ng-template>
+                    <ng-template [ngIf]="datasourceKey">
+                        View your existing documents below and adjust any document settings here.
+                    </ng-template>
+                </p>
+            </div>
+        </div>
+        <div class="mt-6 flex flex-col-reverse justify-stretch" *ngIf="datasourceKey">
+            <button type="button" (click)="showUpload = !showUpload"
+                    class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary focus:outline-none">
+                Upload Additional Documents
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="bg-blue-50 p-4" *ngIf="uploading">
+    <div class="flex">
+        <div class="flex-shrink-0">
+            <!-- Heroicon name: solid/information-circle -->
+            <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" 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 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                      clip-rule="evenodd"/>
+            </svg>
+        </div>
+        <div class="ml-3 w-full">
+            <p class="text-sm text-primary font-medium">Progress</p>
+            <ng-template [ngIf]="uploadResults && uploadResults.progressData">
+                <div class="text-primary my-2">Uploaded {{uploadResults.progressData.completed}}
+                    /{{uploadResults.progressData.total}}</div>
+                <mat-progress-bar class="w-full my-4" mode="determinate"
+                                  [value]="(uploadResults.progressData.completed/uploadResults.progressData.total) * 100"></mat-progress-bar>
+            </ng-template>
+            <ng-template [ngIf]="!uploadResults || !uploadResults.progressData">
+                <div class="text-primary my-2">Preparing Upload...</div>
+                <mat-progress-bar class="w-full my-4" mode="buffer"></mat-progress-bar>
+            </ng-template>
+        </div>
+    </div>
+</div>
+
+<div class="bg-green-50 p-4" *ngIf="!failedResults.length && uploadResults && !uploading">
+    <div class="flex">
+        <div class="flex-shrink-0">
+            <!-- Heroicon name: solid/check-circle -->
+            <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                 fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                      clip-rule="evenodd"/>
+            </svg>
+        </div>
+        <div class="ml-3">
+            <h3 class="text-sm font-medium text-green-800">Upload completed</h3>
+            <div class="mt-2 text-sm text-green-700">
+                <p><b>{{uploadResults.progressData.completed}}</b> files were processed successfully out of
+                    <b>{{uploadResults.progressData.total}}</b> uploaded items.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="bg-red-50 p-4" *ngIf="failedResults.length && uploadResults">
+    <div class="flex">
+        <div class="flex-shrink-0">
+            <!-- Heroicon name: solid/x-circle -->
+            <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                 aria-hidden="true">
+                <path fill-rule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                      clip-rule="evenodd"/>
+            </svg>
+        </div>
+        <div class="ml-3">
+            <h3 class="text-sm font-medium text-red-800">There were {{failedResults.length}} errors with your
+                submission</h3>
+            <div class="mt-2 text-sm text-red-700">
+                <ul role="list" class="list-disc pl-5 space-y-1">
+                    <li *ngFor="let failedResult of failedResults">
+                        {{failedResult.message}}
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div *ngIf="showUpload"
+     class="space-y-8 p-6 bg-gray-50 border-b">
+    <div class="space-y-8 sm:space-y-5">
+        <div>
+            <div class="space-y-6 sm:space-y-5">
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
+                    <label class="block text-sm font-medium text-gray-700">
+                        Upload Documents
+                        <div class="text-xs font-normal text-gray-500">
+                            Additional documents to be processed.
+                        </div>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <div *ngIf="!files || !files.length"
+                             (drop)="dropHandler($event)" (dragover)="dragOverHandler($event)"
+                             class="w-full flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+                            <div class="space-y-1 text-center">
+                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none"
+                                     viewBox="0 0 48 48" aria-hidden="true">
+                                    <path
+                                        d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                                <div class="flex text-sm text-gray-600">
+                                    <label
+                                        class="relative cursor-pointer rounded-md font-medium text-secondary focus-within:outline-none">
+                                        <span>Select file(s) to upload</span>
+                                        <input name="additionalUpload" multiple type="file" class="sr-only"
+                                               (change)="fileUpload($event)">
+                                    </label>
+                                    <p class="pl-1 mb-0">or drag and drop</p>
+                                </div>
+                                <p class="text-xs text-gray-500">.docx, .txt, .pfd, .zip</p>
+                            </div>
+                        </div>
+                        <div *ngIf="files && files.length"
+                             class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                            <table class="min-w-full divide-y divide-gray-300 block overflow-y-auto max-h-48">
+                                <thead class="bg-gray-50">
+                                <tr>
+                                    <th scope="col" colspan="2"
+                                        class="sticky top-0 z-10 bg-gray-100 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                                        Selected File Preview
+                                        <span class="text-xs text-gray-500 lowercase ml-4 font-normal">
+                                            click <span class="font-medium">'Upload Files'</span> to upload the selected files.</span>
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody class="divide-y divide-gray-200 bg-white">
+                                <tr *ngFor="let file of files; let i = index">
+                                    <td class="whitespace-nowrap py-2 pl-4 pr-3 text-xs font-medium text-gray-900 sm:pl-6">
+                                        {{file.name}}
+                                    </td>
+                                    <td class="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                        <a (click)="removeFile(i)" class="text-danger">Remove</a>
+                                    </td>
+                                </tr>
+
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+
+    <div class="">
+        <div class="flex justify-end">
+            <button type="button" (click)="showUpload = false;files = null"
+                    class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none">
+                Cancel
+            </button>
+
+            <button type="submit" [disabled]="!files"
+                    class="disabled:opacity-50 ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-secondary focus:outline-none"
+                    (click)="uploadFiles()">Upload Files
+            </button>
+        </div>
+    </div>
+</div>
+
+<div class="transformation-listing py-2 bg-gray-50 cursor-pointer"
+     (click)="showSettings = !showSettings" [ngClass]="{'border-b': !showSettings}">
+    <a class="list-title flex items-center">
+        Settings&nbsp;
+        <mat-icon *ngIf="!showSettings">expand_more</mat-icon>
+        <mat-icon *ngIf="showSettings">expand_less</mat-icon>
+    </a>
+    <div class="ml-6 text-xs text-gray-500">
+        Adjust the rules around how the uploaded documents will
+        be processed.
+    </div>
+</div>
+
+<div *ngIf="showSettings" [ngClass]="{'border-b': showSettings}"
+     class="space-y-8 divide-y divide-gray-200 p-6 bg-gray-50">
+    <div class="space-y-8 divide-y divide-gray-200 sm:space-y-5">
+        <div>
+            <div class="space-y-6 sm:space-y-5">
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                        Title
+                        <div class="text-xs font-normal text-gray-500">Enter the name to identify this data source</div>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <input type="text" [(ngModel)]="datasource.title"
+                               class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
+
+                    </div>
+                </div>
+
+                <div *ngIf="!datasourceKey"
+                     class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                        Upload Documents
+                        <div class="text-xs font-normal text-gray-500">
+                            The documents to be processed.
+                        </div>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <div *ngIf="!files || !files.length"
+                             (drop)="dropHandler($event)" (dragover)="dragOverHandler($event)"
+                             class="w-full flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+                            <div class="space-y-1 text-center">
+                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none"
+                                     viewBox="0 0 48 48" aria-hidden="true">
+                                    <path
+                                        d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                                <div class="flex text-sm text-gray-600">
+                                    <label
+                                        class="relative cursor-pointer rounded-md font-medium text-secondary focus-within:outline-none">
+                                        <span>Select file(s) to upload</span>
+                                        <input name="additionalUpload" multiple type="file" class="sr-only"
+                                               (change)="fileUpload($event)">
+                                    </label>
+                                    <p class="pl-1 mb-0">or drag and drop</p>
+                                </div>
+                                <p class="text-xs text-gray-500">.docx, .txt, .pfd, .zip</p>
+                            </div>
+                        </div>
+                        <div *ngIf="files"
+                             class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
+                            <table class="min-w-full divide-y divide-gray-300 block overflow-y-auto max-h-48">
+                                <thead class="bg-gray-50">
+                                <tr>
+                                    <th scope="col" colspan="2"
+                                        class="sticky top-0 z-10 bg-gray-100 py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
+                                        Selected File Preview
+                                        <span class="text-xs text-gray-500 lowercase ml-4 font-normal">
+                                            click <span class="font-medium">'Upload Files'</span> to upload the selected files.</span>
+                                    </th>
+                                </tr>
+                                </thead>
+                                <tbody class="divide-y divide-gray-200 bg-white">
+                                <tr *ngFor="let file of files; let i = index">
+                                    <td class="whitespace-nowrap py-2 pl-4 pr-3 text-xs font-medium text-gray-900 sm:pl-6">
+                                        {{file.name}}
+                                    </td>
+                                    <td class="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                        <a (click)="removeFile(i)" class="text-danger">Remove</a>
+                                    </td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+
+                <ng-template [ngIf]="showCustomParser">
+                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                            Custom Document Parser
+                            <div class="text-xs font-normal text-gray-500">
+                                Use a custom document parser to process the documents.
+                            </div>
+                        </label>
+                        <div class="mt-1 sm:mt-0 sm:col-span-2">
+                            <label class="mb-4 text-sm">
+                                Select Custom Document Parser
+                                <input type="text" [matAutocomplete]="autoParsers"
+                                       [(ngModel)]="datasource.config.customDocumentParser"
+                                       (keyup)="searchParser.next($event.target.value)"
+                                       placeholder="Search for a custom parser">
+                                <mat-autocomplete #autoParsers="matAutocomplete">
+                                    <mat-option *ngFor="let parser of documentParsers" [value]="parser.value">
+                                        {{parser.title}}
+                                    </mat-option>
+                                </mat-autocomplete>
+                                <small class="font-normal">Start typing name to view available parsers</small>
+                            </label>
+                        </div>
+                    </div>
+                </ng-template>
+
+                <ng-template [ngIf]="!datasource.config.customDocumentParser">
+
+
+                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                            Indexing
+                            <div class="text-xs font-normal text-gray-500">
+                                Set whether you want the content of the documents to be indexed
+                            </div>
+                        </label>
+                        <div class="mt-1 sm:mt-0 sm:col-span-2">
+                            <mat-checkbox class="block mb-4" [(ngModel)]="datasource.config.indexContent"
+                                          (ngModelChange)="indexDocumentChange($event)">Index Document
+                                Content
+                            </mat-checkbox>
+                            <ng-template [ngIf]="datasource.config.indexContent">
+                                <div class="max-w-lg flex rounded-md shadow-sm mb-2">
+                                <span
+                                    class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"> Min phrase length (words) </span>
+                                    <input type="number" name="minPhrase" [min]="1"
+                                           [(ngModel)]="datasource.config.minPhraseLength"
+                                           class="flex-1 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300">
+                                </div>
+                                <div class="max-w-lg flex rounded-md shadow-sm">
+                                <span
+                                    class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"> Max phrase length (words) </span>
+                                    <input type="number" name="maxPhrase" [min]="1"
+                                           [(ngModel)]="datasource.config.maxPhraseLength"
+                                           class="flex-1 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300">
+                                </div>
+                            </ng-template>
+                        </div>
+                    </div>
+
+                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                            Chunking
+                            <div class="text-xs font-normal text-gray-500">
+                                Set whether you want to split the documents into chunks for analysis
+                            </div>
+                        </label>
+                        <div class="mt-1 sm:mt-0 sm:col-span-2">
+                            <mat-checkbox class="block mb-4" [(ngModel)]="datasource.config.chunkContent" (ngModelChange)="chunkContentChange($event)"> Chunk Document Content
+                            </mat-checkbox>
+                            <ng-template [ngIf]="datasource.config.chunkContent">
+                                <mat-checkbox class="block mb-4" [(ngModel)]="datasource.config.indexChunksByAI">Index Chunks by AI
+                                </mat-checkbox>
+                            </ng-template>
+                        </div>
+
+                    </div>
+
+                    <div *ngIf="datasource.config.indexContent"
+                         class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                        <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                            Stop Words
+                            <div class="text-xs font-normal text-gray-500">
+                                A list of words to exclude from being indexed.
+                            </div>
+                        </label>
+                        <div class="mt-1 sm:mt-0 sm:col-span-2">
+                            <mat-checkbox class="block mb-2" [(ngModel)]="builtInStopWords.builtIn"
+                                          (ngModelChange)="updateBuiltInStopWordConfig($event)">Use Built In
+                            </mat-checkbox>
+
+                            <ng-template [ngIf]="builtInStopWords.builtIn && datasource.config.maxPhraseLength > 1">
+                                <label class="mb-4">
+                                    Min phrase length for including stop words
+                                    <input type="number" [min]="2"
+                                           [(ngModel)]="builtInStopWords.minPhraseLength">
+                                    <small class="font-normal">The built it stop words will be included when the phrase
+                                        length is greater than or equal to this value.</small>
+                                </label>
+                            </ng-template>
+
+                            <hr class="my-4" *ngIf="_.filter(datasource.config.stopWords, 'custom').length">
+
+                            <ng-template ngFor let-stopWord [ngForOf]="_.filter(datasource.config.stopWords, 'custom')"
+                                         let-i=index>
+                                <div class="flex items-center justify-between">
+                                    <div>
+                                        <label class="mb-4 text-sm">
+                                            Datasource
+                                            <input type="text" [matAutocomplete]="autoDatasets"
+                                                   [value]="stopWord.datasource ? stopWord.datasource.title : ''"
+                                                   (keyup)="searchText.next($event.target.value)"
+                                                   placeholder="Search for a datasource">
+                                            <mat-autocomplete #autoDatasets="matAutocomplete" [displayWith]="displayFn">
+                                                <mat-option *ngFor="let datasource of datasources" [value]="datasource"
+                                                            (onSelectionChange)="updateDatasource(stopWord, $event.source.value)">
+                                                    {{datasource.title}}
+                                                </mat-option>
+                                            </mat-autocomplete>
+                                            <small class="font-normal">Start typing name to view available
+                                                datasources</small>
+                                        </label>
+
+
+                                        <div *ngIf="stopWord.selectedDatasource && stopWord.selectedDatasource.columns">
+                                            <label class="mb-4">
+                                                Stop Words Column
+                                                <select matNativeControl [(ngModel)]="stopWord.datasourceColumn">
+                                                    <option *ngFor="let column of stopWord.selectedDatasource.columns"
+                                                            [ngValue]="column.name">
+                                                        {{column.title}}
+                                                    </option>
+                                                </select>
+                                                <small class="font-normal">Select the column to use for the stop
+                                                    words</small>
+                                            </label>
+
+                                            <label class="mb-4" *ngIf="datasource.config.maxPhraseLength > 1">
+                                                Min phrase length for including stop words
+                                                <input type="number" [min]="2"
+                                                       [(ngModel)]="stopWord.minPhraseLength">
+                                                <small
+                                                    class="font-normal">The {{stopWord.datasource ? stopWord.datasource.title : ''}}
+                                                    stop words will be included when the
+                                                    phrase length is greater than or equal to this value.</small>
+                                            </label>
+                                        </div>
+                                    </div>
+
+                                    <button mat-icon-button color="warn" (click)="removeCustomStopWord(i)">
+                                        <mat-icon>clear</mat-icon>
+                                    </button>
+                                </div>
+
+                                <hr class="my-4">
+                            </ng-template>
+
+                            <button mat-button color="primary"
+                                    (click)="datasource.config.stopWords.push({custom: true})">
+                                <mat-icon>add</mat-icon>
+                                Add Custom Stop Words
+                            </button>
+
+                        </div>
+                    </div>
+
+                </ng-template>
+
+                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                    <label class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
+                        Storage Options
+                        <div class="text-xs font-normal text-gray-500">
+                            Securely save an original copy of the document and/or its original text.
+                        </div>
+                    </label>
+                    <div class="mt-1 sm:mt-0 sm:col-span-2">
+                        <mat-checkbox class="block mb-2" [(ngModel)]="datasource.config.storeOriginal">Store
+                            Original File
+                        </mat-checkbox>
+                        <mat-checkbox class="block mb-2" [(ngModel)]="datasource.config.storeText">Store Document
+                            Text
+                        </mat-checkbox>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+
+    <div class="pt-5">
+        <div class="flex justify-end">
+            <button type="button"
+                    class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none">
+                Cancel
+            </button>
+            <button type="submit" [disabled]="!datasource.title"
+                    class="disabled:opacity-50 ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-secondary focus:outline-none"
+                    (click)="save()">
+                <ng-template [ngIf]="!datasourceKey">
+                    Create Datasource
+                </ng-template>
+                <ng-template [ngIf]="datasourceKey">
+                    Update Settings
+                </ng-template>
+            </button>
+        </div>
+    </div>
+</div>
+
+<ng-template [ngIf]="evaluatedDatasource">
+
+
+    <div class="overflow-scroll">
+        <table class="min-w-full border-separate bg-white" style="border-spacing: 0">
+            <thead class="bg-gray-100">
+            <tr>
+                <th *ngFor="let column of evaluatedDatasource.columns" 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">
+                    {{column.title}}
+                </th>
+            </tr>
+            </thead>
+            <tbody class="bg-white">
+            <tr *ngFor="let data of evaluatedDatasource.allData">
+                <td *ngFor="let column of evaluatedDatasource.columns; let i = index"
+                    [ngClass]="{'font-medium': i === 0}"
+                    class="border-b border-gray-200 py-2 px-4 text-sm text-gray-900">
+                    <ng-template [ngIf]="column.name === 'original_link'">
+                        <a class="flex items-center text-cta hover:underline" (click)="downloadDoc(data[column.name])">
+                            {{data[column.name]}}
+                            <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4" fill="none" viewBox="0 0 24 24"
+                                 stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                            </svg>
+                        </a>
+                    </ng-template>
+                    <ng-template [ngIf]="column.name !== 'original_link'">
+                        <ng-template [ngIf]="data[column.name] && String(data[column.name]).length <= 100">
+                            {{data[column.name]}}
+                        </ng-template>
+                        <ng-template [ngIf]="data[column.name] && String(data[column.name]).length > 100">
+                            <div>{{data[column.name].substring(0, 100) + '...'}}</div>
+                            <a (click)="viewFullItemData(data[column.name], column.name)"
+                               class="flex items-center text-sm text-cta hover:underline">
+                                view more
+                                <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4" fill="none"
+                                     viewBox="0 0 24 24"
+                                     stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                                </svg>
+                            </a>
+                        </ng-template>
+                        <ng-template [ngIf]="!data[column.name]">
+                            {{data[column.name]}}
+                        </ng-template>
+                    </ng-template>
+                </td>
+            </tr>
+            </tbody>
+
+        </table>
+
+    </div>
+    <div class="bg-white p-4 flex align-center justify-end">
+        <select [value]="limit" (change)="pageSizeChange($event.target.value)" class="mr-8">
+            <option [value]="1">1</option>
+            <option [value]="5">5</option>
+            <option [value]="10">10</option>
+            <option [value]="25">25</option>
+            <option [value]="50">50</option>
+            <option [value]="100">100</option>
+            <option [value]="250">250</option>
+            <option [value]="1000">1000</option>
+        </select>
+        <button mat-icon-button class="mr-4" (click)="decreaseOffset()" [disabled]="page <= 1">
+            <mat-icon>chevron_left</mat-icon>
+        </button>
+        <button mat-icon-button (click)="increaseOffset()" [disabled]="endOfResults">
+            <mat-icon>chevron_right</mat-icon>
+        </button>
+    </div>
+
+</ng-template>

package/src/lib/components/datasource/document-datasource/document-datasource.component.sass

@@ -0,0 +1,84 @@
+:host
+    display: block
+    background-color: white
+
+.cell-header
+    width: 100%
+    display: flex
+    align-items: center
+    justify-content: space-between
+    &.end
+        justify-content: flex-end
+
+.transformation-listing
+    display: flex
+    align-items: center
+    flex-wrap: wrap
+    width: 100%
+    border-bottom-color: #ddd
+    min-height: 47px
+    .list-title
+        text-transform: uppercase
+        font-size: .75rem
+        padding: 0 1rem
+        border-right: 2px solid #ddd
+        color: #4c4c4c
+        font-weight: 500
+        letter-spacing: 1px
+    .badge-item
+        display: flex
+        align-items: center
+        margin-left: 1rem
+        padding-left: 1rem
+        border-radius: 20px
+        background-color: white
+        border: 1px solid #ddd
+        height: 30px
+        &.exclude
+            opacity: .8
+        &:hover
+            background-color: #fcfcfc
+        span
+            margin-right: .5rem
+            color: rgba(0,0,0,0.54)
+        button.mat-icon-button
+            width: 33px
+            height: 33px
+            line-height: 33px
+            mat-icon
+                font-size: 20px
+                height: 20px
+                width: 20px
+                line-height: 20px
+                color: rgba(0,0,0,0.54)
+
+table
+    position: relative
+    border-collapse: collapse
+    &.sticky
+        th
+            position: sticky
+            top: 0
+            background-color: whitesmoke
+            border-top: none !important
+            border-bottom: none !important
+            box-shadow: inset 0 -1px 0 #ddd
+    th
+        &.settings
+            padding: 0
+    td
+        max-width: 400px
+        word-wrap: break-word
+        padding-top: .5rem
+        padding-bottom: .5rem
+        padding-right: 1rem
+        min-width: 100px
+        width: 1%
+        &.settings
+            max-width: 25px
+            min-width: 25px
+    &::-webkit-scrollbar
+        width: .75em
+        background: transparent
+    &::-webkit-scrollbar-thumb
+        background: #d2d2d2