fix: viya deploy load data timing

## [6.14.10](https://git.datacontroller.io/dc/dc/compare/v6.14.9...v6.14.10) (2025-06-02)

### Bug Fixes

* bump core ([0e8503e](0e8503ed2b))
* default to home directory for SAS Drive in Viya ([9682b54](9682b548e6))

.gitea/workflows/build.yaml

@@ -48,4 +48,94 @@ jobs:
       - name: Production Build
         run: |
           cd client
-          npm run build
+          npm run build
+
+  Build-and-test-development:
+    runs-on: ubuntu-latest
+    needs: Build-production-and-ng-test
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.14.0
+
+      - name: Write .npmrc file
+        run: |
+          touch client/.npmrc
+          echo '${{ secrets.NPMRC}}' > client/.npmrc
+
+      - run: apt-get update
+      - run: wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+      - run: apt install -y ./google-chrome*.deb;
+      - run: export CHROME_BIN=/usr/bin/google-chrome
+      - run: apt-get update -y
+      - run: apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+      - run: apt -y install jq
+
+      - name: Write cypress credentials
+        run: echo "$CYPRESS_CREDS" > ./client/cypress.env.json
+        shell: bash
+        env:
+          CYPRESS_CREDS: ${{ secrets.CYPRESS_CREDS }}
+
+      - name: Install dependencies
+        run: |
+          cd client
+          # Decrypt and Install sheet
+          echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
+          npm ci
+
+      # Install pm2 and prepare SASJS server
+      - run: npm i -g pm2
+      - run: curl -L https://github.com/sasjs/server/releases/latest/download/linux.zip > linux.zip
+      - run: unzip linux.zip
+      - run: touch .env
+      - run: echo RUN_TIMES=js >> .env
+      - run: echo NODE_PATH=node >> .env
+      - run: echo CORS=enable >> .env
+      - run: echo WHITELIST=http://localhost:4200 >> .env
+      - run: cat .env
+      - run: pm2 start api-linux --wait-ready
+
+      - name: Deploy mocked services
+        run: |
+          cd ./sas/mocks/sasjs
+          npm install -g @sasjs/cli
+          npm install -g replace-in-files-cli
+          sasjs cbd -t server-ci
+          # sasjs request services/admin/makedata -t server-ci -d ./deploy/makeData4GL.json -c ./deploy/requestConfig.json -o ./output.json
+
+      - name: Install ZIP
+        run: |
+          apt-get update
+          apt-get install zip
+
+      - name: Prepare and run frontend and cypress
+        run: |
+          cd ./client
+          mv ./cypress.env.example.json ./cypress.env.json
+          replace-in-files --regex='"username".*' --replacement='"username":"'${{ secrets.CYPRESS_USERNAME_SASJS }}'",' ./cypress.env.json
+          replace-in-files --regex='"password".*' --replacement='"password":"'${{ secrets.CYPRESS_PWD_SASJS }}'" ' ./cypress.env.json
+          cat ./cypress.env.json
+          npm run postinstall
+          # Prepare index.html to SASJS local
+          replace-in-files --regex='serverUrl=".*?"' --replacement='serverUrl="http://localhost:5000"' ./src/index.html
+          replace-in-files --regex='appLoc=".*?"' --replacement='appLoc="/Public/app/devtest"' ./src/index.html
+          replace-in-files --regex='serverType=".*?"' --replacement='serverType="SASJS"' ./src/index.html
+          replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
+          cat ./cypress.config.ts
+          # Start frontend and run cypress
+          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+
+      - name: Zip Cypress videos
+        if: always()
+        run: |
+          zip -r cypress-videos ./client/cypress/videos
+
+      - name: Add cypress videos artifacts
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-videos.zip
+          path: cypress-videos.zip

.gitea/workflows/release.yaml

@@ -136,7 +136,7 @@ jobs:
           replace-in-files --regex='"hosturl".*' --replacement='hosturl:"http://localhost:4200",' ./cypress.config.ts
           cat ./cypress.config.ts
           # Start frontend and run cypress
-          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
+          npm start & npx wait-on http://localhost:4200 && npx cypress run --browser chrome --spec "cypress/e2e/liveness.cy.ts,cypress/e2e/editor.cy.ts,cypress/e2e/excel-multi-load.cy.ts,cypress/e2e/excel.cy.ts,cypress/e2e/csv.cy.ts,cypress/e2e/filtering.cy.ts,cypress/e2e/licensing.cy.ts"
 
       - name: Zip Cypress videos
         if: always()

CHANGELOG.md

@@ -1,3 +1,139 @@
+## [6.14.10](https://git.datacontroller.io/dc/dc/compare/v6.14.9...v6.14.10) (2025-06-02)
+
+
+### Bug Fixes
+
+* bump core ([0e8503e](https://git.datacontroller.io/dc/dc/commit/0e8503ed2bb22a0fc3924ac929e7f19626772e0a))
+* default to home directory for SAS Drive in Viya ([9682b54](https://git.datacontroller.io/dc/dc/commit/9682b548e6106d99d97dcc023a35d93addfd5170))
+
+## [6.14.9](https://git.datacontroller.io/dc/dc/compare/v6.14.8...v6.14.9) (2025-06-02)
+
+
+### Bug Fixes
+
+* default DC path for viya ([f3125ff](https://git.datacontroller.io/dc/dc/commit/f3125ff4641e47e33cb203228f5b1014ea3343bc))
+
+## [6.14.8](https://git.datacontroller.io/dc/dc/compare/v6.14.7...v6.14.8) (2025-05-28)
+
+
+### Bug Fixes
+
+* CSP issues, clarity local library build, fixed some style issues ([841201a](https://git.datacontroller.io/dc/dc/commit/841201adab582149b1cca3a42e75f7cac75167f9))
+* deploy page, makedata error handling, added local build of clarity, to address clr-stack-view CSP issues (inline styles) ([7b5e7ae](https://git.datacontroller.io/dc/dc/commit/7b5e7ae18414152f9b9d8f2d94fc94de43152003))
+* improved deploy flow for Viya ([9604661](https://git.datacontroller.io/dc/dc/commit/9604661f3b76111387bc9474cc26348d73ab112e))
+* requests modal causing VIYA CSP errors ([1dc6934](https://git.datacontroller.io/dc/dc/commit/1dc69341cadb837e1f11624d5cf35788bbb98d96))
+* sas viya service init timing issue ([9de04e9](https://git.datacontroller.io/dc/dc/commit/9de04e9a0ce016e1a9fb8b19c656077079ddcf2f))
+* scss of components transferred to the global styles.scss so we do not cause CSP (inline styles) issues when streaming to Viya ([6c171a6](https://git.datacontroller.io/dc/dc/commit/6c171a6394aba8104fe0f50aa8a4e6b9fa8023a2))
+* viya deploy page improved flow ([4bd2154](https://git.datacontroller.io/dc/dc/commit/4bd215491f8cdc68f78bade68e7cb98e07edc81e))
+
+## [6.14.7](https://git.datacontroller.io/dc/dc/compare/v6.14.6...v6.14.7) (2025-05-08)
+
+
+### Bug Fixes
+
+* updated hot, clarity and improved accessibility score. ([2844c70](https://git.datacontroller.io/dc/dc/commit/2844c70f9507036216b8b621900c2bb9010c1d34))
+
+## [6.14.6](https://git.datacontroller.io/dc/dc/compare/v6.14.5...v6.14.6) (2025-04-03)
+
+
+### Bug Fixes
+
+* history table modal links styling ([c63fcdd](https://git.datacontroller.io/dc/dc/commit/c63fcdd465950ada439d7d69622a3886e8f3a783))
+
+## [6.14.5](https://git.datacontroller.io/dc/dc/compare/v6.14.4...v6.14.5) (2025-03-24)
+
+
+### Bug Fixes
+
+* improving accessibility lighthouse score ([7f3577c](https://git.datacontroller.io/dc/dc/commit/7f3577c3ef9f44e55a58bc64fbf89a3a64006dd4))
+* prevent errors when using sqlrc in a DI job in a HOOK ([d1f0879](https://git.datacontroller.io/dc/dc/commit/d1f0879f0acf7e816c80f7635fd02f4f284214ed))
+* user profile style fix, new select library and table icons ([69f8830](https://git.datacontroller.io/dc/dc/commit/69f883034fabbed31aa5d832e20561c4ae3042db))
+
+## [6.14.4](https://git.datacontroller.io/dc/dc/compare/v6.14.3...v6.14.4) (2025-03-18)
+
+
+### Bug Fixes
+
+* removing cli dependency warnings2 ([43c0f73](https://git.datacontroller.io/dc/dc/commit/43c0f73c2189ff762986a964caae6b0b108164fc))
+
+## [6.14.3](https://git.datacontroller.io/dc/dc/compare/v6.14.2...v6.14.3) (2025-03-15)
+
+
+### Bug Fixes
+
+* NLDAT & NLDATM formats are now being staged ([3f5cb1e](https://git.datacontroller.io/dc/dc/commit/3f5cb1e2defe390220e904e4bf04a165cb31fec4))
+
+## [6.14.2](https://git.datacontroller.io/dc/dc/compare/v6.14.1...v6.14.2) (2025-03-10)
+
+
+### Bug Fixes
+
+* improving instructions for setup ([83b3d77](https://git.datacontroller.io/dc/dc/commit/83b3d775b6e33653b087ca9f4eb3ad5b0dbbd479))
+
+## [6.14.1](https://git.datacontroller.io/dc/dc/compare/v6.14.0...v6.14.1) (2025-03-05)
+
+
+### Bug Fixes
+
+* handle national language datetime formats ([149e318](https://git.datacontroller.io/dc/dc/commit/149e318a8787be0109f25aeec3a1270ea75a97b2))
+* updating logic to use NLDAT formats ([95289aa](https://git.datacontroller.io/dc/dc/commit/95289aa9524d3cb2b1c248cfb84f6b0d0a490c32))
+
+# [6.14.0](https://git.datacontroller.io/dc/dc/compare/v6.13.2...v6.14.0) (2025-02-26)
+
+
+### Features
+
+* uses SORTSEQ=LINGUISTIC for the services/metanav/metadetails service ([a45f5bb](https://git.datacontroller.io/dc/dc/commit/a45f5bb3b27a86da5f55ff28c9c7669956484ddf))
+
+## [6.13.2](https://git.datacontroller.io/dc/dc/compare/v6.13.1...v6.13.2) (2025-02-26)
+
+
+### Bug Fixes
+
+* get metadata email if exists ([1bd0eef](https://git.datacontroller.io/dc/dc/commit/1bd0eef913593579771c647d80010ce628c00819))
+
+## [6.13.1](https://git.datacontroller.io/dc/dc/compare/v6.13.0...v6.13.1) (2025-02-18)
+
+
+### Bug Fixes
+
+* Avoiding LATIN1 unprintables in various UI locations ([bce1fd5](https://git.datacontroller.io/dc/dc/commit/bce1fd57ef397cfdd030552c3f424a8407174729))
+* updated @sasjs/adapter, crypto-browserify ([4e64f28](https://git.datacontroller.io/dc/dc/commit/4e64f28732868b07ec2ab403912bd384c62c7e1d))
+
+# [6.13.0](https://git.datacontroller.io/dc/dc/compare/v6.12.3...v6.13.0) (2025-01-31)
+
+
+### Bug Fixes
+
+* editor page csv upload ([217220f](https://git.datacontroller.io/dc/dc/commit/217220ffaaf688133321cc68d770aaf1e50590a9))
+
+
+### Features
+
+* csv test ([c53ab85](https://git.datacontroller.io/dc/dc/commit/c53ab85107f10c023117a099cc06321afc3e1f03))
+
+## [6.12.3](https://git.datacontroller.io/dc/dc/compare/v6.12.2...v6.12.3) (2025-01-27)
+
+
+### Bug Fixes
+
+* adding missing=STRING to three services ([30d5e51](https://git.datacontroller.io/dc/dc/commit/30d5e51d0b9cf27774038476bd90559600952304))
+
+## [6.12.2](https://git.datacontroller.io/dc/dc/compare/v6.12.1...v6.12.2) (2025-01-27)
+
+
+### Bug Fixes
+
+* unnecessary zeros when adding new row (data schema default values) ([a1a9051](https://git.datacontroller.io/dc/dc/commit/a1a90519c535ca25e00822b4d3358c991ac9662e))
+
+## [6.12.1](https://git.datacontroller.io/dc/dc/compare/v6.12.0...v6.12.1) (2024-12-31)
+
+
+### Bug Fixes
+
+* no upcase of pk fields in MPE_TABLES in delete scenario ([3de095f](https://git.datacontroller.io/dc/dc/commit/3de095fe7797cde60f0e232c188305fe423c27eb)), closes [#134](https://git.datacontroller.io/dc/dc/issues/134)
+* reduce length of tmp table names.  Closes [#130](https://git.datacontroller.io/dc/dc/issues/130) ([f9c2491](https://git.datacontroller.io/dc/dc/commit/f9c2491ab6e7b528b7ffc011fd9e45c963c5f6bf))
+
 # [6.12.0](https://git.datacontroller.io/dc/dc/compare/v6.11.1...v6.12.0) (2024-09-02)
 
 

client/cypress/e2e/csv.cy.ts

@@ -0,0 +1,115 @@
+import { Callbacks } from 'cypress/types/jquery/index'
+
+const username = Cypress.env('username')
+const password = Cypress.env('password')
+const hostUrl = Cypress.env('hosturl')
+const appLocation = Cypress.env('appLocation')
+const longerCommandTimeout = Cypress.env('longerCommandTimeout')
+const serverType = Cypress.env('serverType')
+const libraryToOpenIncludes = Cypress.env(`libraryToOpenIncludes_${serverType}`)
+const fixturePath = 'csvs/'
+
+context('excel tests: ', function () {
+  this.beforeAll(() => {
+    cy.visit(`${hostUrl}/SASLogon/logout`)
+    cy.loginAndUpdateValidKey(true)
+  })
+
+  this.beforeEach(() => {
+    cy.visit(hostUrl + appLocation)
+
+    visitPage('home')
+
+    colorLog(
+      `TEST START ---> ${
+        Cypress.mocha.getRunner().suite.ctx.currentTest.title
+      }`,
+      '#3498DB'
+    )
+  })
+
+  it('1 | Uploads regular csv file', () => {
+    openTableFromTree(libraryToOpenIncludes, 'mpe_x_test')
+
+    attachExcelFile('regular.csv', () => {
+      cy.get('#approval-btn', { timeout: 60000 })
+        .should('be.visible')
+        // .then(() => {
+        //   cy.get('#hotInstance', { timeout: 30000 })
+        //     .find('div.ht_master.handsontable')
+        //     .find('div.wtHolder')
+        //     .find('div.wtHider')
+        //     .find('div.wtSpreader')
+        //     .find('table.htCore')
+        //     .find('tbody')
+        //     .then((data) => {
+        //       let cell: any = data[0].children[0].children[1]
+        //       expect(cell.innerText).to.equal('0')
+        //       cell = data[0].children[0].children[2]
+        //       expect(cell.innerText).to.equal('44')
+        //       cell = data[0].children[0].children[3]
+        //       expect(cell.innerText).to.equal('abc')
+        //       cell = data[0].children[0].children[6]
+        //       expect(cell.innerText).to.equal('Option abc')
+        //     })
+        // })
+    })
+  })
+
+  this.afterEach(() => {
+    colorLog(`TEST END -------------`, '#3498DB')
+  })
+})
+
+const openTableFromTree = (libNameIncludes: string, tablename: string) => {
+  cy.get('.app-loading', { timeout: longerCommandTimeout })
+    .should('not.exist')
+    .then(() => {
+      cy.get('.nav-tree clr-tree > clr-tree-node', {
+        timeout: longerCommandTimeout
+      }).then((treeNodes: any) => {
+        let viyaLib
+
+        for (let node of treeNodes) {
+          if (node.innerText.toLowerCase().includes(libNameIncludes)) {
+            viyaLib = node
+            break
+          }
+        }
+
+        cy.get(viyaLib).within(() => {
+          cy.get('.clr-tree-node-content-container > button').click()
+
+          cy.get('.clr-treenode-link').then((innerNodes: any) => {
+            for (let innerNode of innerNodes) {
+              if (innerNode.innerText.toLowerCase().includes(tablename)) {
+                innerNode.click()
+                break
+              }
+            }
+          })
+        })
+      })
+    })
+}
+
+const attachExcelFile = (excelFilename: string, callback?: any) => {
+  cy.get('.buttonBar button:last-child')
+    .should('exist')
+    .click()
+    .then(() => {
+      cy.get('input[type="file"]#file-upload')
+        .attachFile(`/${fixturePath}/${excelFilename}`)
+        .then(() => {
+          if (callback) callback()
+        })
+    })
+}
+
+const visitPage = (url: string) => {
+  cy.visit(`${hostUrl}${appLocation}/#/${url}`)
+}
+
+const colorLog = (msg: string, color: string) => {
+  console.log('%c' + msg, 'color:' + color + ';font-weight:bold;')
+}

client/cypress/fixtures/csvs/regular.csv

@@ -0,0 +1,497 @@
+PRIMARY_KEY_FIELD,SOME_CHAR,SOME_DROPDOWN,SOME_NUM,SOME_DATE,SOME_DATETIME,SOME_TIME,SOME_SHORTNUM,SOME_BESTNUM
+0,abc,Option abc,42,12FEB1960,01JAN1960:00:00:42,0:00:42,3,44
+1,more dummy data,Option 2,42,12FEB1960,01JAN1960:00:00:42,0:07:02,3,44
+2,even more dummy data,Option 3,42,12FEB1960,01JAN1960:00:00:42,0:02:22,3,44
+3,"It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told: It was a dark and stormy night.  The wind was blowing a gale!  The captain said to his mate - mate, tell us a tale.  And this, is the tale he told:",Option 2,1613.001,27FEB1961,01JAN1960:00:07:03,0:00:44,3,44
+4,if you can fill the unforgiving minute,Option 1,1613.0011235,02AUG1971,29MAY1973:06:12:03,0:06:52,3,44
+1010,10 bottles of beer on the wall,Option 1,0.9153696885,04MAR1962,01JAN1960:12:47:55,0:01:40,92,76
+1011,11 bottles of beer on the wall,Option 1,0.3531217558,29MAR1960,01JAN1960:03:33:24,0:01:03,80,29
+1012,12 bottles of beer on the wall,Option 1,0.6743748717,02AUG1962,01JAN1960:07:25:59,0:00:10,16,98
+1013,13 bottles of beer on the wall,Option 1,0.1305445992,11SEP1960,01JAN1960:13:51:32,0:00:35,73,15
+1014,14 bottles of beer on the wall,Option 1,0.7409067949,26JUL1960,01JAN1960:05:18:10,0:00:41,30,89
+1015,15 bottles of beer on the wall,Option 1,0.0869016028,28FEB1961,01JAN1960:13:23:45,0:00:44,80,3
+1016,16 bottles of beer on the wall,Option 1,0.0462121419,09AUG1962,01JAN1960:07:42:38,0:01:17,62,2
+1017,17 bottles of beer on the wall,Option 1,0.7501918947,14MAY1962,01JAN1960:04:40:20,0:00:15,53,65
+1018,18 bottles of beer on the wall,Option 1,0.7300173294,03AUG1962,01JAN1960:03:20:41,0:00:41,21,60
+1019,19 bottles of beer on the wall,Option 1,0.6960950437,01JUN1960,01JAN1960:01:58:52,0:01:08,38,5
+1020,20 bottles of beer on the wall,Option 1,0.6190566065,30MAY1961,01JAN1960:09:04:20,0:01:07,92,23
+1021,21 bottles of beer on the wall,Option 1,0.5173368238,07JAN1961,01JAN1960:07:52:34,0:00:52,57,21
+1022,22 bottles of beer on the wall,Option 1,0.4720626452,07NOV1960,01JAN1960:12:12:00,0:00:26,53,32
+1023,23 bottles of beer on the wall,Option 1,0.2856596393,08AUG1960,01JAN1960:06:09:25,0:00:28,40,12
+1024,24 bottles of beer on the wall,Option 1,0.5160869418,02JUN1960,01JAN1960:06:36:06,0:01:10,41,81
+1025,25 bottles of beer on the wall,Option 1,0.1683158517,05JAN1961,01JAN1960:08:14:35,0:00:06,18,53
+1026,26 bottles of beer on the wall,Option 1,0.8951142248,28NOV1961,01JAN1960:03:31:17,0:00:58,79,54
+1027,27 bottles of beer on the wall,Option 1,0.7037817481,01SEP1961,01JAN1960:05:48:34,0:00:29,50,15
+1028,28 bottles of beer on the wall,Option 1,0.6193826714,31MAR1962,01JAN1960:02:49:39,0:00:24,78,87
+1029,29 bottles of beer on the wall,Option 1,0.9339028457,06DEC1961,01JAN1960:02:57:57,0:00:24,73,64
+1030,30 bottles of beer on the wall,Option 1,0.5647351339,10AUG1960,01JAN1960:11:02:59,0:00:55,39,28
+1031,31 bottles of beer on the wall,Option 1,0.1218988607,19JUN1961,01JAN1960:04:19:32,0:00:58,51,32
+1032,32 bottles of beer on the wall,Option 1,0.3459929113,14MAY1962,01JAN1960:05:42:48,0:00:54,96,46
+1033,33 bottles of beer on the wall,Option 1,0.092664999,31AUG1962,01JAN1960:00:08:34,0:00:51,69,90
+1034,34 bottles of beer on the wall,Option 1,0.9793458097,08FEB1960,01JAN1960:01:55:23,0:00:42,45,28
+1035,35 bottles of beer on the wall,Option 1,0.8964386624,18DEC1961,01JAN1960:04:42:45,0:00:07,49,97
+1036,36 bottles of beer on the wall,Option 1,0.0961652911,13NOV1960,01JAN1960:03:44:53,0:01:25,62,59
+1037,37 bottles of beer on the wall,Option 1,0.3475089201,16JAN1962,01JAN1960:01:35:19,0:00:15,23,50
+1038,38 bottles of beer on the wall,Option 1,0.3096271312,21MAY1960,01JAN1960:09:51:33,0:00:15,2,71
+1039,39 bottles of beer on the wall,Option 1,0.9445223114,28AUG1962,01JAN1960:07:09:31,0:00:12,30,31
+1040,40 bottles of beer on the wall,Option 1,0.5626084667,06NOV1960,01JAN1960:01:42:16,0:01:14,18,97
+1041,41 bottles of beer on the wall,Option 1,0.9432962513,01JUN1962,01JAN1960:03:30:04,0:00:11,20,34
+1042,42 bottles of beer on the wall,Option 1,0.5802429382,08JUL1961,01JAN1960:08:12:43,0:01:26,18,5
+1043,43 bottles of beer on the wall,Option 1,0.1970176255,27MAR1961,01JAN1960:00:19:45,0:01:29,13,76
+1044,44 bottles of beer on the wall,Option 1,0.4980671608,05JAN1961,01JAN1960:13:36:08,0:00:56,4,36
+1045,45 bottles of beer on the wall,Option 1,0.2486515531,05MAY1962,01JAN1960:08:47:09,0:00:42,2,23
+1046,46 bottles of beer on the wall,Option 1,0.4097825794,20JUN1960,01JAN1960:03:33:26,0:00:31,98,71
+1047,47 bottles of beer on the wall,Option 1,0.138754441,28JAN1960,01JAN1960:00:57:41,0:00:18,80,32
+1048,48 bottles of beer on the wall,Option 1,0.0249874415,03MAR1960,01JAN1960:11:33:53,0:00:04,96,76
+1049,49 bottles of beer on the wall,Option 1,0.8395310011,06NOV1961,01JAN1960:09:54:04,0:00:52,28,45
+1050,50 bottles of beer on the wall,Option 1,0.0942291618,14APR1962,01JAN1960:08:09:30,0:01:36,37,86
+1051,51 bottles of beer on the wall,Option 1,0.1670458001,13NOV1961,01JAN1960:01:05:55,0:00:25,42,83
+1052,52 bottles of beer on the wall,Option 1,0.3122402715,04JUN1960,01JAN1960:03:47:47,0:01:01,18,78
+1053,53 bottles of beer on the wall,Option 1,0.3854694261,14JUN1960,01JAN1960:02:43:08,0:00:06,22,67
+1054,54 bottles of beer on the wall,Option 1,0.1950434345,14NOV1961,01JAN1960:02:46:34,0:00:55,42,0
+1055,55 bottles of beer on the wall,Option 1,0.4948673586,29MAR1962,01JAN1960:00:48:06,0:01:04,28,4
+1056,56 bottles of beer on the wall,Option 1,0.6464513832,06SEP1962,01JAN1960:10:08:36,0:01:02,43,82
+1057,57 bottles of beer on the wall,Option 1,0.0724864798,20JUN1961,01JAN1960:12:22:51,0:01:27,82,53
+1058,58 bottles of beer on the wall,Option 1,0.8114467793,20MAR1962,01JAN1960:06:11:33,0:01:29,40,89
+1059,59 bottles of beer on the wall,Option 1,0.6348024321,28JUN1962,01JAN1960:05:21:21,0:01:37,55,41
+1060,60 bottles of beer on the wall,Option 1,0.8019492933,08APR1961,01JAN1960:12:37:00,0:01:29,49,88
+1061,61 bottles of beer on the wall,Option 1,0.4695742002,29JAN1962,01JAN1960:08:54:24,0:00:15,40,91
+1062,62 bottles of beer on the wall,Option 1,0.902706475,15JUN1961,01JAN1960:09:46:49,0:00:23,74,70
+1063,63 bottles of beer on the wall,Option 1,0.4557614594,16JUL1961,01JAN1960:02:06:05,0:01:09,7,3
+1064,64 bottles of beer on the wall,Option 1,0.6632444466,20MAY1961,01JAN1960:02:44:44,0:00:20,42,100
+1065,65 bottles of beer on the wall,Option 1,0.3901674,31AUG1961,01JAN1960:07:56:49,0:00:32,98,3
+1066,66 bottles of beer on the wall,Option 1,0.8453234848,30JUN1962,01JAN1960:04:51:54,0:01:02,51,22
+1067,67 bottles of beer on the wall,Option 1,0.9370150906,26APR1960,01JAN1960:04:05:08,0:01:39,28,86
+1068,68 bottles of beer on the wall,Option 1,0.8854161277,22MAR1962,01JAN1960:10:38:49,0:01:07,60,85
+1069,69 bottles of beer on the wall,Option 1,0.1327841906,24MAY1960,01JAN1960:01:18:46,0:01:15,88,85
+1070,70 bottles of beer on the wall,Option 1,0.5846563226,27JUL1962,01JAN1960:03:52:31,0:00:09,20,8
+1071,71 bottles of beer on the wall,Option 1,0.0257193684,18FEB1961,01JAN1960:03:25:01,0:00:29,1,62
+1072,72 bottles of beer on the wall,Option 1,0.9471486034,01JUN1962,01JAN1960:04:05:25,0:01:22,65,20
+1073,73 bottles of beer on the wall,Option 1,0.3037446282,16MAY1962,01JAN1960:05:10:19,0:00:01,14,34
+1074,74 bottles of beer on the wall,Option 1,0.2508690675,01NOV1961,01JAN1960:11:26:03,0:00:15,8,74
+1075,75 bottles of beer on the wall,Option 1,0.814380363,17SEP1960,01JAN1960:09:00:38,0:00:25,95,1
+1076,76 bottles of beer on the wall,Option 1,0.3761493621,16AUG1961,01JAN1960:01:48:17,0:00:52,5,38
+1077,77 bottles of beer on the wall,Option 1,0.3621215761,25JUL1961,01JAN1960:11:48:47,0:01:20,86,90
+1078,78 bottles of beer on the wall,Option 1,0.0268799584,20MAY1961,01JAN1960:12:43:34,0:01:00,70,96
+1079,79 bottles of beer on the wall,Option 1,0.4112483945,27JUL1962,01JAN1960:01:20:24,0:01:26,66,20
+1080,80 bottles of beer on the wall,Option 1,0.9501868011,15APR1961,01JAN1960:09:58:20,0:00:51,93,79
+1081,81 bottles of beer on the wall,Option 1,0.9866548018,13SEP1961,01JAN1960:05:20:04,0:00:14,28,97
+1082,82 bottles of beer on the wall,Option 1,0.9907830073,22FEB1962,01JAN1960:03:29:03,0:00:17,16,91
+1083,83 bottles of beer on the wall,Option 1,0.8927816567,11MAR1960,01JAN1960:05:52:48,0:01:26,54,14
+1084,84 bottles of beer on the wall,Option 1,0.12871663,02FEB1961,01JAN1960:10:34:37,0:00:44,52,90
+1085,85 bottles of beer on the wall,Option 1,0.5490252802,02JAN1960,01JAN1960:06:11:58,0:00:27,4,98
+1086,86 bottles of beer on the wall,Option 1,0.5432773864,11FEB1960,01JAN1960:08:40:00,0:01:15,79,19
+1087,87 bottles of beer on the wall,Option 1,0.8223943137,01OCT1960,01JAN1960:08:11:33,0:01:19,2,86
+1088,88 bottles of beer on the wall,Option 1,0.8496777699,09FEB1962,01JAN1960:03:10:35,0:00:15,95,6
+1089,89 bottles of beer on the wall,Option 1,0.9308730536,27MAY1962,01JAN1960:11:57:53,0:01:18,86,90
+1090,90 bottles of beer on the wall,Option 1,0.3072653344,23FEB1962,01JAN1960:04:52:38,0:00:25,85,17
+1091,91 bottles of beer on the wall,Option 1,0.7687679575,12FEB1960,01JAN1960:08:47:11,0:01:20,8,7
+1092,92 bottles of beer on the wall,Option 1,0.1873595105,29SEP1961,01JAN1960:04:29:58,0:00:29,17,78
+1093,93 bottles of beer on the wall,Option 1,0.0495966631,03OCT1961,01JAN1960:03:18:50,0:00:39,89,56
+1094,94 bottles of beer on the wall,Option 1,0.2607690526,19SEP1960,01JAN1960:03:22:28,0:00:29,81,16
+1095,95 bottles of beer on the wall,Option 1,0.549640266,07JUN1962,01JAN1960:06:15:32,0:00:04,57,70
+1096,96 bottles of beer on the wall,Option 1,0.9993291092,08MAR1961,01JAN1960:13:49:08,0:00:33,37,28
+1097,97 bottles of beer on the wall,Option 1,0.9517237963,02SEP1960,01JAN1960:05:16:03,0:00:40,77,61
+1098,98 bottles of beer on the wall,Option 1,0.5952155588,14FEB1962,01JAN1960:05:05:11,0:01:29,63,83
+1099,99 bottles of beer on the wall,Option 1,0.7526210732,05MAY1961,01JAN1960:06:58:36,0:00:02,95,1
+10100,100 bottles of beer on the wall,Option 1,0.307558153,17MAY1961,01JAN1960:06:13:01,0:01:37,68,7
+10101,101 bottles of beer on the wall,Option 1,0.6596710829,15APR1962,01JAN1960:08:34:02,0:00:43,66,43
+10102,102 bottles of beer on the wall,Option 1,0.0202811998,31AUG1961,01JAN1960:07:22:35,0:01:31,57,35
+10103,103 bottles of beer on the wall,Option 1,0.6699061034,02MAY1962,01JAN1960:05:13:17,0:00:36,30,23
+10104,104 bottles of beer on the wall,Option 1,0.330972748,04JUN1961,01JAN1960:06:47:20,0:01:05,69,82
+10105,105 bottles of beer on the wall,Option 1,0.2274839176,25JAN1961,01JAN1960:05:34:51,0:00:56,63,68
+10106,106 bottles of beer on the wall,Option 1,0.5612243989,27JUN1962,01JAN1960:04:32:03,0:01:15,19,73
+10107,107 bottles of beer on the wall,Option 1,0.7398902111,03SEP1962,01JAN1960:08:34:07,0:00:17,90,6
+10108,108 bottles of beer on the wall,Option 1,0.6124899791,08AUG1960,01JAN1960:04:59:34,0:00:25,56,12
+10109,109 bottles of beer on the wall,Option 1,0.882404773,26JAN1961,01JAN1960:01:29:15,0:01:26,36,4
+10110,110 bottles of beer on the wall,Option 1,0.4427004733,27FEB1961,01JAN1960:06:16:49,0:01:40,97,84
+10111,111 bottles of beer on the wall,Option 1,0.3609524622,10JAN1962,01JAN1960:09:48:37,0:01:11,87,62
+10112,112 bottles of beer on the wall,Option 1,0.9408929562,03AUG1960,01JAN1960:06:54:26,0:00:08,19,33
+10113,113 bottles of beer on the wall,Option 1,0.3149107319,10AUG1962,01JAN1960:13:01:00,0:00:04,75,60
+10114,114 bottles of beer on the wall,Option 1,0.0525069181,17APR1962,01JAN1960:13:00:52,0:00:35,9,23
+10115,115 bottles of beer on the wall,Option 1,0.145448105,14FEB1962,01JAN1960:04:06:08,0:00:26,45,91
+10116,116 bottles of beer on the wall,Option 1,0.2444279959,10OCT1961,01JAN1960:08:03:12,0:01:37,12,41
+10117,117 bottles of beer on the wall,Option 1,0.4619846043,30JUL1960,01JAN1960:09:40:16,0:00:50,2,88
+10118,118 bottles of beer on the wall,Option 1,0.0316203502,13JUL1961,01JAN1960:08:31:39,0:01:05,60,94
+10119,119 bottles of beer on the wall,Option 1,0.4738720574,13AUG1960,01JAN1960:01:31:05,0:01:17,43,79
+10120,120 bottles of beer on the wall,Option 1,0.8058761856,11JUN1960,01JAN1960:12:56:35,0:00:08,92,36
+10121,121 bottles of beer on the wall,Option 1,0.2955600979,08JUL1962,01JAN1960:06:09:22,0:00:03,94,80
+10122,122 bottles of beer on the wall,Option 1,0.0064115427,18SEP1962,01JAN1960:00:06:24,0:00:13,72,75
+10123,123 bottles of beer on the wall,Option 1,0.5678159327,21APR1960,01JAN1960:10:54:21,0:00:16,75,67
+10124,124 bottles of beer on the wall,Option 1,0.1431510994,10JAN1962,01JAN1960:01:57:00,0:00:12,48,31
+10125,125 bottles of beer on the wall,Option 1,0.3805634409,26JAN1962,01JAN1960:03:03:19,0:01:29,83,52
+10126,126 bottles of beer on the wall,Option 1,0.3833517993,26APR1960,01JAN1960:11:27:41,0:00:44,99,36
+10127,127 bottles of beer on the wall,Option 1,0.5669089111,04MAR1961,01JAN1960:05:36:22,0:01:18,43,27
+10128,128 bottles of beer on the wall,Option 1,0.1514211843,01NOV1960,01JAN1960:07:45:50,0:01:02,22,12
+10129,129 bottles of beer on the wall,Option 1,0.0446588583,05JAN1961,01JAN1960:02:13:55,0:00:42,27,46
+10130,130 bottles of beer on the wall,Option 1,0.7892141611,22APR1962,01JAN1960:04:17:54,0:01:05,75,84
+10131,131 bottles of beer on the wall,Option 1,0.5012088001,24DEC1960,01JAN1960:13:03:23,0:01:22,87,82
+10132,132 bottles of beer on the wall,Option 1,0.2327582944,07APR1961,01JAN1960:01:33:15,0:01:14,18,46
+10133,133 bottles of beer on the wall,Option 1,0.2234651173,20MAR1961,01JAN1960:13:52:02,0:01:06,42,58
+10134,134 bottles of beer on the wall,Option 1,0.4954405918,10FEB1961,01JAN1960:13:51:14,0:01:36,35,11
+10135,135 bottles of beer on the wall,Option 1,0.7874922891,15AUG1960,01JAN1960:00:21:57,0:00:52,45,36
+10136,136 bottles of beer on the wall,Option 1,0.3992494891,06SEP1961,01JAN1960:09:51:46,0:01:25,26,9
+10137,137 bottles of beer on the wall,Option 1,0.3964866136,25MAY1960,01JAN1960:03:19:48,0:00:28,44,3
+10138,138 bottles of beer on the wall,Option 1,0.9466173323,06APR1962,01JAN1960:13:19:18,0:01:27,78,51
+10139,139 bottles of beer on the wall,Option 1,0.6525219277,09APR1960,01JAN1960:05:43:49,0:00:21,63,6
+10140,140 bottles of beer on the wall,Option 1,0.4684071925,29MAY1961,01JAN1960:02:53:36,0:00:46,68,4
+10141,141 bottles of beer on the wall,Option 1,0.8581724013,16MAY1960,01JAN1960:01:45:44,0:01:32,31,85
+10142,142 bottles of beer on the wall,Option 1,0.825792401,23APR1961,01JAN1960:12:03:13,0:00:49,36,45
+10143,143 bottles of beer on the wall,Option 1,0.3172852538,20FEB1962,01JAN1960:12:38:31,0:01:34,51,78
+10144,144 bottles of beer on the wall,Option 1,0.670397946,27JAN1962,01JAN1960:04:59:37,0:00:39,38,99
+10145,145 bottles of beer on the wall,Option 1,0.3304372441,04JUN1960,01JAN1960:00:39:12,0:00:29,88,76
+10146,146 bottles of beer on the wall,Option 1,0.845151971,31JUL1962,01JAN1960:05:03:34,0:00:13,2,80
+10147,147 bottles of beer on the wall,Option 1,0.7957223709,02FEB1961,01JAN1960:00:03:07,0:01:11,29,99
+10148,148 bottles of beer on the wall,Option 1,0.323337108,29FEB1960,01JAN1960:01:58:05,0:01:17,23,65
+10149,149 bottles of beer on the wall,Option 1,0.1813316611,29JUN1960,01JAN1960:02:18:08,0:00:40,45,52
+10150,150 bottles of beer on the wall,Option 1,0.7860426655,05MAR1962,01JAN1960:01:57:15,0:00:26,31,91
+10151,151 bottles of beer on the wall,Option 1,0.3305453571,09APR1960,01JAN1960:07:08:32,0:01:30,72,15
+10152,152 bottles of beer on the wall,Option 1,0.9367212513,18AUG1962,01JAN1960:10:36:03,0:01:26,85,81
+10153,153 bottles of beer on the wall,Option 1,0.3385623458,19MAR1962,01JAN1960:04:21:46,0:01:29,11,54
+10154,154 bottles of beer on the wall,Option 1,0.9756794413,17JUN1961,01JAN1960:08:35:40,0:00:34,3,72
+10155,155 bottles of beer on the wall,Option 1,0.6385958868,21OCT1961,01JAN1960:08:51:00,0:00:50,1,6
+10156,156 bottles of beer on the wall,Option 1,0.3569769959,14AUG1960,01JAN1960:10:57:16,0:00:05,5,94
+10157,157 bottles of beer on the wall,Option 1,0.8559997239,23MAR1962,01JAN1960:12:03:38,0:00:08,96,68
+10158,158 bottles of beer on the wall,Option 1,0.2293701918,13AUG1960,01JAN1960:06:36:47,0:00:07,87,87
+10159,159 bottles of beer on the wall,Option 1,0.0007910165,20SEP1962,01JAN1960:11:49:02,0:00:55,18,69
+10160,160 bottles of beer on the wall,Option 1,0.5876370373,08JAN1960,01JAN1960:00:59:15,0:01:26,27,36
+10161,161 bottles of beer on the wall,Option 1,0.2354667514,11OCT1961,01JAN1960:01:27:14,0:01:04,90,28
+10162,162 bottles of beer on the wall,Option 1,0.0144103263,11AUG1961,01JAN1960:02:37:41,0:01:39,92,8
+10163,163 bottles of beer on the wall,Option 1,0.7087855668,03JUL1962,01JAN1960:02:07:23,0:01:35,51,33
+10164,164 bottles of beer on the wall,Option 1,0.7251478106,20MAY1960,01JAN1960:12:15:23,0:01:28,58,7
+10165,165 bottles of beer on the wall,Option 1,0.9629398403,06APR1962,01JAN1960:01:05:24,0:01:39,84,6
+10166,166 bottles of beer on the wall,Option 1,0.5155049164,14OCT1960,01JAN1960:04:02:06,0:00:30,63,96
+10167,167 bottles of beer on the wall,Option 1,0.1016342775,11MAY1960,01JAN1960:05:55:03,0:00:01,31,44
+10168,168 bottles of beer on the wall,Option 1,0.3690353596,12NOV1961,01JAN1960:12:49:02,0:00:03,2,79
+10169,169 bottles of beer on the wall,Option 1,0.5573803501,02SEP1962,01JAN1960:12:59:56,0:00:31,7,95
+10170,170 bottles of beer on the wall,Option 1,0.2008119497,10JUN1961,01JAN1960:05:59:06,0:01:29,88,4
+10171,171 bottles of beer on the wall,Option 1,0.6939068505,25MAY1962,01JAN1960:07:20:06,0:01:08,87,8
+10172,172 bottles of beer on the wall,Option 1,0.7013406594,14JUL1960,01JAN1960:04:04:24,0:00:11,44,96
+10173,173 bottles of beer on the wall,Option 1,0.83506724,30APR1961,01JAN1960:12:44:40,0:00:10,74,70
+10174,174 bottles of beer on the wall,Option 1,0.9339991943,26JAN1962,01JAN1960:04:59:32,0:01:09,13,66
+10175,175 bottles of beer on the wall,Option 1,0.8333402787,18FEB1961,01JAN1960:07:25:44,0:00:28,47,2
+10176,176 bottles of beer on the wall,Option 1,0.5998844433,03MAR1962,01JAN1960:03:45:33,0:00:52,2,61
+10177,177 bottles of beer on the wall,Option 1,0.6161394634,18DEC1960,01JAN1960:05:35:25,0:00:50,70,22
+10178,178 bottles of beer on the wall,Option 1,0.0821002392,21APR1960,01JAN1960:10:08:56,0:01:40,28,9
+10179,179 bottles of beer on the wall,Option 1,0.6845213462,23MAY1960,01JAN1960:13:15:46,0:00:03,89,13
+10180,180 bottles of beer on the wall,Option 1,0.3839034477,14MAY1960,01JAN1960:03:22:17,0:01:11,15,38
+10181,181 bottles of beer on the wall,Option 1,0.7949567609,21AUG1962,01JAN1960:02:41:01,0:00:57,90,93
+10182,182 bottles of beer on the wall,Option 1,0.5079025419,23SEP1962,01JAN1960:02:22:31,0:01:07,83,32
+10183,183 bottles of beer on the wall,Option 1,0.3215162574,26DEC1961,01JAN1960:09:03:00,0:01:38,46,94
+10184,184 bottles of beer on the wall,Option 1,0.3322958058,12MAY1961,01JAN1960:02:48:05,0:00:46,80,54
+10185,185 bottles of beer on the wall,Option 1,0.6510801453,07SEP1960,01JAN1960:11:49:02,0:00:59,51,47
+10186,186 bottles of beer on the wall,Option 1,0.060995535,15AUG1960,01JAN1960:02:21:08,0:01:40,5,61
+10187,187 bottles of beer on the wall,Option 1,0.8541180551,14SEP1960,01JAN1960:13:29:33,0:01:23,17,14
+10188,188 bottles of beer on the wall,Option 1,0.9427926219,23JUL1960,01JAN1960:05:19:05,0:01:13,22,97
+10189,189 bottles of beer on the wall,Option 1,0.2325015186,01FEB1960,01JAN1960:11:50:07,0:01:22,6,53
+10190,190 bottles of beer on the wall,Option 1,0.3687101493,21FEB1962,01JAN1960:06:44:23,0:00:13,16,30
+10191,191 bottles of beer on the wall,Option 1,0.7647511232,09JAN1960,01JAN1960:13:06:29,0:01:35,6,97
+10192,192 bottles of beer on the wall,Option 1,0.4105463565,17AUG1961,01JAN1960:11:04:32,0:01:14,38,33
+10193,193 bottles of beer on the wall,Option 1,0.8785403831,12JUL1962,01JAN1960:04:11:05,0:00:29,19,82
+10194,194 bottles of beer on the wall,Option 1,0.9304303433,11JUL1961,01JAN1960:12:36:57,0:01:02,20,35
+10195,195 bottles of beer on the wall,Option 1,0.7302505256,01MAR1961,01JAN1960:01:38:35,0:00:42,16,35
+10196,196 bottles of beer on the wall,Option 1,0.2536906177,04SEP1962,01JAN1960:05:18:23,0:01:18,91,50
+10197,197 bottles of beer on the wall,Option 1,0.1181504503,08AUG1961,01JAN1960:09:27:54,0:01:26,20,13
+10198,198 bottles of beer on the wall,Option 1,0.9275614228,17JUL1961,01JAN1960:01:52:18,0:00:06,52,73
+10199,199 bottles of beer on the wall,Option 1,0.7495222128,04APR1961,01JAN1960:09:28:04,0:00:42,30,41
+10200,200 bottles of beer on the wall,Option 1,0.925741082,02FEB1962,01JAN1960:12:23:10,0:00:07,79,17
+10201,201 bottles of beer on the wall,Option 1,0.2591843359,04DEC1960,01JAN1960:12:46:41,0:00:00,53,58
+10202,202 bottles of beer on the wall,Option 1,0.4289995704,17NOV1961,01JAN1960:02:20:52,0:00:35,41,25
+10203,203 bottles of beer on the wall,Option 1,0.4625803807,24JAN1960,01JAN1960:08:20:44,0:01:11,84,66
+10204,204 bottles of beer on the wall,Option 1,0.858440102,31AUG1962,01JAN1960:08:51:40,0:00:12,18,51
+10205,205 bottles of beer on the wall,Option 1,0.8964499016,01SEP1962,01JAN1960:05:33:47,0:00:23,34,77
+10206,206 bottles of beer on the wall,Option 1,0.5742789063,24OCT1961,01JAN1960:02:31:04,0:01:08,27,66
+10207,207 bottles of beer on the wall,Option 1,0.4864150954,29SEP1960,01JAN1960:09:27:46,0:01:28,31,26
+10208,208 bottles of beer on the wall,Option 1,0.4511992249,04DEC1960,01JAN1960:09:39:26,0:00:42,49,98
+10209,209 bottles of beer on the wall,Option 1,0.4218624157,13SEP1961,01JAN1960:01:40:55,0:01:39,35,50
+10210,210 bottles of beer on the wall,Option 1,0.1572868331,15FEB1960,01JAN1960:07:01:15,0:00:51,43,1
+10211,211 bottles of beer on the wall,Option 1,0.713915177,23MAR1960,01JAN1960:11:08:53,0:00:15,18,61
+10212,212 bottles of beer on the wall,Option 1,0.5677882165,19MAY1960,01JAN1960:01:27:23,0:01:02,34,89
+10213,213 bottles of beer on the wall,Option 1,0.7552938581,12SEP1961,01JAN1960:11:47:33,0:00:38,44,46
+10214,214 bottles of beer on the wall,Option 1,0.6071256071,28DEC1961,01JAN1960:05:28:18,0:01:23,84,66
+10215,215 bottles of beer on the wall,Option 1,0.7717189266,12MAR1960,01JAN1960:01:21:26,0:01:00,28,22
+10216,216 bottles of beer on the wall,Option 1,0.8985594329,24MAR1961,01JAN1960:10:48:58,0:01:31,93,2
+10217,217 bottles of beer on the wall,Option 1,0.3156879904,13AUG1960,01JAN1960:07:10:46,0:01:18,100,54
+10218,218 bottles of beer on the wall,Option 1,0.3408455315,08JUN1961,01JAN1960:02:26:49,0:00:05,65,82
+10219,219 bottles of beer on the wall,Option 1,0.6263580553,08JUN1962,01JAN1960:05:59:46,0:01:03,76,88
+10220,220 bottles of beer on the wall,Option 1,0.2878925355,19DEC1961,01JAN1960:08:23:41,0:00:00,92,1
+10221,221 bottles of beer on the wall,Option 1,0.0901017348,19JUL1962,01JAN1960:09:50:47,0:00:43,21,84
+10222,222 bottles of beer on the wall,Option 1,0.8967759362,14SEP1960,01JAN1960:12:25:58,0:01:22,34,50
+10223,223 bottles of beer on the wall,Option 1,0.9878171943,03DEC1961,01JAN1960:03:43:09,0:00:17,11,84
+10224,224 bottles of beer on the wall,Option 1,0.5275036886,13DEC1961,01JAN1960:03:12:56,0:01:36,85,49
+10225,225 bottles of beer on the wall,Option 1,0.442012436,12JUN1960,01JAN1960:11:40:23,0:01:40,76,87
+10226,226 bottles of beer on the wall,Option 1,0.582103689,10FEB1961,01JAN1960:01:50:49,0:00:59,53,29
+10227,227 bottles of beer on the wall,Option 1,0.5757669842,01NOV1960,01JAN1960:13:47:33,0:00:43,55,6
+10228,228 bottles of beer on the wall,Option 1,0.4786617507,07JAN1960,01JAN1960:13:36:24,0:01:22,91,53
+10229,229 bottles of beer on the wall,Option 1,0.1386274957,06APR1962,01JAN1960:03:48:29,0:01:27,36,48
+10230,230 bottles of beer on the wall,Option 1,0.4188394893,31MAY1962,01JAN1960:10:30:51,0:00:54,5,87
+10231,231 bottles of beer on the wall,Option 1,0.9250617777,18OCT1960,01JAN1960:04:29:52,0:00:38,34,94
+10232,232 bottles of beer on the wall,Option 1,0.3077528124,05FEB1960,01JAN1960:09:37:42,0:01:13,58,75
+10233,233 bottles of beer on the wall,Option 1,0.7316332277,29NOV1960,01JAN1960:08:56:57,0:01:13,34,53
+10234,234 bottles of beer on the wall,Option 1,0.5666298352,21NOV1960,01JAN1960:07:51:09,0:01:08,97,71
+10235,235 bottles of beer on the wall,Option 1,0.5736639409,03JUL1962,01JAN1960:11:57:25,0:00:51,15,49
+10236,236 bottles of beer on the wall,Option 1,0.6785667616,11FEB1962,01JAN1960:09:47:20,0:00:50,65,21
+10237,237 bottles of beer on the wall,Option 1,0.3721726869,05JUL1962,01JAN1960:11:58:22,0:01:32,82,21
+10238,238 bottles of beer on the wall,Option 1,0.0332283876,17AUG1961,01JAN1960:13:11:34,0:00:54,83,30
+10239,239 bottles of beer on the wall,Option 1,0.9734656848,02JAN1961,01JAN1960:00:36:43,0:00:19,31,54
+10240,240 bottles of beer on the wall,Option 1,0.3022106021,16FEB1961,01JAN1960:13:50:38,0:00:40,22,66
+10241,241 bottles of beer on the wall,Option 1,0.7546903294,06JUL1961,01JAN1960:12:36:17,0:01:29,16,85
+10242,242 bottles of beer on the wall,Option 1,0.2509871834,07MAR1962,01JAN1960:10:38:28,0:00:39,7,8
+10243,243 bottles of beer on the wall,Option 1,0.9526996668,15JAN1960,01JAN1960:04:24:42,0:01:01,69,80
+10244,244 bottles of beer on the wall,Option 1,0.1816610122,06FEB1962,01JAN1960:08:46:51,0:00:54,89,91
+10245,245 bottles of beer on the wall,Option 1,0.3928658876,21JUL1962,01JAN1960:12:59:42,0:00:38,24,27
+10246,246 bottles of beer on the wall,Option 1,0.3774878524,18FEB1961,01JAN1960:07:40:49,0:01:31,88,93
+10247,247 bottles of beer on the wall,Option 1,0.6063659362,01NOV1960,01JAN1960:01:19:07,0:00:05,82,73
+10248,248 bottles of beer on the wall,Option 1,0.119603098,14JUN1960,01JAN1960:04:29:22,0:00:58,87,47
+10249,249 bottles of beer on the wall,Option 1,0.4833748445,03JUL1960,01JAN1960:01:53:54,0:00:37,34,33
+10250,250 bottles of beer on the wall,Option 1,0.2244539946,10AUG1961,01JAN1960:06:19:01,0:01:15,87,97
+10251,251 bottles of beer on the wall,Option 1,0.9368193191,11JUN1962,01JAN1960:06:37:14,0:00:46,94,39
+10252,252 bottles of beer on the wall,Option 1,0.1791427751,10NOV1961,01JAN1960:00:49:22,0:00:47,96,21
+10253,253 bottles of beer on the wall,Option 1,0.5836302874,06JUN1961,01JAN1960:08:39:34,0:01:01,78,49
+10254,254 bottles of beer on the wall,Option 1,0.1289398275,28DEC1960,01JAN1960:12:25:05,0:00:43,67,99
+10255,255 bottles of beer on the wall,Option 1,0.7833669785,05SEP1962,01JAN1960:02:47:35,0:00:20,25,2
+10256,256 bottles of beer on the wall,Option 1,0.4945342483,29JAN1960,01JAN1960:00:54:13,0:01:13,72,56
+10257,257 bottles of beer on the wall,Option 1,0.0635836129,05JAN1961,01JAN1960:08:10:04,0:00:52,11,10
+10258,258 bottles of beer on the wall,Option 1,0.8188241654,09FEB1962,01JAN1960:06:33:00,0:01:21,41,96
+10259,259 bottles of beer on the wall,Option 1,0.3398916076,11FEB1960,01JAN1960:07:12:29,0:00:56,18,76
+10260,260 bottles of beer on the wall,Option 1,0.0814064155,21MAY1961,01JAN1960:11:03:51,0:01:18,78,29
+10261,261 bottles of beer on the wall,Option 1,0.6653245542,20JAN1962,01JAN1960:08:03:31,0:00:18,39,95
+10262,262 bottles of beer on the wall,Option 1,0.4036777021,04AUG1962,01JAN1960:12:32:27,0:00:08,57,63
+10263,263 bottles of beer on the wall,Option 1,0.8931138603,07JAN1962,01JAN1960:09:04:24,0:00:32,6,27
+10264,264 bottles of beer on the wall,Option 1,0.528584433,06APR1962,01JAN1960:09:43:19,0:01:00,24,41
+10265,265 bottles of beer on the wall,Option 1,0.8267822945,29JUL1960,01JAN1960:00:48:11,0:00:01,81,78
+10266,266 bottles of beer on the wall,Option 1,0.7218411401,17FEB1960,01JAN1960:07:30:38,0:00:08,35,81
+10267,267 bottles of beer on the wall,Option 1,0.1475262773,11NOV1960,01JAN1960:13:44:20,0:00:57,36,68
+10268,268 bottles of beer on the wall,Option 1,0.9412727286,30DEC1960,01JAN1960:02:46:30,0:01:19,5,92
+10269,269 bottles of beer on the wall,Option 1,0.3038877548,27NOV1960,01JAN1960:10:50:10,0:01:21,43,95
+10270,270 bottles of beer on the wall,Option 1,0.2756435532,15APR1962,01JAN1960:09:05:28,0:01:34,11,14
+10271,271 bottles of beer on the wall,Option 1,0.7056001121,31AUG1960,01JAN1960:08:48:52,0:00:02,9,51
+10272,272 bottles of beer on the wall,Option 1,0.5273708508,21SEP1962,01JAN1960:12:58:13,0:00:28,97,69
+10273,273 bottles of beer on the wall,Option 1,0.6002807215,03MAY1960,01JAN1960:10:14:48,0:00:40,52,32
+10274,274 bottles of beer on the wall,Option 1,0.6100557971,20JUN1960,01JAN1960:08:11:55,0:00:27,90,14
+10275,275 bottles of beer on the wall,Option 1,0.4197408638,07JUN1961,01JAN1960:12:07:18,0:00:26,64,100
+10276,276 bottles of beer on the wall,Option 1,0.4903712498,19JAN1960,01JAN1960:01:06:26,0:00:03,35,24
+10277,277 bottles of beer on the wall,Option 1,0.6658435406,04NOV1960,01JAN1960:00:04:17,0:00:37,7,84
+10278,278 bottles of beer on the wall,Option 1,0.5491365942,14JAN1961,01JAN1960:04:12:49,0:00:27,99,47
+10279,279 bottles of beer on the wall,Option 1,0.4473488622,13MAY1961,01JAN1960:12:06:34,0:01:16,19,20
+10280,280 bottles of beer on the wall,Option 1,0.4511988663,06JUL1962,01JAN1960:10:05:51,0:00:56,76,34
+10281,281 bottles of beer on the wall,Option 1,0.0783031066,11JUN1961,01JAN1960:09:58:43,0:01:05,9,63
+10282,282 bottles of beer on the wall,Option 1,0.776985302,20JUL1962,01JAN1960:10:44:29,0:01:00,59,10
+10283,283 bottles of beer on the wall,Option 1,0.468099362,31AUG1962,01JAN1960:05:26:33,0:00:20,35,52
+10284,284 bottles of beer on the wall,Option 1,0.4040679696,20FEB1962,01JAN1960:06:27:25,0:00:04,76,30
+10285,285 bottles of beer on the wall,Option 1,0.4549995947,20FEB1962,01JAN1960:10:36:57,0:00:34,2,43
+10286,286 bottles of beer on the wall,Option 1,0.7455339361,16SEP1961,01JAN1960:08:39:35,0:01:00,42,44
+10287,287 bottles of beer on the wall,Option 1,0.0209561712,04JAN1960,01JAN1960:05:52:58,0:00:24,32,7
+10288,288 bottles of beer on the wall,Option 1,0.4955981842,04JAN1962,01JAN1960:02:56:03,0:00:30,85,31
+10289,289 bottles of beer on the wall,Option 1,0.4131368219,10FEB1960,01JAN1960:11:57:31,0:00:16,37,88
+10290,290 bottles of beer on the wall,Option 1,0.3282186721,17OCT1960,01JAN1960:10:54:04,0:00:56,72,28
+10291,291 bottles of beer on the wall,Option 1,0.2116929005,18JAN1962,01JAN1960:06:56:27,0:00:11,87,82
+10292,292 bottles of beer on the wall,Option 1,0.8483731937,12FEB1962,01JAN1960:05:05:41,0:01:36,12,83
+10293,293 bottles of beer on the wall,Option 1,0.1560111345,13NOV1960,01JAN1960:10:04:22,0:00:03,94,4
+10294,294 bottles of beer on the wall,Option 1,0.7046207808,12APR1962,01JAN1960:13:50:47,0:00:32,31,97
+10295,295 bottles of beer on the wall,Option 1,0.2716620403,04AUG1961,01JAN1960:01:52:29,0:00:57,99,44
+10296,296 bottles of beer on the wall,Option 1,0.5543203496,12SEP1960,01JAN1960:13:43:54,0:00:44,49,1
+10297,297 bottles of beer on the wall,Option 1,0.983109036,31JUL1962,01JAN1960:01:07:33,0:00:36,4,10
+10298,298 bottles of beer on the wall,Option 1,0.8123072115,14SEP1962,01JAN1960:06:16:12,0:01:25,88,96
+10299,299 bottles of beer on the wall,Option 1,0.4276896559,05OCT1960,01JAN1960:02:55:07,0:00:58,83,76
+10300,300 bottles of beer on the wall,Option 1,0.8921809042,19JAN1962,01JAN1960:02:05:38,0:00:12,80,13
+10301,301 bottles of beer on the wall,Option 1,0.6041374279,10DEC1961,01JAN1960:01:06:29,0:01:27,62,9
+10302,302 bottles of beer on the wall,Option 1,0.0460550185,31MAY1962,01JAN1960:03:03:56,0:00:05,33,88
+10303,303 bottles of beer on the wall,Option 1,0.1868385622,12APR1962,01JAN1960:12:42:44,0:01:05,65,18
+10304,304 bottles of beer on the wall,Option 1,0.3386632657,28SEP1961,01JAN1960:11:24:06,0:00:42,2,93
+10305,305 bottles of beer on the wall,Option 1,0.6400271019,01JUN1960,01JAN1960:13:33:07,0:01:30,60,72
+10306,306 bottles of beer on the wall,Option 1,0.9534907304,18NOV1961,01JAN1960:02:02:51,0:00:54,7,57
+10307,307 bottles of beer on the wall,Option 1,0.6663103745,06SEP1961,01JAN1960:05:36:49,0:00:43,88,2
+10308,308 bottles of beer on the wall,Option 1,0.5392553073,13FEB1962,01JAN1960:11:28:18,0:01:08,16,8
+10309,309 bottles of beer on the wall,Option 1,0.0747909025,17OCT1961,01JAN1960:08:36:12,0:00:41,49,42
+10310,310 bottles of beer on the wall,Option 1,0.3249381847,30SEP1960,01JAN1960:08:12:54,0:00:09,96,89
+10311,311 bottles of beer on the wall,Option 1,0.9231011951,19MAY1962,01JAN1960:05:10:33,0:00:50,30,9
+10312,312 bottles of beer on the wall,Option 1,0.4658221637,21MAY1961,01JAN1960:12:55:25,0:01:39,16,20
+10313,313 bottles of beer on the wall,Option 1,0.7215524673,21FEB1960,01JAN1960:02:00:07,0:01:40,95,94
+10314,314 bottles of beer on the wall,Option 1,0.7328679942,28OCT1961,01JAN1960:09:07:00,0:00:25,42,71
+10315,315 bottles of beer on the wall,Option 1,0.1276036776,12JUN1960,01JAN1960:01:54:08,0:00:56,57,42
+10316,316 bottles of beer on the wall,Option 1,0.1270824723,15SEP1960,01JAN1960:03:19:25,0:00:21,85,9
+10317,317 bottles of beer on the wall,Option 1,0.3750520117,13JUN1961,01JAN1960:04:33:09,0:01:15,24,20
+10318,318 bottles of beer on the wall,Option 1,0.5777822102,10DEC1960,01JAN1960:13:32:14,0:00:09,98,28
+10319,319 bottles of beer on the wall,Option 1,0.140476402,27AUG1962,01JAN1960:08:52:46,0:01:08,64,83
+10320,320 bottles of beer on the wall,Option 1,0.2589205551,31MAY1961,01JAN1960:08:33:06,0:00:53,28,98
+10321,321 bottles of beer on the wall,Option 1,0.7350722825,16SEP1962,01JAN1960:05:47:44,0:01:17,79,95
+10322,322 bottles of beer on the wall,Option 1,0.1476364542,15JAN1960,01JAN1960:12:21:20,0:00:20,86,62
+10323,323 bottles of beer on the wall,Option 1,0.8700561099,15MAY1962,01JAN1960:00:47:05,0:00:20,90,15
+10324,324 bottles of beer on the wall,Option 1,0.6408788802,12SEP1962,01JAN1960:11:50:31,0:00:53,41,72
+10325,325 bottles of beer on the wall,Option 1,0.6961101623,27NOV1960,01JAN1960:00:10:49,0:01:17,28,72
+10326,326 bottles of beer on the wall,Option 1,0.1467710059,24FEB1961,01JAN1960:01:13:38,0:00:33,14,5
+10327,327 bottles of beer on the wall,Option 1,0.0215573572,09JUN1961,01JAN1960:11:47:17,0:00:21,57,10
+10328,328 bottles of beer on the wall,Option 1,0.4173900054,25JUL1962,01JAN1960:12:28:20,0:00:23,73,90
+10329,329 bottles of beer on the wall,Option 1,0.6395625713,02NOV1961,01JAN1960:08:49:34,0:00:37,77,79
+10330,330 bottles of beer on the wall,Option 1,0.0091438908,18MAY1962,01JAN1960:05:10:05,0:00:41,15,31
+10331,331 bottles of beer on the wall,Option 1,0.1024675197,11DEC1960,01JAN1960:13:12:57,0:00:23,50,13
+10332,332 bottles of beer on the wall,Option 1,0.057470562,11MAY1961,01JAN1960:03:43:04,0:00:17,48,14
+10333,333 bottles of beer on the wall,Option 1,0.8478633872,21JUL1961,01JAN1960:03:45:42,0:01:31,22,40
+10334,334 bottles of beer on the wall,Option 1,0.3442252541,24JUN1960,01JAN1960:01:19:31,0:00:48,82,25
+10335,335 bottles of beer on the wall,Option 1,0.7338460184,06JUN1962,01JAN1960:03:32:34,0:01:04,6,31
+10336,336 bottles of beer on the wall,Option 1,0.6217917342,09MAR1961,01JAN1960:06:37:39,0:00:50,70,84
+10337,337 bottles of beer on the wall,Option 1,0.6684890807,10OCT1961,01JAN1960:05:34:24,0:01:20,66,18
+10338,338 bottles of beer on the wall,Option 1,0.3695247562,05SEP1962,01JAN1960:00:25:21,0:01:18,48,37
+10339,339 bottles of beer on the wall,Option 1,0.9429265987,06DEC1960,01JAN1960:07:11:17,0:00:38,59,1
+10340,340 bottles of beer on the wall,Option 1,0.9266307265,17JUL1960,01JAN1960:06:33:59,0:00:21,12,13
+10341,341 bottles of beer on the wall,Option 1,0.7280535543,23FEB1961,01JAN1960:05:01:10,0:00:34,73,25
+10342,342 bottles of beer on the wall,Option 1,0.488654495,15AUG1962,01JAN1960:01:24:33,0:00:56,59,25
+10343,343 bottles of beer on the wall,Option 1,0.9526806548,28DEC1960,01JAN1960:07:26:17,0:00:58,97,61
+10344,344 bottles of beer on the wall,Option 1,0.526025336,14JAN1960,01JAN1960:10:02:08,0:00:55,11,77
+10345,345 bottles of beer on the wall,Option 1,0.807215352,03JUL1961,01JAN1960:12:49:47,0:00:01,40,7
+10346,346 bottles of beer on the wall,Option 1,0.9305162979,28FEB1960,01JAN1960:09:46:40,0:00:59,56,28
+10347,347 bottles of beer on the wall,Option 1,0.7591318552,18FEB1962,01JAN1960:13:25:32,0:01:10,41,9
+10348,348 bottles of beer on the wall,Option 1,0.4177664911,11SEP1961,01JAN1960:09:55:17,0:01:39,76,82
+10349,349 bottles of beer on the wall,Option 1,0.4690050443,05DEC1961,01JAN1960:11:05:15,0:01:09,63,40
+10350,350 bottles of beer on the wall,Option 1,0.7541399979,31AUG1961,01JAN1960:12:30:45,0:00:33,57,12
+10351,351 bottles of beer on the wall,Option 1,0.1392844325,17MAR1962,01JAN1960:08:20:38,0:00:41,85,45
+10352,352 bottles of beer on the wall,Option 1,0.1020530235,23DEC1961,01JAN1960:09:46:20,0:00:01,55,56
+10353,353 bottles of beer on the wall,Option 1,0.0257998794,04DEC1961,01JAN1960:09:47:10,0:00:31,100,2
+10354,354 bottles of beer on the wall,Option 1,0.1238113316,20MAR1962,01JAN1960:09:15:30,0:00:01,74,11
+10355,355 bottles of beer on the wall,Option 1,0.4214245292,24NOV1960,01JAN1960:04:24:09,0:01:01,79,83
+10356,356 bottles of beer on the wall,Option 1,0.3243381057,12FEB1961,01JAN1960:00:55:59,0:00:50,30,52
+10357,357 bottles of beer on the wall,Option 1,0.9735697345,24NOV1960,01JAN1960:07:10:56,0:01:33,64,2
+10358,358 bottles of beer on the wall,Option 1,0.4796259461,28JAN1961,01JAN1960:11:51:29,0:01:03,19,29
+10359,359 bottles of beer on the wall,Option 1,0.003359966,01SEP1960,01JAN1960:13:24:25,0:00:09,66,60
+10360,360 bottles of beer on the wall,Option 1,0.5773700334,21JAN1960,01JAN1960:10:15:32,0:00:40,9,21
+10361,361 bottles of beer on the wall,Option 1,0.0792848342,25JAN1962,01JAN1960:06:00:35,0:01:25,73,73
+10362,362 bottles of beer on the wall,Option 1,0.9339359365,30MAY1961,01JAN1960:09:08:13,0:00:56,12,56
+10363,363 bottles of beer on the wall,Option 1,0.3517632132,12FEB1961,01JAN1960:12:07:19,0:00:01,74,69
+10364,364 bottles of beer on the wall,Option 1,0.4088954895,17MAR1961,01JAN1960:08:04:51,0:01:01,70,66
+10365,365 bottles of beer on the wall,Option 1,0.1254259623,30DEC1961,01JAN1960:06:47:12,0:00:01,79,43
+10366,366 bottles of beer on the wall,Option 1,0.9190132958,28MAY1961,01JAN1960:06:35:42,0:00:07,19,31
+10367,367 bottles of beer on the wall,Option 1,0.3033860015,17MAY1962,01JAN1960:05:32:03,0:00:32,57,73
+10368,368 bottles of beer on the wall,Option 1,0.1463442846,02SEP1962,01JAN1960:01:24:29,0:00:53,19,64
+10369,369 bottles of beer on the wall,Option 1,0.5516236343,18JUN1962,01JAN1960:10:52:23,0:00:11,51,40
+10370,370 bottles of beer on the wall,Option 1,0.5205378246,19JAN1960,01JAN1960:06:54:14,0:00:58,2,72
+10371,371 bottles of beer on the wall,Option 1,0.9941610768,28MAR1962,01JAN1960:04:55:58,0:00:22,46,65
+10372,372 bottles of beer on the wall,Option 1,0.065678,07MAY1961,01JAN1960:10:17:35,0:00:10,54,100
+10373,373 bottles of beer on the wall,Option 1,0.7222646138,17JUL1961,01JAN1960:01:47:32,0:00:51,26,96
+10374,374 bottles of beer on the wall,Option 1,0.8772228294,23JUL1960,01JAN1960:00:30:51,0:00:40,18,45
+10375,375 bottles of beer on the wall,Option 1,0.3651081847,11DEC1961,01JAN1960:00:46:15,0:00:15,14,90
+10376,376 bottles of beer on the wall,Option 1,0.3800431529,15AUG1960,01JAN1960:05:30:55,0:00:19,13,74
+10377,377 bottles of beer on the wall,Option 1,0.1077003503,26FEB1960,01JAN1960:04:48:40,0:00:08,51,53
+10378,378 bottles of beer on the wall,Option 1,0.7945664035,06MAR1961,01JAN1960:05:36:47,0:00:45,65,39
+10379,379 bottles of beer on the wall,Option 1,0.8754883054,06JUN1960,01JAN1960:06:09:33,0:00:04,3,3
+10380,380 bottles of beer on the wall,Option 1,0.9975561108,10AUG1960,01JAN1960:10:34:33,0:00:28,92,29
+10381,381 bottles of beer on the wall,Option 1,0.9817031599,07JUL1960,01JAN1960:01:40:00,0:00:39,63,45
+10382,382 bottles of beer on the wall,Option 1,0.4427802341,07JAN1962,01JAN1960:01:21:32,0:01:31,7,54
+10383,383 bottles of beer on the wall,Option 1,0.03180474,17JUL1962,01JAN1960:07:15:54,0:01:08,72,60
+10384,384 bottles of beer on the wall,Option 1,0.1031627707,10MAY1962,01JAN1960:02:52:58,0:01:31,6,64
+10385,385 bottles of beer on the wall,Option 1,0.911744344,01MAY1960,01JAN1960:03:51:16,0:01:04,1,54
+10386,386 bottles of beer on the wall,Option 1,0.4912374353,13FEB1961,01JAN1960:07:22:49,0:01:21,70,71
+10387,387 bottles of beer on the wall,Option 1,0.8803869509,04JUL1960,01JAN1960:12:14:05,0:00:18,78,88
+10388,388 bottles of beer on the wall,Option 1,0.0596609544,17DEC1960,01JAN1960:08:29:20,0:00:53,13,84
+10389,389 bottles of beer on the wall,Option 1,0.6625022132,12JAN1961,01JAN1960:11:15:39,0:01:05,10,31
+10390,390 bottles of beer on the wall,Option 1,0.2669677358,05OCT1961,01JAN1960:00:48:03,0:01:33,29,31
+10391,391 bottles of beer on the wall,Option 1,0.8095563454,04DEC1961,01JAN1960:07:54:13,0:01:15,95,2
+10392,392 bottles of beer on the wall,Option 1,0.6406704796,27JAN1961,01JAN1960:03:35:55,0:00:36,92,47
+10393,393 bottles of beer on the wall,Option 1,0.2188341847,02MAR1960,01JAN1960:04:05:21,0:00:11,28,34
+10394,394 bottles of beer on the wall,Option 1,0.7052043424,09JUN1962,01JAN1960:07:00:21,0:01:14,84,19
+10395,395 bottles of beer on the wall,Option 1,0.9843204464,18APR1960,01JAN1960:04:54:31,0:01:29,46,46
+10396,396 bottles of beer on the wall,Option 1,0.329249541,10SEP1961,01JAN1960:13:21:04,0:00:21,70,11
+10397,397 bottles of beer on the wall,Option 1,0.2073628675,13JUL1962,01JAN1960:11:16:26,0:01:23,17,97
+10398,398 bottles of beer on the wall,Option 1,0.7881676665,29JUN1962,01JAN1960:11:36:47,0:00:50,39,72
+10399,399 bottles of beer on the wall,Option 1,0.4347905537,31AUG1962,01JAN1960:02:30:30,0:00:21,86,61
+10400,400 bottles of beer on the wall,Option 1,0.2937454084,05APR1962,01JAN1960:02:44:06,0:00:32,27,81
+10401,401 bottles of beer on the wall,Option 1,0.6659902565,10APR1961,01JAN1960:11:53:59,0:00:01,80,17
+10402,402 bottles of beer on the wall,Option 1,0.7637229686,07APR1962,01JAN1960:05:45:25,0:01:28,11,17
+10403,403 bottles of beer on the wall,Option 1,0.3325480941,19MAR1961,01JAN1960:09:57:05,0:00:27,9,99
+10404,404 bottles of beer on the wall,Option 1,0.580015553,10AUG1960,01JAN1960:06:15:44,0:00:25,27,99
+10405,405 bottles of beer on the wall,Option 1,0.2514696071,08APR1961,01JAN1960:10:37:45,0:00:17,29,59
+10406,406 bottles of beer on the wall,Option 1,0.3792107284,19MAR1962,01JAN1960:04:49:30,0:00:07,44,38
+10407,407 bottles of beer on the wall,Option 1,0.4702913125,13DEC1961,01JAN1960:09:03:31,0:00:38,95,90
+10408,408 bottles of beer on the wall,Option 1,0.4207190659,03FEB1961,01JAN1960:00:37:47,0:00:38,37,65
+10409,409 bottles of beer on the wall,Option 1,0.2485069117,08DEC1961,01JAN1960:07:18:28,0:01:39,91,64
+10410,410 bottles of beer on the wall,Option 1,0.3257893502,27NOV1961,01JAN1960:11:33:02,0:00:54,41,7
+10411,411 bottles of beer on the wall,Option 1,0.0967283533,11AUG1962,01JAN1960:07:23:15,0:00:21,90,1
+10412,412 bottles of beer on the wall,Option 1,0.532676542,01SEP1960,01JAN1960:02:46:29,0:00:45,31,48
+10413,413 bottles of beer on the wall,Option 1,0.2564602151,15JAN1961,01JAN1960:01:09:11,0:01:21,16,89
+10414,414 bottles of beer on the wall,Option 1,0.0865634024,20MAR1962,01JAN1960:12:56:45,0:00:05,75,51
+10415,415 bottles of beer on the wall,Option 1,0.2926342321,07FEB1960,01JAN1960:06:48:55,0:00:36,66,33
+10416,416 bottles of beer on the wall,Option 1,0.0678594029,06OCT1961,01JAN1960:07:14:58,0:01:26,50,16
+10417,417 bottles of beer on the wall,Option 1,0.6376664767,09JUN1960,01JAN1960:05:00:13,0:01:37,7,92
+10418,418 bottles of beer on the wall,Option 1,0.4795483525,14JUN1962,01JAN1960:00:00:50,0:00:50,33,74
+10419,419 bottles of beer on the wall,Option 1,0.3492934342,22MAR1960,01JAN1960:08:54:52,0:01:26,61,72
+10420,420 bottles of beer on the wall,Option 1,0.5085071356,14MAR1960,01JAN1960:09:47:51,0:00:56,36,63
+10421,421 bottles of beer on the wall,Option 1,0.414953564,25MAR1961,01JAN1960:03:35:19,0:00:30,47,30
+10422,422 bottles of beer on the wall,Option 1,0.2431976652,25SEP1960,01JAN1960:08:47:25,0:00:17,6,42
+10423,423 bottles of beer on the wall,Option 1,0.2370444998,04MAR1962,01JAN1960:00:16:44,0:01:36,54,100
+10424,424 bottles of beer on the wall,Option 1,0.8687893324,12OCT1961,01JAN1960:03:16:33,0:00:56,97,25
+10425,425 bottles of beer on the wall,Option 1,0.0470510335,10MAY1960,01JAN1960:02:44:07,0:01:05,83,59
+10426,426 bottles of beer on the wall,Option 1,0.7114342887,12APR1960,01JAN1960:02:17:40,0:00:39,57,97
+10427,427 bottles of beer on the wall,Option 1,0.6176668283,05JUL1962,01JAN1960:09:09:12,0:01:03,92,38
+10428,428 bottles of beer on the wall,Option 1,0.0657907743,01JUL1962,01JAN1960:11:03:37,0:01:35,97,63
+10429,429 bottles of beer on the wall,Option 1,0.280104912,13MAR1962,01JAN1960:10:35:08,0:01:07,42,35
+10430,430 bottles of beer on the wall,Option 1,0.3639827088,02APR1960,01JAN1960:12:00:50,0:00:40,91,84
+10431,431 bottles of beer on the wall,Option 1,0.2130561137,25AUG1961,01JAN1960:12:07:22,0:01:37,70,9
+10432,432 bottles of beer on the wall,Option 1,0.9656705889,23DEC1960,01JAN1960:02:36:48,0:01:28,23,92
+10433,433 bottles of beer on the wall,Option 1,0.5824601052,22JAN1961,01JAN1960:01:19:48,0:00:32,73,6
+10434,434 bottles of beer on the wall,Option 1,0.5207124942,23APR1961,01JAN1960:10:45:16,0:01:08,45,85
+10435,435 bottles of beer on the wall,Option 1,0.9280530661,01NOV1960,01JAN1960:12:46:59,0:01:36,57,4
+10436,436 bottles of beer on the wall,Option 1,0.8982810149,29NOV1961,01JAN1960:09:23:13,0:01:15,100,68
+10437,437 bottles of beer on the wall,Option 1,0.3268259467,04MAR1960,01JAN1960:01:22:42,0:00:04,99,61
+10438,438 bottles of beer on the wall,Option 1,0.2038002704,12FEB1962,01JAN1960:09:03:24,0:00:40,97,78
+10439,439 bottles of beer on the wall,Option 1,0.0798850833,11MAY1960,01JAN1960:00:32:50,0:00:37,7,49
+10440,440 bottles of beer on the wall,Option 1,0.6697000566,01SEP1960,01JAN1960:08:04:03,0:00:30,7,68
+10441,441 bottles of beer on the wall,Option 1,0.550699767,11JAN1960,01JAN1960:06:33:15,0:01:09,19,10
+10442,442 bottles of beer on the wall,Option 1,0.9514032798,07FEB1962,01JAN1960:06:03:16,0:01:13,65,87
+10443,443 bottles of beer on the wall,Option 1,0.1182718324,08FEB1960,01JAN1960:11:28:52,0:00:46,61,59
+10444,444 bottles of beer on the wall,Option 1,0.5772118874,11FEB1962,01JAN1960:01:14:29,0:01:07,16,22
+10445,445 bottles of beer on the wall,Option 1,0.9828714463,06DEC1960,01JAN1960:05:47:08,0:01:40,66,4
+10446,446 bottles of beer on the wall,Option 1,0.1229167269,02JUN1960,01JAN1960:09:43:51,0:01:34,29,24
+10447,447 bottles of beer on the wall,Option 1,0.2102257522,09MAR1961,01JAN1960:04:06:09,0:01:27,53,78
+10448,448 bottles of beer on the wall,Option 1,0.9958884935,20FEB1962,01JAN1960:06:43:53,0:00:07,42,65
+10449,449 bottles of beer on the wall,Option 1,0.3530408085,04MAY1961,01JAN1960:11:26:59,0:01:37,76,35
+10450,450 bottles of beer on the wall,Option 1,0.2848354258,03SEP1960,01JAN1960:13:26:36,0:00:25,69,38
+10451,451 bottles of beer on the wall,Option 1,0.1461860818,10JUN1960,01JAN1960:01:24:25,0:00:02,61,23
+10452,452 bottles of beer on the wall,Option 1,0.2033735766,29AUG1960,01JAN1960:12:30:17,0:00:19,32,75
+10453,453 bottles of beer on the wall,Option 1,0.7973149958,26JUN1961,01JAN1960:04:46:06,0:00:21,94,14
+10454,454 bottles of beer on the wall,Option 1,0.6812086425,07NOV1961,01JAN1960:01:59:51,0:00:12,89,59
+10455,455 bottles of beer on the wall,Option 1,0.6111464974,24FEB1962,01JAN1960:07:42:56,0:00:15,23,92
+10456,456 bottles of beer on the wall,Option 1,0.9542484209,09APR1961,01JAN1960:09:09:17,0:01:26,87,93
+10457,457 bottles of beer on the wall,Option 1,0.9818577077,18AUG1960,01JAN1960:12:24:47,0:01:08,18,20
+10458,458 bottles of beer on the wall,Option 1,0.9331120881,06JUL1961,01JAN1960:10:10:02,0:01:40,78,36
+10459,459 bottles of beer on the wall,Option 1,0.8953045587,22APR1960,01JAN1960:04:47:34,0:00:37,13,46
+10460,460 bottles of beer on the wall,Option 1,0.1584420461,08JAN1961,01JAN1960:07:47:49,0:00:05,85,61
+10461,461 bottles of beer on the wall,Option 1,0.9324573814,24DEC1960,01JAN1960:02:13:36,0:00:22,55,94
+10462,462 bottles of beer on the wall,Option 1,0.0813189871,21AUG1961,01JAN1960:09:18:28,0:00:36,42,49
+10463,463 bottles of beer on the wall,Option 1,0.8736312594,17MAY1962,01JAN1960:12:52:58,0:00:30,45,7
+10464,464 bottles of beer on the wall,Option 1,0.1894013794,06NOV1960,01JAN1960:12:56:13,0:01:30,11,50
+10465,465 bottles of beer on the wall,Option 1,0.9149773772,07JUN1960,01JAN1960:08:53:28,0:00:22,23,17
+10466,466 bottles of beer on the wall,Option 1,0.6329479598,27JUN1962,01JAN1960:07:38:23,0:00:06,68,14
+10467,467 bottles of beer on the wall,Option 1,0.1897066413,21AUG1961,01JAN1960:10:15:28,0:01:12,59,46
+10468,468 bottles of beer on the wall,Option 1,0.8352205767,16MAR1961,01JAN1960:06:48:50,0:00:44,60,37
+10469,469 bottles of beer on the wall,Option 1,0.3339443432,09OCT1960,01JAN1960:00:52:53,0:00:27,70,44
+10470,470 bottles of beer on the wall,Option 1,0.1096137567,09JUL1962,01JAN1960:08:28:10,0:01:15,88,81
+10471,471 bottles of beer on the wall,Option 1,0.1481936733,10JAN1962,01JAN1960:06:38:41,0:00:56,21,77
+10472,472 bottles of beer on the wall,Option 1,0.5630390432,01MAR1960,01JAN1960:06:35:09,0:01:08,70,32
+10473,473 bottles of beer on the wall,Option 1,0.0604085713,12APR1962,01JAN1960:02:41:26,0:00:46,36,17
+10474,474 bottles of beer on the wall,Option 1,0.6011423606,25DEC1961,01JAN1960:02:57:45,0:01:11,36,18
+10475,475 bottles of beer on the wall,Option 1,0.7698335782,31JUL1962,01JAN1960:07:46:29,0:01:34,72,17
+10476,476 bottles of beer on the wall,Option 1,0.3823641224,17MAR1962,01JAN1960:03:34:37,0:00:09,27,86
+10477,477 bottles of beer on the wall,Option 1,0.9225378446,12JAN1962,01JAN1960:08:41:25,0:01:06,45,20
+10478,478 bottles of beer on the wall,Option 1,0.2979750453,23JUN1962,01JAN1960:10:06:36,0:01:28,88,7
+10479,479 bottles of beer on the wall,Option 1,0.4988665942,15JUL1961,01JAN1960:02:33:06,0:01:33,85,1
+10480,480 bottles of beer on the wall,Option 1,0.5243853585,29JUL1960,01JAN1960:00:26:18,0:00:31,48,77
+10481,481 bottles of beer on the wall,Option 1,0.6049248826,12JUL1962,01JAN1960:10:01:41,0:00:16,66,45
+10482,482 bottles of beer on the wall,Option 1,0.6312438024,01OCT1961,01JAN1960:05:18:12,0:00:04,43,27
+10483,483 bottles of beer on the wall,Option 1,0.3366865974,17MAY1962,01JAN1960:01:44:17,0:00:01,31,25
+10484,484 bottles of beer on the wall,Option 1,0.0813266188,08AUG1962,01JAN1960:06:18:27,0:00:08,71,63
+10485,485 bottles of beer on the wall,Option 1,0.3601163455,23JAN1962,01JAN1960:11:26:01,0:00:37,41,88
+10486,486 bottles of beer on the wall,Option 1,0.9033777345,13AUG1961,01JAN1960:00:16:14,0:00:56,82,33
+10487,487 bottles of beer on the wall,Option 1,0.1716986667,23DEC1960,01JAN1960:12:06:34,0:01:13,2,32
+10488,488 bottles of beer on the wall,Option 1,0.9734818912,11SEP1961,01JAN1960:00:34:41,0:00:28,17,7
+10489,489 bottles of beer on the wall,Option 1,0.0618140223,17DEC1961,01JAN1960:06:26:30,0:00:38,94,40
+10490,490 bottles of beer on the wall,Option 1,0.0204490144,22AUG1960,01JAN1960:01:50:18,0:00:19,40,56
+10491,491 bottles of beer on the wall,Option 1,0.8719323929,23MAY1960,01JAN1960:12:36:06,0:00:08,49,44
+10492,492 bottles of beer on the wall,Option 1,0.2656292181,28JUN1962,01JAN1960:05:32:50,0:01:35,15,39
+10493,493 bottles of beer on the wall,Option 1,0.37794835,23JUL1962,01JAN1960:13:15:43,0:00:56,6,86
+10494,494 bottles of beer on the wall,Option 1,0.6395865733,17JAN1961,01JAN1960:12:20:12,0:01:31,22,87
+10495,495 bottles of beer on the wall,Option 1,0.4408595098,05JUL1960,01JAN1960:12:21:53,0:01:40,25,27
+10496,496 bottles of beer on the wall,Option 1,0.4846261169,02DEC1961,01JAN1960:12:41:08,0:00:06,7,63
+10497,497 bottles of beer on the wall,Option 1,0.7903671478,14MAY1962,01JAN1960:05:09:21,0:01:03,98,25
+10498,498 bottles of beer on the wall,Option 1,0.60474184,13OCT1961,01JAN1960:03:52:59,0:01:22,98,98
+10499,499 bottles of beer on the wall,Option 1,0.1213259218,23APR1962,01JAN1960:06:29:47,0:01:35,38,70
+10500,500 bottles of beer on the wall,Option 1,0.7882370487,17FEB1962,01JAN1960:02:00:25,0:00:12,1,74

client/cypress/tsconfig.json

@@ -6,5 +6,8 @@
       "lib": ["es2019", "dom"],
       "types": ["cypress", "cypress-real-events"]
     },
-    "include": ["**/*.ts"]
+    "include": [
+      "**/*.ts",
+      "../cypress.config.ts"
+    ]
   }

client/licenseChecker.js

@@ -10,7 +10,7 @@ const check = (cwd) => {
         onlyAllow:
           'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
         excludePackages:
-          '@cds/city@1.1.0;@handsontable/angular@14.4.0;handsontable@14.4.0;hyperformula@2.7.0;jackspeak@2.2.0;path-scurry@1.7.0'
+          '@cds/city@1.1.0;@handsontable/angular@15.3.0;handsontable@15.3.0;hyperformula@2.7.1;hyperformula@3.0.0;jackspeak@3.4.3;path-scurry@1.11.1;package-json-from-dist@1.0.1'
       },
       (error, json) => {
         if (error) {

client/package.json

@@ -44,23 +44,23 @@
     "@angular/platform-browser": "^17.3.3",
     "@angular/platform-browser-dynamic": "^17.3.3",
     "@angular/router": "^17.3.3",
-    "@cds/core": "^6.10.0",
-    "@clr/angular": "^17.0.1",
+    "@cds/core": "^6.15.1",
+    "@clr/angular": "file:libraries/clr-angular-17.9.0.tgz",
     "@clr/icons": "^13.0.2",
-    "@clr/ui": "^17.0.1",
-    "@handsontable/angular": "^14.3.0",
-    "@sasjs/adapter": "4.10.2",
+    "@clr/ui": "file:libraries/clr-ui-17.9.0.tgz",
+    "@handsontable/angular": "^15.3.0",
+    "@sasjs/adapter": "^4.11.0",
     "@sasjs/utils": "^3.4.0",
     "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
     "@types/d3-graphviz": "^2.6.7",
     "@types/text-encoding": "0.0.35",
     "base64-arraybuffer": "^0.2.0",
     "buffer": "^5.4.3",
-    "crypto-browserify": "3.12.0",
+    "crypto-browserify": "^3.12.1",
     "crypto-js": "^4.2.0",
     "d3-graphviz": "^5.0.2",
     "fs-extra": "^7.0.1",
-    "handsontable": "^14.3.0",
+    "handsontable": "^15.3.0",
     "https-browserify": "1.0.0",
     "hyperformula": "^2.5.0",
     "iconv-lite": "^0.5.0",

client/src/app/_globals.ts

@@ -148,5 +148,8 @@ export const globals: {
   },
   handsontable: {
     darkTableHeaderClass: 'darkTH'
+  },
+  userDropdownConfig: {
+    closeOnDebugClick: false
   }
 }

client/src/app/app.component.html

@@ -139,10 +139,15 @@
         [routerLink]="['/']"
         class="nav-link"
       >
-        <img class="without-text d-block d-md-none" src="images/dc-logo.svg" />
+        <img
+          class="without-text d-block d-md-none"
+          src="images/dc-logo.svg"
+          alt="datacontroller logo without text"
+        />
         <img
           class="with-text d-none d-md-block"
           src="images/datacontroller.svg"
+          alt="datacontroller logo"
         />
       </a>
 
@@ -283,7 +288,11 @@
 
 <!-- App Loading Page -->
 <div *ngIf="!startupDataLoaded" class="app-loading">
-  <img class="loading-logo" src="images/datacontroller.svg" />
+  <img
+    class="loading-logo"
+    src="images/datacontroller.svg"
+    alt="datacontroller logo"
+  />
 
   <div *ngIf="appActive === null" class="slider">
     <div class="line"></div>

client/src/app/app.component.scss

@@ -1,447 +0,0 @@
-@import '../colors.scss';
-
-// Copyright (c) 2016 VMware, Inc. All Rights Reserved.
-// This software is released under MIT license.
-// The full license information can be found in LICENSE in the root directory of this project.
-app-requests-modal {
-  z-index: 10000;
-}
-
-header.app-header {
-  background: $headerBackground !important;
-  color: #fff;
-}
-
-.logo img.without-text {
-  width: 30px;
-}
-
-.logo img.with-text {
-  width: 210px;
-}
-
-.header-hamburger-trigger {
-  display: block;
-  background: transparent;
-  border: 0;
-  margin-left: 10px;
-}
-
-.demo-expired-notice {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100vh !important;
-  width: 100vw !important;
-  z-index: 105;
-  background: rgba(33, 33, 33, .5);
-
-  .expired-details {
-    flex-direction: column;
-    align-items: center;
-    padding: 30px;
-    z-index: 110;
-    background: $headerBackground;
-
-    .expired-notice {
-      color: #e0e0e0;
-      font-size: 16px;
-
-      .mailto {
-        color: #8dc53e;
-      }
-    }
-  }
-}
-
-.main-container .update-key {
-  display: flex;
-  align-items: center;
-  color: white;
-  padding: 0px 10px;
-  background: #00000026;
-}
-
-.alert-icon-wrapper {
-  margin-top: 0 !important;
-}
-
-.nav-text {
-  margin-right: 20px;
-}
-
-.sidebar-toggle {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  padding-left: 10px;
-
-  clr-icon {
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-  }
-}
-
-header {
-  .header-actions {
-    .dropdown {
-      position: unset; //without it, when opening user dropdown scrollbar was displaying without reason
-    }
-  }
-
-  .nav-link:hover {
-      color: #fafafa;
-  }
-
-  .nav-link.active {
-    background: #61717D;
-  }
-}
-
-.notf {
-  background: #16a57a;
-  color: #fffcfc;
-  font-size: 12px;
-}
-
-
-.toggle-switch input[type=checkbox]:checked+label:before {
-  border-color: #61717D;
-  background-color: #61717D;
-  transition: .15s ease-in;
-  transition-property: border-color,background-color;
-}
-
-.main-container {
-  min-height: 100vh !important;
-}
-
-.main-container .content-container .content-area {
-  padding: 0rem 1rem 1rem 1rem;
-}
-
-.content-container {
-  z-index: 0!important;
-}
-
-.navBarResp {
-  display: flex;
-  justify-content: center;
-  background: #495A67;
-  color: #fff;
-}
-
-::ng-deep {
-  .htInvalid {
-    background: black!important;
-  }
-
-  @media screen and (max-width:480px) {
-    h2 {
-      font-size: .7rem!important;
-    }
-    h3 {
-      font-size: .7rem;
-    }
-  }
-
-  .nav-link {
-    padding: 0rem 1rem 0rem 1rem;
-  }
-
-  body[cds-theme="light"] {
-    .btn-primary .btn, .btn.btn-primary {
-      border-color: $headerBackground;
-      background-color: $headerBackground;
-      color: #fff;
-    }
-  }
-
-  body[cds-theme="dark"] {
-    .btn-primary .btn, .btn.btn-primary {
-      border-color: #5e7382;
-      background-color: #5e7382;
-      color: #fff;
-
-      clr-icon, cds-icon {
-        color: #fff
-      }
-    }
-  }
-
-  .btn-primary .btn, .btn.btn-primary {
-    &:disabled {
-      opacity: 0.65;
-    }
-  }
-
-  .btn {
-    cursor: pointer;
-    display: inline-block;
-    -webkit-appearance: none!important;
-    border-radius: .125rem;
-    border: 1px solid;
-    min-width: 3rem;
-    max-width: 15rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-align: center;
-    text-transform: uppercase;
-    vertical-align: middle;
-    line-height: 1.5rem;
-    letter-spacing: .12em;
-    font-size: .5rem;
-    font-weight: 500;
-    height: 1.5rem;
-    padding: 0 .5rem;
-  }
-
-  .btn.btn-outline:hover {
-    border-color: $headerBackground;
-    background-color: #495A67;
-    color: #fff;
-  }
-
-
-  body[cds-theme="dark"] {
-    .btn.btn-icon.btn-dimmed {
-      color: #7295ae;
-    }
-  }
-
-  body[cds-theme="light"] {
-    .btn.btn-icon.btn-dimmed {
-      color: $headerBackground;
-    }
-
-    .btn.btn-outline {
-      border-color: $headerBackground;
-      background-color: transparent;
-      color: $headerBackground;
-    }
-  }
-
-  .htMobileEditorContainer .inputs textarea {
-    font-size: 13pt;
-    border: 2px solid #485967;
-    border-radius: 4px;
-    -webkit-appearance: none;
-    box-shadow: none;
-    position: absolute;
-    left: 14px;
-    right: 0px;
-    top: 0;
-    bottom: 0;
-    padding: 7pt;
-    width: 290px;
-}
-
-.htMobileEditorContainer .positionControls {
-    width: 333px;
-    position: absolute;
-    right: 5pt;
-    top: 50px;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-}
-
-.htMobileEditorContainer.active {
-    display: block;
-    height: 120px;
-    width: 350px;
-}
-
-
-  /* Left and right */
-
-  /* Column headers */
-
-  body[cds-theme="light"] {
-    .wtBorder {
-      background-color: #495A67!important;
-    }
-
-    .ht_master tr:nth-of-type(odd) > td {
-      filter: brightness(0.95);
-    }
-  }
-
-  $darkBorderColor: #697c85;
-
-  body[cds-theme="dark"] {
-    .ht_master tr:nth-of-type(odd) > td {
-      filter: brightness(1.2);
-    }
-
-    .ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
-      background-color: #2d4048;
-      border-color: $darkBorderColor;
-    }
-
-    .handsontable td {
-      // border-right: 1px solid #697c85;
-      // border-bottom: 1px solid #697c85;
-      border-color: $darkBorderColor;
-    }
-
-    .handsontable tr:first-child th, .handsontable tr:first-child td {
-      border-color: $darkBorderColor;
-    }
-
-    .handsontable .handsontable.ht_clone_top .wtHider {
-      border-color: $darkBorderColor;
-    }
-
-    .handsontable .changeType {
-      background-color: #3c5662;
-      border-color: $darkBorderColor;
-    }
-
-    .handsontableInput {
-      background-color: #708b98;
-    }
-  }
-
-  .handsontable .handsontable.ht_clone_top .wtHider {
-    padding: 0 0 0px 0!important;
-    margin: 0px;
-    border-bottom: 3px solid #d6d3d3;
-  }
-
-  body[cds-theme="light"] {
-    .content-container {
-      // background: red;
-      background: #F5F6FF;
-    }
-  }
-
-  .datagrid-compact, .datagrid-history{
-    .datagrid {
-      border-collapse: separate;
-      border: 1px solid transparent;
-      border-radius: .125rem;
-      margin: 0;
-      margin-top: 1rem;
-      max-width: 100%;
-      width: 100%;
-      padding: 15px 15px 50px 15px;
-    }
-    .datagrid-foot {
-      -webkit-box-pack: end;
-      -ms-flex-pack: end;
-      justify-content: flex-end;
-      height: 1.5rem;
-      padding: 0 .5rem;
-      line-height: calc(1.5rem - 3px);
-      font-size: .45833rem;
-      background-color: #fff;
-      border-top: 1px solid #ccc;
-      border-radius: 0px;
-      // border-radius: 0 0 .125rem .125rem;
-    }
-    .datagrid-footer {
-      position: absolute;
-      right: 30px;
-      top: 1px;
-    }
-    .datagrid .datagrid-head {
-      background-color: #fff;
-      border-bottom: 1px solid #ccc;
-    }
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: .083333rem;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    padding: .5rem 0;
-    border: 1px solid #ccc;
-    box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
-    min-width: 5rem;
-    max-width: 15rem;
-    border-radius: .125rem;
-    visibility: hidden;
-    z-index: 1000;
-  }
-
-  .table {
-    border-collapse: separate;
-    border: 1px solid transparent;
-    border-radius: 0px;
-    margin: 0;
-    margin-top: 1rem;
-    max-width: 100%;
-    width: 100%;
-  }
-
-  .table th {
-    font-size: .45833rem;
-    font-weight: 600;
-    letter-spacing: .03em;
-    vertical-align: bottom;
-    border-bottom: 1px solid #ccc;
-    text-transform: uppercase;
-  }
-
-  .modal-header {
-    border-bottom: 2px solid #e4e4e4;
-    padding: 0 0 .5rem 0;
-    margin-bottom: 1rem;
-  }
-
-  .main-container .content-container {
-    min-height: 0px;
-    position: relative;
-  }
-}
-
-.app-loading {
-  .loading-logo {
-    max-width: 400px;
-    width: 100%;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .navBarResp {
-    display: flex;
-    justify-content: flex-start;
-    background: #495A67;
-    color: #fff;
-  }
-
-  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
-      padding: 0 .5rem 0 1rem;
-      width: 100%;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      border-radius: .125rem 0 0 .125rem;
-      color: #95c84b;
-  }
-
-
-
-  .card-block, .card-footer {
-    padding: 10px 0px 0px 0px;
-  }
-
-  .main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
-    padding: 0rem 0rem 0rem 0rem;
-  }
-
-}

client/src/app/app.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectorRef, Component, ElementRef } from '@angular/core'
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewEncapsulation
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { VERSION } from '../environments/version'
 import { ActivatedRoute } from '@angular/router'
@@ -36,7 +41,8 @@ ClarityIcons.addIcons(
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   private dcAdapterSettings: DcAdapterSettings | undefined

client/src/app/deploy/deploy.component.html

@@ -5,7 +5,7 @@
       <div class="card-header">Terms and Conditions</div>
       <div class="card-block">
         <div class="card-text">
-          <p>
+          <p class="mt-0">
             The Demo version of Data Controller is free for EVALUATION purposes
             only. Before proceeding with configuration, please confirm that you
             have read, understood, and agreed to the

client/src/app/deploy/deploy.component.scss

@@ -1,50 +0,0 @@
-.card {
-    margin-top: 0;
-}
-
-.btn {
-    margin-top: 10px;
-}
-
-.log-wrapper {
-    width: 100%;
-    background: #f0f0f0;
-    border: 1px solid #c9c9c9;
-    padding: 10px;
-    overflow: auto;
-    white-space: pre-wrap;
-}
-
-#contexts-btn {
-    padding: 0;
-    min-width: 30px;
-    margin-left: 10px;
-    height: 30px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding-top: 3px;
-}
-
-.validation-bar {
-    display: flex;
-    margin-top: 20px;
-    align-items: center;
-
-    clr-icon {
-        margin-right: 5px;
-    }
-}
-
-.autodeploy-section {
-    padding: 0px 15px;
-
-    .clr-checkbox-wrapper {
-        margin: 20px 0 20px 0;
-    }
-
-    .btn-autodeploy {
-        display: block;
-        margin: 15px 0 15px 0;
-    }
-}

client/src/app/deploy/deploy.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { SasService } from '../services/sas.service'
 import { SASjsConfig } from '@sasjs/adapter'
 import { Router } from '@angular/router'
@@ -13,7 +13,8 @@ import { DcAdapterSettings } from '../models/DcAdapterSettings'
   styleUrls: ['./deploy.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class DeployComponent implements OnInit {
   public step: number = 0
@@ -56,25 +57,6 @@ export class DeployComponent implements OnInit {
   }
 
   ngOnInit() {
-    if (this.sasJsConfig.serverType === ServerType.SasViya) {
-      fetch('sasbuild/viya.json')
-        .then((res) => res.text())
-        .then((res) => {
-          let initJsonFile: any = null
-
-          try {
-            initJsonFile = JSON.parse(res)
-          } catch (err) {
-            console.error(err)
-          }
-
-          if (initJsonFile) {
-            this.jsonFile = initJsonFile
-            this.loggerService.log(this.jsonFile)
-          }
-        })
-    }
-
     this.setDeployDefaults()
   }
 

client/src/app/deploy/sections/automatic/automatic.component.html

@@ -9,14 +9,17 @@
       <p class="m-0 align-self-start">Done</p>
       <hr class="w-100" />
 
-      <div class="deploy-status-row">
+      <div
+        *ngIf="autoDeployStatus.deployServicePack !== null"
+        class="deploy-status-row"
+      >
         <clr-icon
-          *ngIf="autoDeployStatus.deployServicePack"
+          *ngIf="autoDeployStatus.deployServicePack === true"
           class="deploy-success"
           shape="success-standard"
         ></clr-icon>
         <clr-icon
-          *ngIf="!autoDeployStatus.deployServicePack"
+          *ngIf="!autoDeployStatus.deployServicePack === false"
           class="deploy-error"
           shape="times-circle"
         ></clr-icon>
@@ -52,7 +55,7 @@
             class="deploy-error"
             shape="times-circle"
           ></clr-icon>
-          LAUNCH / CONFIGURE
+          LAUNCH
         </button>
 
         <button
@@ -94,20 +97,72 @@
 </div>
 
 <label for="dcloc" class="mt-20 clr-control-label">DC Loc</label>
-<div class="mb-10 clr-control-container">
-  <div class="clr-input-wrapper">
-    <p class="mt-0">{{ dcPath }}</p>
+<div class="mb-10 clr-control-container dc-loc-input-wrapper">
+  <div class="clr-input-wrapper small-mt">
+    <input clrInput name="dcloc" [(ngModel)]="dcPath" />
   </div>
 </div>
 
 <label for="dcloc" class="mt-20 clr-control-label">SAS Admin group</label>
 <div class="mb-10 clr-control-container">
-  <div class="clr-input-wrapper">
-    <p class="mt-0">{{ selectedAdminGroup }}</p>
+  <div class="clr-input-wrapper small-mt">
+    <select
+      *ngIf="!adminGroupsLoading"
+      clrSelect
+      name="options"
+      [(ngModel)]="selectedAdminGroup"
+    >
+      <option *ngFor="let adminGroup of adminGroups" [value]="adminGroup.id">
+        {{ adminGroup.name }}
+      </option>
+    </select>
+    <clr-spinner
+      clrInline
+      class="spinner-sm"
+      *ngIf="adminGroupsLoading"
+    ></clr-spinner>
   </div>
 </div>
 
-<clr-checkbox-wrapper>
+<label for="computeContext" class="mt-20 clr-control-label"
+  >Compute Context</label
+>
+<div class="mb-10 clr-control-container">
+  <div class="clr-input-wrapper small-mt">
+    <select
+      *ngIf="!computeContextsLoading"
+      clrSelect
+      name="options"
+      (ngModelChange)="onComputeContextChange($event)"
+      [(ngModel)]="selectedComputeContext"
+    >
+      <option
+        *ngFor="let computeContext of computeContexts"
+        [value]="computeContext.id"
+      >
+        {{ computeContext.name }}
+      </option>
+    </select>
+    <clr-spinner
+      clrInline
+      class="spinner-sm"
+      *ngIf="computeContextsLoading"
+    ></clr-spinner>
+  </div>
+</div>
+
+<ng-container *ngIf="runningAsUser">
+  <label for="dcloc" class="mt-20 clr-control-label">Running as user:</label>
+  <div class="mb-10 clr-control-container">
+    <div class="clr-input-wrapper">
+      <p class="mt-0">{{ runningAsUser }}</p>
+    </div>
+  </div>
+</ng-container>
+
+<!-- Keeping this for a reference in case future VIYA changes and starts allowing separate backend and frontend) -->
+
+<!-- <clr-checkbox-wrapper>
   <input
     clrCheckbox
     [(ngModel)]="recreateDatabase"
@@ -116,19 +171,28 @@
     checked
   />
   <label>Recreate database</label>
-</clr-checkbox-wrapper>
+</clr-checkbox-wrapper> -->
 
 <hr />
 
 <button
+  (click)="runAutoDeploy()"
+  class="btn-autodeploy btn btn-primary d-inline-block mr-10"
+>
+  Deploy
+</button>
+
+<!-- Keeping this for a reference in case future VIYA changes and starts allowing separate backend and frontend) -->
+
+<!-- <button
   (click)="executeJson()"
   class="btn-autodeploy btn btn-primary d-inline-block mr-10"
   [disabled]="!jsonFile"
 >
   Deploy {{ !jsonFile ? '(json file is not available)' : '' }}
-</button>
+</button> -->
 
-<button
+<!-- <button
   (click)="uploadJsonAuto.click()"
   class="btn-autodeploy btn btn-primary d-inline-block mr-10"
 >
@@ -140,7 +204,7 @@
   hidden
   (click)="clearUploadInput($event)"
   (change)="onJsonFileChange($event)"
-/>
+/> -->
 
 <clr-modal [(clrModalOpen)]="recreateDatabaseModal" [clrModalClosable]="false">
   <h3 class="modal-title">Warning</h3>

client/src/app/deploy/sections/automatic/automatic.component.scss

@@ -1,61 +0,0 @@
-.auto-deploy {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
-
-    z-index: 100;
-}
-
-.spinner-box {
-    width: 400px;
-    padding: 20px;
-    border-radius: 3px;
-    background: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    box-shadow: 1px 1px 8px 0px #00000082;
-
-    .buttons {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-    }
-}
-
-.deploy-status-row {
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-
-    p {
-        margin: 0 0 0 10px;
-    }
-}
-
-.deploy-success {
-    color: #6ECF44;
-}
-
-.deploy-error {
-    color: #E74C3C;
-    // width: 20px;
-    // height: 20px;
-}
-
-.deploy-undeterminated {
-    color: #cacaca;
-}
-
-hr {
-    border: 0;
-    border-bottom: 1px solid #00000045;
-}

client/src/app/deploy/sections/automatic/automatic.component.ts

@@ -1,15 +1,34 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core'
 import SASjs, { SASjsConfig } from '@sasjs/adapter'
 import { DcAdapterSettings } from 'src/app/models/DcAdapterSettings'
 import { DeployService } from 'src/app/services/deploy.service'
 import { EventService } from 'src/app/services/event.service'
 import { LoggerService } from 'src/app/services/logger.service'
+import { SasViyaService } from 'src/app/services/sas-viya.service'
 import { SasService } from 'src/app/services/sas.service'
+import { ViyaApiCurrentUser } from 'src/app/viya-api-explorer/models/viya-api-current-user.model'
+import {
+  Item,
+  ViyaApiIdentities
+} from 'src/app/viya-api-explorer/models/viya-api-identities.model'
+import { ComputeContextDetails } from 'src/app/viya-api-explorer/models/viya-compute-context-details.model'
+import {
+  ViyaComputeContexts,
+  Item as ComputeContextItem
+} from 'src/app/viya-api-explorer/models/viya-compute-contexts.model'
 
 @Component({
   selector: 'app-automatic-deploy',
   templateUrl: './automatic.component.html',
-  styleUrls: ['./automatic.component.scss']
+  styleUrls: ['./automatic.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AutomaticComponent implements OnInit {
   @Input() sasJs!: SASjs
@@ -21,6 +40,7 @@ export class AutomaticComponent implements OnInit {
 
   @Output() onNavigateToHome: EventEmitter<any> = new EventEmitter<any>()
 
+  public selectedComputeContext: string = ''
   public makeDataResponse: string = ''
   public jsonFile: any = null
   public autodeploying: boolean = false
@@ -28,8 +48,19 @@ export class AutomaticComponent implements OnInit {
   public recreateDatabaseModal: boolean = false
   public isSubmittingJson: boolean = false
   public isJsonSubmitted: boolean = false
-  public recreateDatabase: boolean = false
+  /**
+   * Default was `false` when deploy was done with frontend and backend separately.
+   * Now we are using only streaming app, so we always want to recreate database (makedata)
+   */
+  public recreateDatabase: boolean = true
   public createDatabaseLoading: boolean = false
+  public adminGroupsLoading: boolean = false
+  public currentUserInfoLoading: boolean = false
+  public computeContextsLoading: boolean = false
+  public adminGroups: { id: string; name: string }[] = []
+  public runningAsUser: string | undefined
+  public currentUserInfo: ViyaApiCurrentUser | null = null
+  public computeContexts: ComputeContextItem[] = []
 
   /** autoDeployStatus
    * This object presents the status for two steps that we have for deploy.
@@ -50,10 +81,123 @@ export class AutomaticComponent implements OnInit {
     private eventService: EventService,
     private deployService: DeployService,
     private sasService: SasService,
+    private sasViyaService: SasViyaService,
     private loggerService: LoggerService
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.loadData()
+  }
+
+  public async loadData() {
+    await this.getAdminGroups()
+    await this.getComputeContexts()
+    await this.getCurrentUser()
+
+    setTimeout(() => {
+      if (this.selectedComputeContext) {
+        this.onComputeContextChange(this.selectedComputeContext)
+      }
+    }, 500)
+  }
+
+  public async getComputeContexts() {
+    return new Promise<void>((resolve, reject) => {
+      this.computeContextsLoading = true
+
+      this.sasViyaService.getComputeContexts().subscribe(
+        (res: ViyaComputeContexts) => {
+          this.computeContextsLoading = false
+
+          const defaultContext = res.items.find(
+            (item: ComputeContextItem) =>
+              item.name === 'SAS Job Execution compute context'
+          )
+
+          if (defaultContext) {
+            this.selectedComputeContext = defaultContext.id
+          }
+
+          this.computeContexts = res.items
+
+          resolve()
+        },
+        (err) => {
+          reject(err)
+        }
+      )
+    })
+  }
+
+  public async getCurrentUser() {
+    return new Promise<void>((resolve, reject) => {
+      this.currentUserInfoLoading = true
+
+      this.sasViyaService.getCurrentUser().subscribe(
+        (res: ViyaApiCurrentUser) => {
+          this.currentUserInfoLoading = false
+
+          this.currentUserInfo = res
+
+          this.dcPath = `/export/viya/homes/${res.id}`
+
+          resolve()
+        },
+        (err) => {
+          console.error('Error while getting current user', err)
+          reject(err)
+        }
+      )
+    })
+  }
+
+  public async getAdminGroups() {
+    return new Promise<void>((resolve, reject) => {
+      this.adminGroupsLoading = true
+
+      this.sasViyaService
+        .getAdminGroups()
+        .subscribe((res: ViyaApiIdentities) => {
+          this.adminGroupsLoading = false
+          // Map admin groups with only needed fields
+          this.adminGroups = res.items.map((item: Item) => {
+            return {
+              id: item.id,
+              name: item.name
+            }
+          })
+
+          resolve()
+        }),
+        (err: any) => {
+          this.adminGroupsLoading = false
+          this.loggerService.error('Error while getting admin groups', err)
+          this.eventService.showAbortModal('admin groups', err)
+
+          reject(err)
+        }
+    })
+  }
+
+  public async onComputeContextChange(computeContextId: string) {
+    this.sasViyaService
+      .getComputeContextById(computeContextId)
+      .subscribe((res: ComputeContextDetails) => {
+        if (res.attributes && res.attributes.runServerAs) {
+          this.runningAsUser = res.attributes.runServerAs
+        } else {
+          this.runningAsUser = this.currentUserInfo?.id || 'unknown'
+        }
+      })
+  }
+
+  public getComputeContextName(id: string): string | undefined {
+    return (
+      this.computeContexts.find(
+        (context: ComputeContextItem) => context.id === id
+      )?.name || undefined
+    )
+  }
 
   /**
    * Executes sas.json file to deploy the backend
@@ -63,7 +207,6 @@ export class AutomaticComponent implements OnInit {
    * to create database if checkbox is toggled on
    */
   public async executeJson() {
-    this.autodeploying = true
     this.isSubmittingJson = true
 
     try {
@@ -98,6 +241,14 @@ export class AutomaticComponent implements OnInit {
     }
 
     this.isSubmittingJson = false
+  }
+
+  public async runAutoDeploy(executeJson: boolean = false) {
+    this.autodeploying = true
+
+    if (executeJson) {
+      this.executeJson()
+    }
 
     if (this.recreateDatabase) {
       this.createDatabase()
@@ -119,14 +270,27 @@ export class AutomaticComponent implements OnInit {
       ]
     }
 
+    // Get and run service using the selected context name
+    let selectedComputeContextName = this.sasJsConfig.contextName
+
+    if (this.selectedComputeContext.length && this.computeContexts.length) {
+      const computeContextName = this.getComputeContextName(
+        this.selectedComputeContext
+      )
+
+      if (computeContextName) {
+        selectedComputeContextName = computeContextName
+      }
+    }
+
     /**
      * We are overriding default `sasjsConfig` object fields with this object fields.
      * Here we want to run this request using original WEB method.
      * contextName: null is the MUST field for it.
      */
     let overrideConfig = {
-      useComputeApi: false,
-      contextName: this.sasJsConfig.contextName,
+      useComputeApi: null,
+      contextName: selectedComputeContextName,
       debug: true
     }
 
@@ -148,8 +312,23 @@ export class AutomaticComponent implements OnInit {
         } else {
           this.autoDeployStatus.runMakeData = false
         }
+
+        if (typeof res.sasjsAbort !== 'undefined') {
+          const abortRes = res
+          const abortMsg = abortRes.sasjsAbort[0].MSG
+          const macMsg = abortRes.sasjsAbort[0].MAC
+
+          this.eventService.showAbortModal('makedata', abortMsg, {
+            SYSWARNINGTEXT: abortRes.SYSWARNINGTEXT,
+            SYSERRORTEXT: abortRes.SYSERRORTEXT,
+            MAC: macMsg
+          })
+        }
+
+        this.updateIndexHtmlComputeContext()
       })
       .catch((err: any) => {
+        this.eventService.showAbortModal('makedata', JSON.stringify(err))
         this.autoDeployStatus.runMakeData = false
         this.autodeployDone = true
 
@@ -161,6 +340,50 @@ export class AutomaticComponent implements OnInit {
       })
   }
 
+  /**
+   * Only when on Viya, this method will update the `contextname` in the `DataController.html` on the SAS drive
+   * This is needed to ensure that the DC will use the same compute context `makedata` service used to run against.
+   */
+  public async updateIndexHtmlComputeContext() {
+    const indexHtmlContent = await this.sasService.getFileContent(
+      `${this.appLoc}/services`,
+      'DataController.html'
+    )
+
+    if (!indexHtmlContent) {
+      this.loggerService.error(
+        `Failed to get DataController.html at ${this.appLoc}/services`
+      )
+      return
+    }
+
+    const computeContextName = this.getComputeContextName(
+      this.selectedComputeContext
+    )
+
+    if (!computeContextName) {
+      this.loggerService.error(
+        `Compute context name not found for ID: ${this.selectedComputeContext} | List: ${JSON.stringify(this.computeContexts)}`
+      )
+      return
+    }
+
+    const updatedContent = indexHtmlContent.replace(
+      /contextname="[^"]*"/g,
+      `contextname="${computeContextName}"`
+    )
+
+    await this.sasService
+      .updateFileContent(
+        `${this.appLoc}/services`,
+        'DataController.html',
+        updatedContent
+      )
+      .catch((err: any) => {
+        this.loggerService.error(`Failed to update DataController.html: ${err}`)
+      })
+  }
+
   public downloadFile(
     content: any,
     filename: string,

client/src/app/deploy/sections/manual/manual.component.scss

@@ -1,4 +0,0 @@
-.clear-memory-button {
-  right: 10px;
-  top: 2px;
-}

client/src/app/deploy/sections/manual/manual.component.ts

@@ -1,4 +1,11 @@
-import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnInit,
+  Output,
+  EventEmitter,
+  ViewEncapsulation
+} from '@angular/core'
 import SASjs, { SASjsConfig } from '@sasjs/adapter'
 import { DcAdapterSettings } from 'src/app/models/DcAdapterSettings'
 import { RequestWrapperResponse } from 'src/app/models/request-wrapper/RequestWrapperResponse'
@@ -10,7 +17,8 @@ import { SasService } from 'src/app/services/sas.service'
 @Component({
   selector: 'app-manual-deploy',
   templateUrl: './manual.component.html',
-  styleUrls: ['./manual.component.scss']
+  styleUrls: ['./manual.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class ManualComponent implements OnInit {
   @Input() sasJs!: SASjs
@@ -266,7 +274,7 @@ export class ManualComponent implements OnInit {
      * contextName: null is the MUST field for it.
      */
     let overrideConfig = {
-      useComputeApi: false,
+      useComputeApi: null,
       contextName: this.sasJsConfig.contextName,
       debug: true
     }

client/src/app/deploy/sections/sasjs-configurator/sasjs-configurator.component.html

@@ -10,11 +10,13 @@
 </p>
 
 <p class="m-0 mt-10">
-  Please specify a physical directory below, to which user
-  <strong>{{ SYSUSERID }}</strong> can write, on behalf of Data Controller:
+  Please specify a physical directory (on the
+  <strong> {{ SYSHOSTNAME }}</strong>
+  compute server) below, to which user
+  <strong>{{ SYSUSERID }}</strong> can write, on behalf of Data Controller.
 </p>
 
-<label class="mt-20 clr-control-label">DC Directory</label>
+<label class="mt-20 clr-control-label">DC Staging Directory</label>
 <div class="mb-10 clr-control-container">
   <div class="clr-input-wrapper">
     <input

client/src/app/deploy/sections/sasjs-configurator/sasjs-configurator.component.scss

@@ -1,23 +0,0 @@
-.clr-control-container {
-  width: 50vw;
-}
-
-.clr-input-wrapper {
-  width: 100%;
-
-  input {
-    width: 100%;
-  }
-}
-
-.thinProgress {
-  left: 0px;
-  right: 0;
-  width: unset;
-  height: 1px;
-  margin-top: 0 !important;
-
-  &::after {
-    top: 0;
-  }
-}

client/src/app/deploy/sections/sasjs-configurator/sasjs-configurator.component.ts

@@ -1,5 +1,12 @@
 import { Location } from '@angular/common'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core'
 import SASjs, { SASjsConfig } from '@sasjs/adapter'
 import { ServerType } from '@sasjs/utils/types/serverType'
 import { DcAdapterSettings } from 'src/app/models/DcAdapterSettings'
@@ -12,7 +19,8 @@ import { SasjsService } from 'src/app/services/sasjs.service'
 @Component({
   selector: 'app-sasjs-configurator',
   templateUrl: './sasjs-configurator.component.html',
-  styleUrls: ['./sasjs-configurator.component.scss']
+  styleUrls: ['./sasjs-configurator.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class SasjsConfiguratorComponent implements OnInit {
   @Input() sasJs!: SASjs

client/src/app/editor/components/edit-record/edit-record.component.scss

@@ -1,238 +0,0 @@
-.record-edit-modal {
-  .column-entry {
-    display: flex;
-    justify-content: space-between;
-    .name-input-row {
-      width: 100%;
-      max-width: 260px;
-
-      .cell-desc {
-        margin-right: 30px;
-        margin-top: 10px;
-      }
-    }
-
-    .inputs-wrapper {
-      flex: 1;
-      display: flex;
-      align-items: center;
-
-      ::ng-deep >*:not(.date-field):not(clr-select-container) {
-        flex: 1;
-      }
-    }
-
-    p {
-      margin-top: 0px;
-    }
-
-    ::ng-deep {
-      .clr-textarea-wrapper {
-        margin-top: 0 !important;
-      }
-
-      .clr-form-control {
-        margin-top: 0px !important;
-      }
-
-      app-soft-select {
-        display: block;
-        width: 224px;
-        border: 1px solid #999;
-        color: #000;
-        padding: calc(.25rem + 2px) .5rem;
-        border-radius: .125rem;
-        font-size: .541667rem;
-        margin-right: 6px;
-
-        input {
-          width: 100%;
-          border: 0;
-
-          &:focus {
-            background: none;
-            border: 0 !important;
-          }
-
-          &::-webkit-outer-spin-button,
-          &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-          }
-        }
-      }
-    }
-
-    &:first-child p:first-child {
-      margin-top: 0;
-    }
-  }
-
-  .date-field {
-    position: relative;
-    display: inline-block;
-
-    textarea {
-      width: 230px;
-    }
-
-    .date-picker {
-      position: absolute;
-      right: 0;
-      top: 4px;
-
-      ::ng-deep {
-        // clr-datepicker-view-manager {
-        //   transform: unset !important;
-        //   left: unset !important;
-        //   right: 70px !important;
-        // }
-        .clr-input-group {
-          border: 0 !important;
-        }
-      }
-    }
-  }
-
-  .modal-body {
-    padding-bottom: 10px;
-  }
-
-  ::ng-deep {
-    clr-select-container {
-      border: 1px solid #999;
-      color: #000;
-      border-radius: .125rem;
-      margin-right: 5px;
-
-      .clr-select-wrapper {
-        max-height: unset;
-
-        &::after {
-          top: 15px;
-        }
-      }
-
-      select {
-        height: auto;
-        padding: 10px;
-        padding-right: 20px;
-        border: 0 !important;
-
-        &:focus {
-          background: 0 0 !important;
-        }
-        &:hover {
-          background: transparent;
-        }
-      }
-    }
-
-    clr-input-container {
-      width: 224px;
-      border: 1px solid #999;
-      color: #000;
-      padding: calc(.25rem + 2px) .5rem;
-      border-radius: .125rem;
-      font-size: .541667rem;
-      margin-right: 6px;
-
-      input {
-        width: 100%;
-        border: 0;
-
-        &:focus {
-          background: none;
-          border: 0 !important;
-        }
-
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-      }
-
-      &.invalid-data {
-        border-color: red;
-      }
-    }
-
-    .modal-dialog {
-      width: 80vw;
-    }
-
-    .clr-control-container {
-      width: 100%;
-
-      textarea {
-        width: 100%;
-        resize: none;
-        border-color: #999;
-
-        &.invalid-data {
-          border-color: red;
-          outline: 0;
-        }
-
-        &.not-char {
-          font-family: "Lucida Console", Monaco, monospace;
-        }
-      }
-    }
-
-    .generate-record-url {
-      right: 40px;
-      top: 40px;
-      font-size: 12px;
-    }
-
-    .generate-record-url-button {
-      right: 25px;
-      top: 5px;
-    }
-
-    .modal-header {
-      padding: 0 0 1rem 0;
-    }
-
-    .modal-footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      // height: 65px;
-
-      .alert {
-        margin: 0;
-      }
-    }
-  }
-}
-
-.prev-next {
-  display: flex;
-  align-items: center;
-
-  p {
-    margin: 0;
-  }
-
-  button {
-    margin: 0px 10px;
-  }
-}
-
-.focusable {
-  &:focus {
-    box-shadow: 0 0 3px 0px #5aa220;
-  }
-}
-
-.entry-input-left-offset {
-  left: -30px;
-}
-
-.validation-info-alert {
-  width: 310px
-}

client/src/app/editor/components/edit-record/edit-record.component.ts

@@ -1,5 +1,12 @@
 import { KeyValue } from '@angular/common'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core'
 import moment from 'moment'
 import { ValidateFilterSASResponse } from 'src/app/models/sas/validate-filter.model'
 import { QueryClause } from 'src/app/models/TableData'
@@ -16,7 +23,8 @@ import { EditRecordModal } from '../../models/EditRecordModal'
 @Component({
   selector: 'app-edit-record',
   templateUrl: './edit-record.component.html',
-  styleUrls: ['./edit-record.component.scss']
+  styleUrls: ['./edit-record.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class EditRecordComponent implements OnInit {
   @Input() currentRecord!: EditRecordModal

client/src/app/editor/components/upload-stater/upload-stater.component.scss

@@ -1,8 +0,0 @@
-:host {
-    display: block;
-}
-
-p {
-    margin: 0;
-    text-align: center;
-}

client/src/app/editor/components/upload-stater/upload-stater.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 /**
  * Goal of this component is to recieve array of strings where every element is one state
@@ -10,7 +10,8 @@ import { Component, OnInit } from '@angular/core'
 @Component({
   selector: 'app-upload-stater',
   templateUrl: './upload-stater.component.html',
-  styleUrls: ['./upload-stater.component.scss']
+  styleUrls: ['./upload-stater.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class UploadStaterComponent implements OnInit {
   public statesList: string[] = [] //States appended to be displayed

client/src/app/editor/editor.component.html

@@ -36,7 +36,7 @@
         <div class="clr-row card-block mt-15 d-flex justify-content-between">
           <div class="clr-col-md-auto">
             <div class="encoding-block">
-              <clr-radio-container class="mt-0-i" clrInline>
+              <clr-radio-container class="mt-0" clrInline>
                 <clr-radio-wrapper>
                   <input
                     type="radio"
@@ -193,13 +193,14 @@
               libName: (libds?.split('.'))![0],
               tableName: (libds?.split('.'))![1]
             } as libdsParsed"
-            class="editor-title text-center mt-0-i"
+            class="editor-title text-center mt-0"
           >
             <clr-tooltip>
               <clr-icon
                 clrTooltipTrigger
                 (click)="datasetInfo = true"
                 shape="info-circle"
+                aria-label="View dataset meta info"
                 class="is-highlight cursor-pointer"
                 size="24"
               ></clr-icon>

client/src/app/editor/editor.component.scss

@@ -1,246 +0,0 @@
-.card {
-  margin-top: 0;
-  border: 0;
-}
-
-.buttonBar {
-  padding: 2px 10px 2px 10px;
-  align-items: center;
-}
-
-.testRed {
-  color: white;
-  background: rgba(255,0,0, 0.8) !important;
-}
-
-hot-table {
-  ::ng-deep {
-    .firstColumnHeaderStyle button.changeType {
-      display: none;
-    }
-
-    .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
-      &.primaryKeyHeaderStyle {
-        background-color: #306b00b0 !important;
-      }
-    }
-
-    .primaryKeyHeaderStyle {
-      background-color: #306b006e !important;
-    }
-
-    th.readonlyCell {
-      div {
-        opacity: 0.4;
-      }
-    }
-
-    td.readonlyCell {
-      opacity: 0.5
-    }
-  }
-}
-
-.submit-reason {
-  min-height: 120px;
-  max-height: 120px;
-  height: 120px;
-}
-
-.infoBar {
-  margin-top:14px;
-  background: #495967;
-  color: white;
-  text-align:center;
-  padding: 3px;
-  font-size: 16px;
-
-  height: 30px;
-
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-
-  span {
-    width: 80%;
-  }
-
-  &:hover {
-    height: unset;
-    white-space: normal;
-
-    span {
-      width: unset;
-    }
-  }
-}
-
-.pkHeader {
-  background: #687682;
-  color: #fff;
-  margin: -1px -1px -1px -1px;
-}
-
-.headerBar {
-  //  padding: 13px 0px 14px 0px;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background: var(--clr-vertical-nav-bg-color);
-}
-
-.error-icon {
-  width: 30px;
-  height: 30px;
-  color: red;
-}
-
-.btnCtrl {
-  display:flex;
-  justify-content:flex-end;
-}
-
-.card-header {
-  border-bottom: 1px solid transparent;
-}
-
-.hidden {
-  visibility: hidden;
-}
-
-.my-drop-zone {
-  border: solid 1px lightgray;
-  border-radius: 10px;
-  background: whitesmoke;
-  box-shadow: inset 0px 0px 4px 2px #a7a5a52b;
-  height: 50vh;
-}
-.nv-file-over {
-  border: solid 2px green;
-} /* Default class applied to drop zones on over */
-
-.file-drop-text{
-  text-align: center;
-}
-
-.nv-file-over {
-  border: solid 2px green;
-} /* Default class applied to drop zones on over */
-
-.file-drop-text{
-  text-align: center;
-}
-
-@media screen and (max-width: 768px) {
-
-  .progresStatic {
-    margin-top:9px!important;
-  }
-
-  .progress, .progress-static {
-    width: calc(100% - 14px);
-  }
-}
-
-.hotEditor {
-  position: relative;
-}
-
-.excel-parsing {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  position: relative;
-
-  .details {
-    margin: 0;
-    position: absolute;
-    top: -45px;
-  }
-}
-
-.edit-record-spinner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.6);
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  width: 100%;
-  z-index: 500;
-}
-
-@media screen and (max-width: 480px) {
-
-   .progresStatic {
-      margin-top:32px!important;
-    }
-
-   .card-block, .card-footer {
-    padding: 10px 0px 0px 0px;
-  }
-}
-
-.content-area {
-  padding: 0 0.8rem 0.8rem 0.8rem !important;
-  padding-top: 0;
-
-  // .card {
-  //   min-height: calc(100vh - 160px);
-  // }
-}
-
-.drop-area {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-
-  margin: 1px;
-
-  border: 2px dashed #fff;
-
-  z-index: -1;
-
-  span {
-    font-size: 20px;
-    margin-top: 20px;
-    padding: 10px;
-    background: #dbdbdb;
-    border-radius: 5px;
-    color: black;
-  }
-}
-
-#submitBtn, #cancelSubmitBtn {
-  width: 150px;
-}
-
-.view-table {
-  font-size: inherit !important;
-}
-
-// When width is smaller remove the text from the buttons
-// keep only the icons
-@media (max-width: 992px) {
-  .icon-collapse {
-    .text {
-      display: none;
-    }
-  }
-}
-
-// FIXME
-// Let's leave it here for a reference if there
-// is an issue with viewboxes/filter modal overlaying
-// we will remove it if no issues found
-// .filter-modal {
-//   z-index: 1210;
-// }

client/src/app/editor/editor.component.ts

@@ -69,7 +69,7 @@ import { ParseResult } from '../models/ParseResult.interface'
   host: {
     class: 'content-container'
   },
-  encapsulation: ViewEncapsulation.Emulated
+  encapsulation: ViewEncapsulation.None
 })
 export class EditorComponent implements OnInit, AfterViewInit {
   @ViewChildren('uploadStater')
@@ -81,11 +81,11 @@ export class EditorComponent implements OnInit, AfterViewInit {
   @ViewChildren('fileUploadInput')
   fileUploadInputCompList: QueryList<ElementRef> = new QueryList()
 
-  public static cnt: number = 0
-  public static nonPkCnt: number = 0
-  public static lastCell: number = 0
+  public static cnt = 0
+  public static nonPkCnt = 0
+  public static lastCell = 0
   private _tableSub: Subscription | undefined
-  public message: string = ''
+  public message = ''
   public $dataFormats: $DataFormats | null = null
   public submit: boolean | undefined
   public cols: Col[] = []
@@ -107,12 +107,12 @@ export class EditorComponent implements OnInit, AfterViewInit {
    */
   restrictions: EditorRestrictions = {}
 
-  datasetInfo: boolean = false
+  datasetInfo = false
   dsmeta: DSMeta[] = []
   versions: Version[] = []
   dsNote = ''
 
-  viewboxes: boolean = false
+  viewboxes = false
 
   Infinity = Infinity
 
@@ -154,7 +154,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
               selection: any[],
               clickEvent: MouseEvent
             ) => {
-              let firstSelection = selection[0]
+              const firstSelection = selection[0]
 
               if (firstSelection.start.row === firstSelection.end.row) {
                 this.editRecord(null, firstSelection.start.row)
@@ -195,25 +195,25 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
   public hotCellsPropRow: number | null = null
 
-  public filter: boolean = false
-  public submitLoading: boolean = false
-  public uploadLoading: boolean = false
+  public filter = false
+  public submitLoading = false
+  public uploadLoading = false
   public rowsChanged: any = {
     rowsUpdated: 0,
     rowsDeleted: 0,
     rowsAdded: 0
   }
   public modifedRowsIndexes: number[] = []
-  public queryErr: boolean = false
+  public queryErr = false
   public queryErrMessage: string | undefined
-  public successEnable: boolean = false
+  public successEnable = false
   public libTab: string | undefined
   public queryFilter: any
   public _query: Subscription | undefined
 
   public whereString: string | undefined
   public clauses: any
-  public nullVariables: boolean = false
+  public nullVariables = false
 
   public tableId: string | undefined
   public pkFields: any = []
@@ -221,53 +221,53 @@ export class EditorComponent implements OnInit, AfterViewInit {
   public libds: string | undefined
   public filter_pk: string | undefined
   public table: any
-  public filename: string = ''
+  public filename = ''
   public selectedColumn: any
   public hotSelection: Array<number> | null | undefined
-  public submitLimitNotice: boolean = false
-  public badEdit: boolean = false
+  public submitLimitNotice = false
+  public badEdit = false
   public badEditCause: string | undefined
   public badEditTitle: string | undefined
   public tableTrue: boolean | undefined
-  public saveLoading: boolean = false
+  public saveLoading = false
   public approvers: string[] = []
   public approver: any
   public readOnlyFields!: number
-  public errValidation: boolean = false
+  public errValidation = false
   public dataObj: any
   public disableSubmit: boolean | undefined
-  public pkNull: boolean = false
-  public noPkNull: boolean = false
+  public pkNull = false
+  public noPkNull = false
   public tableData: Array<any> = []
-  public queryText: string = ''
-  public queryTextSaved: string = ''
-  public showApprovers: boolean = false
-  public pkDups: boolean = false
-  public validationDone: number = 0
+  public queryText = ''
+  public queryTextSaved = ''
+  public showApprovers = false
+  public pkDups = false
+  public validationDone = 0
   public duplicatePkIndexes: any = []
   public columnHeader: string[] = []
   public specInfo: { col: string; len: number; type: number }[] = []
-  public tooLong: boolean = false
+  public tooLong = false
   public exceedCells: {
     col: string
     len: number
     val: string
   }[] = []
   public uploader: FileUploader = new FileUploader()
-  public uploadUrl: string = ''
-  public excelFileReady: boolean = false
-  public uploadPreview: boolean = false
-  public excelFileParsing: boolean = false
+  public uploadUrl = ''
+  public excelFileReady = false
+  public uploadPreview = false
+  public excelFileParsing = false
   public excelUploadState: string | null = null
   public data: AOA = []
   public headerArray: string[] = []
   public hotDataSchema: any = {}
   public headerShow: string[] = []
-  public headerVisible: boolean = false
-  public hasBaseDropZoneOver: boolean = false
-  public hasAnotherDropZoneOver: boolean = false
+  public headerVisible = false
+  public hasBaseDropZoneOver = false
+  public hasAnotherDropZoneOver = false
   public headerPks: string[] = []
-  public columnLevelSecurityFlag: boolean = false
+  public columnLevelSecurityFlag = false
   public dateTimeHeaders: string[] = []
   public timeHeaders: string[] = []
   public dateHeaders: string[] = []
@@ -286,12 +286,12 @@ export class EditorComponent implements OnInit, AfterViewInit {
   dataModified!: any[]
 
   public filePasswordSubject: Subject<string | undefined> = new Subject()
-  public fileUnlockError: boolean = false
+  public fileUnlockError = false
 
-  public filePasswordModal: boolean = false
-  public showUploadModal: boolean = false
-  public discardSourceFile: boolean = false
-  public manualFileEditModal: boolean = false
+  public filePasswordModal = false
+  public showUploadModal = false
+  public discardSourceFile = false
+  public manualFileEditModal = false
 
   public recordAction: string | null = null
 
@@ -299,25 +299,25 @@ export class EditorComponent implements OnInit, AfterViewInit {
   public currentEditRecordValidator: DcValidator | undefined
   public currentEditRecordLoadings: number[] = []
   public currentEditRecordErrors: number[] = []
-  public currentEditRecordIndex: number = -1
+  public currentEditRecordIndex = -1
 
-  public generateEditRecordUrlLoading: boolean = false
+  public generateEditRecordUrlLoading = false
   public generatedRecordUrl: string | null = null
   public addRecordUrl: string | null = null
-  public recordNewOrPkModified: boolean = false
-  public addRecordLoading: boolean = false
-  public singleRowSelected: boolean = false
-  public addingNewRow: boolean = false
-  public getdataError: boolean = false
-  public zeroFilterRows: boolean = false
+  public recordNewOrPkModified = false
+  public addRecordLoading = false
+  public singleRowSelected = false
+  public addingNewRow = false
+  public getdataError = false
+  public zeroFilterRows = false
 
-  public tableFileDragOver: boolean = false
+  public tableFileDragOver = false
 
   /**
    * Hash/values table used for dynamic cell validation
    */
   public cellValidationSource: CellValidationSource[] = []
-  public validationTableLimit: number = 20
+  public validationTableLimit = 20
   public extendedCellValidationFields: {
     DISPLAY_INDEX: number
     EXTRA_COL_NAME: number
@@ -463,8 +463,8 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.hasBaseDropZoneOver = e
   }
 
-  public attachFile(event: any, dropped: boolean = false) {
-    let file: File = dropped ? event[0] : event.target.files[0]
+  public attachFile(event: any, dropped = false) {
+    const file: File = dropped ? event[0] : event.target.files[0]
 
     this.excelUploadState = 'Loading'
     this.excelFileParsing = true
@@ -494,7 +494,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
           this.eventService.showInfoModal('Table Found', tableFoundInfo)
         }
       )
-      .then((parseResult: ParseResult | undefined) => {
+      .then(async (parseResult: ParseResult | undefined) => {
         if (parseResult) {
           this.excelFileReady = true
 
@@ -507,7 +507,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
             this.getPendingExcelPreview()
           } else {
             // otherwise it's csv file, and we send them directly
-            this.uploadParsedFiles()
+            await this.uploadParsedFiles()
           }
         }
       })
@@ -542,7 +542,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
    * This method will run validations and upload all of the pending files
    * that are in the uploader queue.
    */
-  public uploadParsedFiles() {
+  public async uploadParsedFiles() {
     if (this.checkInvalid()) {
       this.eventService.showAbortModal(null, 'Invalid values are present.')
       return
@@ -559,7 +559,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
 
     this.uploadLoading = true
-    let filesToUpload: UploadFile[] = []
+    const filesToUpload: UploadFile[] = []
 
     for (const file of this.uploader.queue) {
       filesToUpload.push({
@@ -568,7 +568,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
       })
     }
 
-    this.sasService
+    await this.sasService
       .uploadFile(this.uploadUrl, filesToUpload, { table: this.libds })
       .then(
         (res: UploadFileResponse) => {
@@ -577,7 +577,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
               return
             } else {
               this.uploadLoading = false
-              let params = res.adapterResponse.sasparams[0]
+              const params = res.adapterResponse.sasparams[0]
               this.successEnable = true
               this.tableId = params.DSID
               this.router.navigateByUrl('/stage/' + this.tableId)
@@ -628,10 +628,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
     this.toggleHotPlugin('contextMenu', false)
 
-    let previewDatasource: any[] = []
+    const previewDatasource: any[] = []
 
     this.data.map((item) => {
-      let itemObject: any = {}
+      const itemObject: any = {}
 
       this.headerShow.map((header: any, index: number) => {
         itemObject[header] = item[index]
@@ -710,7 +710,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.editTable(true)
   }
 
-  private appendUploadState(state: string, replaceLast: boolean = false) {
+  private appendUploadState(state: string, replaceLast = false) {
     this.cdf.detectChanges()
 
     if (this.uploadStaterCompList.first) {
@@ -743,7 +743,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
   async sendClause() {
     this.submitLoading = true
     let nullVariableArr = []
-    let emptyVariablesArr = []
+    const emptyVariablesArr = []
 
     // to check number of empty clauses
     if (typeof this.clauses === 'undefined') {
@@ -751,7 +751,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
       this.submitLoading = false
       return
     } else {
-      let query = this.clauses.queryObj
+      const query = this.clauses.queryObj
 
       if (query[0].elements.length < 1) {
         // Clear cached filtering data
@@ -866,9 +866,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
     const hot = this.hotInstance
 
-    let columnSorting = hot.getPlugin('multiColumnSorting')
-    let columnSortConfig = columnSorting.getSortConfig()
-    let sortConfigs = Array.isArray(columnSortConfig)
+    const columnSorting = hot.getPlugin('multiColumnSorting')
+    const columnSortConfig = columnSorting.getSortConfig()
+    const sortConfigs = Array.isArray(columnSortConfig)
       ? columnSortConfig
       : [columnSortConfig]
 
@@ -891,7 +891,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
       hot.render()
 
-      for (let sortConfig of sortConfigs) {
+      for (const sortConfig of sortConfigs) {
         columnSorting.sort(sortConfig)
       }
 
@@ -900,9 +900,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
   }
 
   convertToCorrectTypes(dataSource: any) {
-    for (let row of dataSource) {
-      for (let colKey in row) {
-        let colSpecs = this.cols.find((x: any) => x.NAME === colKey)
+    for (const row of dataSource) {
+      for (const colKey in row) {
+        const colSpecs = this.cols.find((x: any) => x.NAME === colKey)
 
         if (colSpecs) {
           if (
@@ -923,9 +923,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.cellValidationSource = []
 
     const hot = this.hotInstance
-    let columnSorting = hot.getPlugin('multiColumnSorting')
-    let columnSortConfig = columnSorting.getSortConfig()
-    let sortConfigs = Array.isArray(columnSortConfig)
+    const columnSorting = hot.getPlugin('multiColumnSorting')
+    const columnSortConfig = columnSorting.getSortConfig()
+    const sortConfigs = Array.isArray(columnSortConfig)
       ? columnSortConfig
       : [columnSortConfig]
 
@@ -946,14 +946,14 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
     hot.validateRows(this.modifedRowsIndexes)
     // this.editRecordListeners();
-    for (let sortConfig of sortConfigs) {
+    for (const sortConfig of sortConfigs) {
       columnSorting.sort(sortConfig)
     }
 
     this.checkRowLimit()
   }
 
-  timesClicked: number = 0
+  timesClicked = 0
   public hotClicked() {
     if (this.timesClicked === 1 && this.hotTable.readOnly) {
       this.editTable()
@@ -982,7 +982,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     setTimeout(() => {
       const hot = this.hotInstance
 
-      let dsInsertIndex = this.dataSource.length
+      const dsInsertIndex = this.dataSource.length
       hot.alter('insert_row_below', dsInsertIndex, 1)
       hot.updateSettings({ data: this.dataSource }, false)
       hot.selectCell(this.dataSource.length - 1, 0)
@@ -1040,14 +1040,14 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.dataModified = []
 
     for (let i = 0; i < this.dataSource.length; i++) {
-      let dataRow = this.helperService.deepClone(this.dataSource[i])
+      const dataRow = this.helperService.deepClone(this.dataSource[i])
 
       if (dataRow._____DELETE__THIS__RECORD_____ === 'Yes') {
         this.dataModified.push(dataRow)
         rowsDeleted++
       } else {
-        let dataRowUnchanged = this.dataSourceUnchanged.find((row: any) => {
-          for (let pkCol of this.headerPks) {
+        const dataRowUnchanged = this.dataSourceUnchanged.find((row: any) => {
+          for (const pkCol of this.headerPks) {
             if (row[pkCol] !== dataRow[pkCol]) {
               return false
             }
@@ -1080,7 +1080,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
   public validatePrimaryKeys() {
     const hot = this.hotInstance
 
-    let myTable = hot.getData()
+    const myTable = hot.getData()
     this.pkFields = []
     for (let index = 0; index < myTable.length; index++) {
       let pkRow = ''
@@ -1090,8 +1090,8 @@ export class EditorComponent implements OnInit, AfterViewInit {
       this.pkFields.push(pkRow)
     }
 
-    let results = []
-    let rows = this.dataSource.length
+    const results = []
+    const rows = this.dataSource.length
 
     for (let j = 0; j < this.pkFields.length; j++) {
       for (let i = 0; i < this.pkFields.length; i++) {
@@ -1136,12 +1136,12 @@ export class EditorComponent implements OnInit, AfterViewInit {
    * when we don't want to re-set force values of every row in the table
    */
   public reSetCellValidationValues(
-    setForcedValues: boolean = false,
+    setForcedValues = false,
     specificRowForceValue?: number
   ) {
     const hot = this.hotInstance
 
-    for (let entry of this.cellValidationSource) {
+    for (const entry of this.cellValidationSource) {
       const colSource = entry.values.map(
         (el: any) => el[this.cellValidationFields.RAW_VALUE]
       )
@@ -1196,7 +1196,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
   public reSetExtendedCellValidationValues(
     cellValidationEntry?: CellValidationSource,
     row?: number,
-    setForcedValues: boolean = false,
+    setForcedValues = false,
     specificRowForceValue?: number
   ) {
     const hot = this.hotInstance
@@ -1218,7 +1218,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
       return
     }
 
-    for (let entry of this.cellValidationSource) {
+    for (const entry of this.cellValidationSource) {
       const extendedValuesObject = this.getExtendedValuesByCellValue(entry)
 
       this.setExtendedValuesToCells(
@@ -1235,19 +1235,19 @@ export class EditorComponent implements OnInit, AfterViewInit {
     cellValidationEntry: CellValidationSource,
     row: number,
     extendedValues: DynamicExtendedCellValidation[],
-    setForcedValues: boolean = false,
+    setForcedValues = false,
     specificRowForceValue?: number
   ) {
     const hot = this.hotInstance
 
-    let uniqueCells: any[] = []
+    const uniqueCells: any[] = []
 
-    for (let element of extendedValues) {
+    for (const element of extendedValues) {
       if (uniqueCells.indexOf(element.EXTRA_COL_NAME) < 0)
         uniqueCells.push(element.EXTRA_COL_NAME)
     }
 
-    for (let cell of uniqueCells) {
+    for (const cell of uniqueCells) {
       const valuesForCol = extendedValues.filter(
         (x) => x.EXTRA_COL_NAME === cell
       )
@@ -1385,10 +1385,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
     const extendedValuesObject = []
 
-    for (let extendedValue of filteredValues || []) {
-      let tempObj: any = {}
+    for (const extendedValue of filteredValues || []) {
+      const tempObj: any = {}
 
-      for (let key of Object.keys(prepObj)) {
+      for (const key of Object.keys(prepObj)) {
         tempObj[key] = extendedValue[prepObj[key]]
       }
 
@@ -1442,7 +1442,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     /**
      * Below code should be analized, not sure what is the purpose of exceedCells
      */
-    let myTableData = hot.getData()
+    const myTableData = hot.getData()
 
     // If the last row is empty, remove it before validation
     if (myTableData.length > 1 && hot.isEmptyRow(myTableData.length - 1)) {
@@ -1462,7 +1462,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
     hot.validateRows(this.modifedRowsIndexes, () => {
       if (this.checkInvalid()) {
-        let abortMsg = 'Invalid Values are Present'
+        const abortMsg = 'Invalid Values are Present'
 
         this.eventService.showInfoModal('Validation error', abortMsg)
 
@@ -1473,7 +1473,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
       this.validationDone = 1
 
       setTimeout(() => {
-        let txt: any = document.getElementById('formFields_8')
+        const txt: any = document.getElementById('formFields_8')
         if (txt) txt.focus()
       }, 200)
     })
@@ -1490,11 +1490,11 @@ export class EditorComponent implements OnInit, AfterViewInit {
 
   public async saveTable(data: any) {
     const hot = this.hotInstance
-    let hotData = hot.getData()
+    const hotData = hot.getData()
 
     data = data.filter((dataRow: any) => {
-      let elModified = this.dataModified.find((row) => {
-        for (let pkCol of this.headerPks) {
+      const elModified = this.dataModified.find((row) => {
+        for (const pkCol of this.headerPks) {
           if (row[pkCol] !== dataRow[pkCol]) {
             return false
           }
@@ -1507,7 +1507,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     })
 
     data = data.map((row: any) => {
-      let deleteColValue = row['_____DELETE__THIS__RECORD_____']
+      const deleteColValue = row['_____DELETE__THIS__RECORD_____']
 
       delete row['_____DELETE__THIS__RECORD_____']
       row['_____DELETE__THIS__RECORD_____'] = deleteColValue
@@ -1525,7 +1525,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.loggerService.log('Data submitted', data)
 
     if (this.checkInvalid()) {
-      let abortMsg = 'Invalid Values are Present'
+      const abortMsg = 'Invalid Values are Present'
       this.eventService.showInfoModal('Validation error', abortMsg)
       this.cancelSubmit()
       this.submit = false
@@ -1543,7 +1543,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
       this.saveLoading = true
       this.disableSubmit = false
       this.submit = true
-      let updateParams: any = {}
+      const updateParams: any = {}
       updateParams.ACTION = 'LOAD'
       this.message = this.message.replace(/\n/g, '. ')
       updateParams.MESSAGE = this.message
@@ -1576,7 +1576,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
             let error = `Submit request failed`
 
             if (res) {
-              let errorText =
+              const errorText =
                 typeof res === 'string' ? res : JSON.stringify(res)
 
               error += `\n${errorText}`
@@ -1596,7 +1596,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
             this.disableSubmit = true
             this.submit = false
 
-            let errorText =
+            const errorText =
               typeof err.adapterRespnse === 'string'
                 ? err.adapterRespnse
                 : JSON.stringify(err.adapterRespnse)
@@ -1669,7 +1669,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     }
   }
 
-  confirmRecordEdit(close: boolean = true) {
+  confirmRecordEdit(close = true) {
     const closingRecordIndex = this.currentEditRecordIndex
 
     if (close) this.currentEditRecordIndex = -1
@@ -1771,7 +1771,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
       )
 
       // Update that copy with current cells meta (dynamic validation data)
-      for (let cellMeta of currentEditRecordCellsMeta) {
+      for (const cellMeta of currentEditRecordCellsMeta) {
         if (cellMeta) {
           const data = cellMeta.prop?.toString() //------------
           delete cellMeta.prop // We convert to be able to update dcValidator rule by using CellProperties
@@ -1795,7 +1795,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     const hot = this.hotInstance
 
     hot.batch(() => {
-      let contextMenuPlugin = hot.getPlugin<any>(pluginName)
+      const contextMenuPlugin = hot.getPlugin<any>(pluginName)
 
       if (!contextMenuPlugin) {
         console.warn(
@@ -2222,7 +2222,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     })
 
     // recover lib and table parameters from url; filter pk is optional - if filter is applied
-    let myParams: any = {}
+    const myParams: any = {}
     if (typeof this.route.snapshot.params['libMem'] !== 'undefined') {
       this.libds = this.route.snapshot.params['libMem']
       this.filter_pk = this.route.snapshot.params['filterId']
@@ -2503,7 +2503,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     this.columnHeader[0] = 'Delete?'
     this.readOnlyFields = response.data.sasparams[0].PKCNT
 
-    let hotInstaceEl = document.getElementById('hotInstance')
+    const hotInstaceEl = document.getElementById('hotInstance')
 
     if (hotInstaceEl) {
       hotInstaceEl.addEventListener('mousedown', (event) => {
@@ -2512,7 +2512,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
         }
 
         setTimeout(() => {
-          let menuDebugItem: any =
+          const menuDebugItem: any =
             document.querySelector('.debug-switch-item') || undefined
           if (menuDebugItem) menuDebugItem.click()
         }, 100)
@@ -2602,7 +2602,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
     hot.addHook('afterCreateRow', (source: any, change: any) => {
       if (source > this.dataSource.length) {
         // don't scroll if row is not added to the end (bottom)
-        let wtHolder = document.querySelector('.wtHolder')
+        const wtHolder = document.querySelector('.wtHolder')
 
         setTimeout(() => {
           if (wtHolder) wtHolder.scrollTop = wtHolder.scrollHeight

client/src/app/group/group.component.scss

@@ -1,85 +0,0 @@
-@import '../../colors.scss';
-
-::ng-deep body[cds-theme="dark"] {
-  .group-info {
-      background-color: $headerBackground;
-      border-color: $headerBackground;
-  }
-
-  .group-data {
-      background-color: $headerBackground;
-      border-color: $headerBackground;
-  }
-
-  .member-table tbody{
-    tr:hover{
-        background-color: #29404b;
-    }
-  }
-}
-
-::ng-deep body[cds-theme="light"] {
-  .group-info{
-      background-color: #f9f9f9;
-      border-color: #a7a7a7;
-      box-shadow: 0px 2px 5px #dad7d7;
-  }
-
-  .group-data {
-      background-color: #f9f9f9;
-      border-color: #a7a7a7;
-      box-shadow: 0px 2px 5px #dad7d7;
-  }
-
-  .member-table tbody{
-    tr:hover{
-          background-color: #e6e6e6;
-      }
-  }
-}
-
-.sidebar-height{
-    height: 100%;
-}
-.group-info-text{
-    display: inline;
-    font-size: 20px;
-}
-.group-info{
-    border: 1px solid;
-    border-radius: 3px;
-}
-.group-info td{
-    text-align: center;
-}
-
-.group-data{
-  border: 1px solid;
-  border-radius: 3px;
-}
-
-.group-data{
-  min-height: auto;
-  h3, h5{
-      text-align: center;
-}
-
-.member-table{
-  width: 100%;
-}
-
-.member-table tbody{
-  tr:hover{
-      cursor: pointer;
-  }
-}
-}
-.table-container{
-  overflow: auto;
-}
-
-@media screen and (max-width: 768px){
-  .group-data{
-    min-height: unset !important;
-  }
-}

client/src/app/group/group.component.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { SASjsConfig } from '@sasjs/adapter'
 import { ServerType } from '@sasjs/utils/types/serverType'
@@ -14,7 +14,8 @@ import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapper
   styleUrls: ['./group.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class GroupComponent implements OnInit {
   public groups: Array<any> | undefined

client/src/app/home/home.component.html

@@ -123,11 +123,11 @@
     </div>
 
     <div *ngIf="!loading" class="no-table-selected">
-      <clr-icon
-        shape="warning-standard"
-        size="60"
-        class="is-info icon-dc-fill"
-      ></clr-icon>
+      <img
+        src="images/select-table.png"
+        class="select-table-icon"
+        alt="select table icon"
+      />
       <p
         *ngIf="treeNodeLibraries?.length! > 0"
         class="text-center color-gray mt-10"

client/src/app/home/home.component.scss

@@ -1,32 +0,0 @@
-clr-tree-node button {
-  white-space: nowrap;
-}
-
-.card-block {
-  height: 100%;
-  padding: 0;
-}
-
-.no-table-selected {
-  position: relative;
-  height: 100%;
-}
-
-::ng-deep {
-  // .badge.badge-info {
-  //     background: #6a9235!important;
-  //     color: #fff;
-  // }
-  clr-icon.is-blue, clr-icon.is-info {
-    fill: #6a9235;
-  }
-}
-
-.spinner-wrapper-fullpage {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-}

client/src/app/home/home.component.ts

@@ -3,7 +3,7 @@
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
-import { Component, AfterContentInit } from '@angular/core'
+import { Component, AfterContentInit, ViewEncapsulation } from '@angular/core'
 import { Router } from '@angular/router'
 import { ActivatedRoute } from '@angular/router'
 import { globals } from '../_globals'
@@ -18,7 +18,8 @@ import { LicenceService } from '../services/licence.service'
   templateUrl: './home.component.html',
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class HomeComponent implements AfterContentInit {
   public treeNodeLibraries: Array<any> | null = null

client/src/app/licensing/licensing.component.scss

@@ -1,51 +0,0 @@
-:host {
-  height: calc(100% - 96px);
-  padding: 20px 20px;
-}
-
-.card {
-  margin-top: 0;
-}
-
-.key-error {
-  font-size: 16px;
-}
-
-.misskey {
-  color: #E74C3C;
-}
-
-.license-key-form, .activation-key-form {
-  padding: 0;
-
-  .clr-control-container {
-    width: 100%;
-
-    textarea {
-      width: 100%;
-      height: 170px;
-      max-height: 170px;
-      min-height: 170px;
-      resize: none;
-    }
-  }
-}
-
-.apply-keys {
-  height: 40px;
-}
-
-.drop-area {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 15px;
-  border: 2px dashed #b2b2b2;
-  border-radius: 4px;
-  cursor: pointer;
-  margin: 10px 0;
-}
-
-clr-tabs button {
-  box-shadow: none !important
-}

client/src/app/licensing/licensing.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AppService, LicenceService, SasService } from '../services'
 import { LicenseKeyData } from '../models/LicenseKeyData'
@@ -14,7 +14,8 @@ enum LicenseActions {
 @Component({
   selector: 'app-licensing',
   templateUrl: './licensing.component.html',
-  styleUrls: ['./licensing.component.scss']
+  styleUrls: ['./licensing.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class LicensingComponent implements OnInit {
   public action: LicenseActions | null = null

client/src/app/lineage/lineage.component.scss

@@ -1,85 +0,0 @@
-@import '../../colors.scss';
-
-.toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: $headerBackground;
-    background-color: $headerBackground !important;
-    transition: .15s ease-in;
-    transition-property: border-color,background-color;
-}
-
-#graph{
-    height: calc(100vh - 195px);
-    overflow: hidden;
-    text-align: center;
-    display: block;
-    width: 100%;
-    border: 1px solid #e4e4e4;
-    margin-top: 10px;
-}
-
-.selection-wrapper {
-    width: 100%;
-    max-width: 670px;
-}
-
-.column-active {
-    background: #d8e3e9;
-    color: black;
-}
-
-.content-area {
-    padding: 0.5rem !important;
-
-    .card {
-        min-height: calc(100vh - 120px);
-
-        .card-block {
-            padding: 0.5rem 0.35rem !important;
-        }
-    }
-}
-
-clr-tree-node button {
-    white-space: nowrap;
-}
-
-.btn-group.direction {
-    margin-left: var(--cds-global-space-6);
-}
-
-.graph-render-spinner {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    margin-top: 10px;
-}
-
-.biglineage-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    margin-bottom: 20px;
-}
-
-.modal-footer {
-    p {
-        margin: 0;
-    }
-}
-
-.lineage-title-wrapper {
-    left: 12px;
-}
-
-.max-depth-input {
-    width: 100%;
-}
-
-@media (max-width: 768px) {
-    .toggle-switch-container {
-        margin-bottom: 20px;
-    }
-}

client/src/app/lineage/lineage.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, ViewEncapsulation } from '@angular/core'
 import { Location } from '@angular/common'
 import { globals } from '../_globals'
 import * as d3Viz from 'd3-graphviz'
@@ -18,7 +18,8 @@ const moment = require('moment')
   templateUrl: './lineage.component.html',
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class LineageComponent {
   public switchFlag: boolean = false

client/src/app/metadata/metadata.component.scss

@@ -1,82 +0,0 @@
-::ng-deep body[cds-theme="dark"] {
-  .object-header:hover {
-    background-color: #405560;
-  }
-}
-
-::ng-deep body[cds-theme="light"] {
-  .objects-col {
-    background: white;
-  }
-
-  .object-header:hover {
-    background-color: #d8e3e9;
-  }
-}
-
-.objects-col{
-  height: 75vh;
-  overflow: scroll;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-}
-
-.cols-head {
-  border: 1px solid #cccccc;
-  padding: 10px;
-  display: flex;
-}
-.object-text {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-left: 10px;
-  flex: 1;
-}
-.repo-dropdown{
-  margin-right: 15px;
-  margin-left: 15px;
-  margin-bottom: 10px;
-}
-.clr-accordion-title{
-  width: 100%;
-}
-.float-right{
-  margin: 0px;
-  float: right;
-}
-.full-width{
-  width: 100%;
-}
-.object-uri{
-  margin: 0px;
-  margin-top: 5px;
-}
-.object-header{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 3px;
-  padding-right: 3px;
-}
-.object-header:hover{
-  border-radius: 3px;
-}
-.datagrid-host{
-  display: unset !important;
-}
-
-.card {
-  margin-top: 0;
-
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.content-area {
-  padding: 0.5rem !important;
-
-  display: flex;
-  flex-direction: column;
-}

client/src/app/metadata/metadata.component.ts

@@ -1,5 +1,5 @@
 import { Location } from '@angular/common'
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ClrDatagridStringFilterInterface } from '@clr/angular'
 import { Observable, of } from 'rxjs'
@@ -50,7 +50,8 @@ class ValueFilter implements ClrDatagridStringFilterInterface<MetaData> {
   styleUrls: ['./metadata.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class MetadataComponent implements OnInit {
   metaDataList: Array<any> | undefined

client/src/app/multi-dataset/multi-dataset.component.html

@@ -127,7 +127,7 @@
       class="no-table-selected pointer-events-none"
     >
       <clr-icon
-        shape="warning-standard"
+        shape="upload-cloud"
         size="40"
         class="is-info icon-dc-fill"
       ></clr-icon>

client/src/app/multi-dataset/multi-dataset.component.scss

@@ -1,54 +0,0 @@
-.no-table-selected {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  position: absolute;
-  background: var(--clr-vertical-nav-bg-color);
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  top: 0;
-}
-
-.header-row {
-  padding: 15px 0;
-  border-bottom: 1px solid #d3d3d3;
-}
-
-.dataset-input-wrapper {
-  max-width: 500px;
-  width: 100%;
-
-  textarea {
-    min-height: 200px;
-    height: 200px;
-  }
-}
-
-.submit-reason {
-  min-height: 70px;
-  max-height: 70px;
-  height: 70px;
-}
-
-.log-wrapper {
-  margin: 0 10px;
-  height: auto;
-}
-
-::ng-deep td.not-matched {
-  background-color: #ff000054;
-}
-
-.dataset-selection-actions {
-  border-top: 1px solid #d3d3d3;
-}
-
-.licence-limit-notice {
-  color: var(--cds-alias-status-warning-dark);
-}
-
-.submission-results {
-  border-bottom: 1px solid #d3d3d3;
-}

client/src/app/multi-dataset/multi-dataset.component.ts

@@ -4,7 +4,8 @@ import {
   ElementRef,
   HostBinding,
   OnInit,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core'
 import {
   EventService,
@@ -45,7 +46,8 @@ enum FileLoadingState {
 @Component({
   selector: 'app-multi-dataset',
   templateUrl: './multi-dataset.component.html',
-  styleUrls: ['./multi-dataset.component.scss']
+  styleUrls: ['./multi-dataset.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class MultiDatasetComponent implements OnInit {
   @HostBinding('class.content-container') contentContainerClass = true

client/src/app/not-found/not-found.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-not-found',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./not-found.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class NotFoundComponent implements OnInit {
   constructor() {}

client/src/app/query/query.component.scss

@@ -1,307 +0,0 @@
-::ng-deep {
-    body[cds-theme="dark"] {
-        .clause-logic {
-            background: #192a30;
-        }
-
-        .clause-query {
-            background: #263e48;
-        }
-    }
-
-    body[cds-theme="light"] {
-        .clause-logic {
-            background: #e9e9e9;
-        }
-
-        .clause-query {
-            background: #fbf8f8;
-        }
-    }
-}
-
-.content {
-    display: flex;
-
-    .clauses-container {
-        display: flex;
-        flex-direction: column;
-
-        .clause-logic {
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-
-            padding: 15px;
-        }
-
-        .clause-query {
-            padding: 30px 0px 20px 20px;
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            position: relative;
-
-            & > .clr-row {
-                justify-content: space-between;
-
-                &:not(:last-child) {
-                    padding-bottom: 15px;
-                    margin-bottom: 15px;
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.16)
-                }
-            }
-
-            .remove-group-clause-button {
-                position: absolute;
-                top: 0px;
-                right: 10px;
-                color: gray;
-            }
-
-            .variable-col {
-                display: flex;
-                align-items: flex-start;
-                padding-bottom: 1px;
-
-                .datalist-wrapper {
-                    width: 100%;
-
-                    input {
-                        width: 100%;
-                    }
-                }
-            }
-
-            .operator-col {
-                display: flex;
-                align-items: flex-start;
-
-                clr-select-container {
-                    height: 45px;
-                    margin-top: 0;
-                    width: 100%;
-                }
-            }
-
-            .value-col {
-                display: flex;
-                align-items: flex-start;
-                padding-bottom: 1px;
-
-                .checkbox-vals {
-                    width: 100%;
-                    padding: 0px 5px;
-                    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-                    clr-checkbox-container {
-                        margin-top: 0;
-                    }
-
-                    section {
-                        max-height: 120px;
-                        overflow-y: scroll;
-                    }
-                }
-
-                .single-field-vals {
-                    width: 100%;
-
-                    ::ng-deep {
-                        .clr-control-container {
-                            width: 100%;
-
-                            .clr-input-wrapper {
-                                max-width: none;
-
-                                .clr-input-group {
-                                    width: 100%;
-                                }
-                            }
-                        }
-                    }
-
-                    & > input {
-                        width: 100%;
-                    }
-
-                    input[type=time] {
-                        width: 100%;
-                        padding-right: 17px;
-                    }
-                }
-
-                .range-vals {
-                    width: 100%;
-
-                    ::ng-deep {
-                        .clr-control-container {
-                            width: 100%;
-
-                            .clr-input-wrapper {
-                                max-width: none;
-
-                                .clr-input-group {
-                                    width: 100%;
-                                }
-                            }
-                        }
-                    }
-
-                    .from {
-                        margin-bottom: 10px;
-
-                        & > input {
-                            width: 100%;
-                        }
-
-                        input[type=time] {
-                            width: 100%;
-                            padding-right: 17px;
-                        }
-                    }
-
-                    .from, .to {
-                        min-width: 100px;
-
-                        & > input {
-                            width: 100%;
-                        }
-
-                        input[type=time] {
-                            width: 100%;
-                            padding-right: 17px;
-                        }
-                    }
-                }
-
-                .contains-vals {
-                    width: 100%;
-
-                    ::ng-deep {
-                        .clr-control-container {
-                            width: 100%;
-
-                            .clr-input-wrapper {
-                                max-width: none;
-
-                                .clr-input-group {
-                                    width: 100%;
-                                }
-                            }
-                        }
-                    }
-
-                    & > input {
-                        width: 100%;
-                    }
-
-                    input[type=time] {
-                        width: 100%;
-                        padding-right: 17px;
-                    }
-                }
-            }
-
-            .clause-buttons {
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                flex-direction: row;
-                align-items: center;
-
-                button {
-                    min-width: auto;
-                }
-            }
-        }
-    }
-}
-
-.invalid-clause {
-    border-left: 2px solid #d94b31;
-}
-
-.clause-row {
-    clr-icon {
-        margin: 0;
-    }
-}
-
-.clause-row:after {
-    position: relative;
-    content: "";
-    height: .41667rem;
-    width: .41667rem;
-    top: .29167rem;
-    right: .25rem;
-    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org…%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
-    background-repeat: no-repeat;
-    background-size: contain;
-    vertical-align: middle;
-    margin: 0;
-}
-
-::ng-deep body[cds-theme="dark"] {
-    .line-numbers {
-        border-color: #989797 !important;
-    }
-}
-
-pre[class*="language-"] {
-    padding: 8px;
-    margin: 0;
-    border-radius: 1px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 66px;
-
-    position: relative;
-
-    span.spinner {
-        position: absolute;
-        left: 10px;
-        top: 10px;
-    }
-
-    code {
-        white-space: pre-wrap;
-        word-break: break-word;
-    }
-}
-
-.input-val {
-    border: 0px;
-    background: #fbf8f8;
-    border-bottom: 1px solid #999999;
-}
-
-clr-date-container {
-    margin-top: 2px !important;
-}
-
-input[type="time"] {
-    border: 0;
-    background: transparent;
-    border-bottom: 1px solid #b3b3b3;
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.in-values-modal {
-    .modal-footer {
-        border-top: 1px solid #d8d8d8;
-        margin-top: 10px;
-    }
-}
-
-.progress, .progress-static {
-    background-color: transparent;
-    width: 100%;
-    height: 4px;
-    top: 3px;
-}

client/src/app/query/query.component.ts

@@ -6,7 +6,8 @@ import {
   OnDestroy,
   ChangeDetectorRef,
   LOCALE_ID,
-  Input
+  Input,
+  ViewEncapsulation
 } from '@angular/core'
 import { SasStoreService } from '../services/sas-store.service'
 import { globals } from '../_globals'
@@ -27,7 +28,8 @@ registerLocaleData(localeEnGB)
   selector: 'app-query',
   templateUrl: './query.component.html',
   styleUrls: ['./query.component.scss'],
-  providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }]
+  providers: [{ provide: LOCALE_ID, useValue: 'en-GB' }],
+  encapsulation: ViewEncapsulation.None
 })
 export class QueryComponent
   implements AfterViewInit, AfterContentInit, OnDestroy

client/src/app/review/approve-details/approve-details.component.scss

@@ -1,210 +0,0 @@
-@import '../../../colors.scss';
-
-.loader {
-  display:flex;
-  justify-content: center;
-  height:75vh;
-  align-items:center;
-  flex-direction:column
-}
-.modalLarge {
-    width: 50rem!important;
-}
-
-.addedRow {
-  border: 1px solid rgba(9, 77, 117, 0.2);
-  border-radius: 5px;
-}
-
-.deletedRow {
-  border: 1px solid rgba(70, 71, 70, 0.2);
-  border-radius: 5px;
-}
-
-::ng-deep body[cds-theme="dark"] {
-  table {
-    .updatedRow {
-      background: #93971e;
-    }
-
-    .addedRow {
-      background:  rgb(86 153 95);
-    }
-
-    .deletedRow {
-      background: rgb(138 90 90);
-    }
-  }
-}
-
-::ng-deep body[cds-theme="light"] {
-  table {
-    .updatedRow {
-      background: #fafda8;
-    }
-
-    .addedRow {
-      background:  rgb(146, 208, 154);
-    }
-
-    .deletedRow {
-      background: rgb(230, 179, 179);
-    }
-  }
-}
-
-.updatedRow {
-  border: 1px solid rgba(9, 117, 9, 0.2);
-  border-radius: 5px;
-}
-
-.table {
-  border: 0px solid;
-}
-
-.ch {
-  background: rgba(0,0,0,.1);
-  border: 1px solid rgba(104, 100, 0, 0.4);
-  border-radius: 5px;
-}
-
-.ch:hover {
-background: rgba(252, 135, 120, 0.4);
-}
-
-.tooltip .tooltip-content.tooltip-top-right, .tooltip.tooltip-top-right>.tooltip-content, .tooltip>.tooltip-content {
-    font-size: .54167rem;
-    font-weight: 400;
-    letter-spacing: normal;
-    background: $headerBackground;
-    border-radius: .125rem;
-    color: #f0f1ec;;
-    line-height: .75rem;
-    margin: 0;
-    padding: .375rem .5rem;
-    width: 235px;
-    position: absolute;
-    top: auto;
-    bottom: 100%;
-    left: 12px;
-    right: auto;
-    border-bottom-left-radius: 0;
-    margin-bottom: .66667rem;
-}
-
-.tooltip .tooltip-content.tooltip-top-right:before, .tooltip.tooltip-top-right>.tooltip-content:before, .tooltip>.tooltip-content:before {
-    position: absolute;
-    bottom: -.375rem;
-    left: 0;
-    top: auto;
-    right: auto;
-    content: "";
-    border-left: .25rem solid $headerBackground;
-    border-top: .20833rem solid $headerBackground;
-    border-right: .25rem solid transparent;
-    border-bottom: .20833rem solid transparent;
-}
-
-.table {
-border: 0px solid;
-}
-
-.toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: $headerBackground;
-    background-color: $headerBackground !important;
-    transition: .15s ease-in;
-    transition-property: border-color,background-color;
-}
-
-.tableCont {
-  overflow:auto;
-  margin: 15px 10px 10px 10px;
-
-  td {
-    word-break: break-word;
-  }
-}
-
-.approvalInfo {
-  display: flex;
-  justify-content: flex-end
-}
-
-.approvalBack {
-  display: flex;
-  justify-content: flex-start;
-}
-
-@media screen and (max-width:768px) {
-  .approvalInfo {
-    display: flex;
-    justify-content: center;
-    margin-top: 15px;
-
-  }
-
-  .approvalBack {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 15px;
-  }
-
-  .card {
-    margin-top:0rem!important;
-    min-height: calc(100vh - 0px)!important;
-  }
-
-  .table td.left, .table th.left {
-    text-align: left;
-    width: 150px!important;
-    flex: 0
-  }
-}
-
-.table td.left, .table th.left {
-  text-align: left;
-  flex: 1;
-  width: 300px!important;
-}
-
-
-.tooll {
-    position: absolute;
-    background: #e6b3b3;
-    color: $headerBackground;
-    top: 0px;
-    height: 36px;
-    width: 100%;
-    left: 0px;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-}
-
-#acceptBtn, #rejectBtn {
-  width: 175px
-}
-
-.formatted-values-toggle {
-  min-width: 75px
-}
-
-clr-modal {
-  ::ng-deep {
-    .modal-body-wrapper {
-      overflow: auto;
-    }
-  }
-}
-
-.rows-notice {
-  display: flex;
-  align-items: center;
-  margin-right: 10px;
-  color: #6a6a6a;
-  font-size: 15px;
-
-  clr-icon {
-    margin: 0;
-  }
-}

client/src/app/review/approve-details/approve-details.component.ts

@@ -1,6 +1,11 @@
 import { ActivatedRoute } from '@angular/router'
 import { SasStoreService } from '../../services/sas-store.service'
-import { Component, AfterViewInit, OnDestroy } from '@angular/core'
+import {
+  Component,
+  AfterViewInit,
+  OnDestroy,
+  ViewEncapsulation
+} from '@angular/core'
 import { Subscription } from 'rxjs'
 import { Router } from '@angular/router'
 import { EventService } from '../../services/event.service'
@@ -22,7 +27,8 @@ interface ChangesObj {
   styleUrls: ['./approve-details.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
   private _detailsSub: Subscription | undefined
@@ -349,13 +355,12 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
             this.params = param
             this.response = res
             this.calcDiff()
+            this.callChangesInfo(this.tableId)
           })
           .catch((err: any) => err)
           .finally(() => {
             this.loadingTable = true
           })
-
-        this.callChangesInfo(this.tableId)
       }
     )
     if (typeof this.router.snapshot.params['tableId'] === 'undefined') {
@@ -378,6 +383,7 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
         this.params = param
         this.response = res
         this.calcDiff()
+        this.callChangesInfo(this.tableId)
       })
       .catch((err: any) => {
         this.acceptLoading = false
@@ -386,8 +392,6 @@ export class ApproveDetailsComponent implements AfterViewInit, OnDestroy {
         this.loadingTable = true
         this.setFocus()
       })
-
-    this.callChangesInfo(this.tableId)
   }
 
   ngOnDestroy() {

client/src/app/review/approve/approve.component.html

@@ -89,6 +89,7 @@
             <clr-dg-cell class="p-0 d-flex justify-content-center">
               <button
                 class="btn btn-success"
+                aria-label="Download audit file"
                 [id]="approveItem.tableId"
                 (click)="
                   download(approveItem.tableId); $event.stopPropagation()

client/src/app/review/approve/approve.component.scss

@@ -1,43 +0,0 @@
-@import '../../../colors.scss';
-
-.column-center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.datagrid .datagrid-column .datagrid-column-title{
-  outline: none!important;
-}
-
-.links {
-  font-weight: 700;cursor: pointer;
-}
-
-.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-    background: $headerBackground !important;
-}
-.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-    border-right: .25rem solid $headerBackground;
-    border-bottom: .20833rem solid $headerBackground;
-}
-
-.noBorder {
-  border-bottom: 1px solid transparent!important;
-}
-
-.approvals-list-wrapper {
-  height: 70vh;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-}
-
-.noapprovals-info-wrapper {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  height: calc(100vh - 200px);
-}

client/src/app/review/approve/approve.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core'
+import {
+  Component,
+  OnInit,
+  ChangeDetectorRef,
+  ViewEncapsulation
+} from '@angular/core'
 import { SasStoreService } from '../../services/sas-store.service'
 import { Router } from '@angular/router'
 import { SasService } from '../../services/sas.service'
@@ -20,7 +25,8 @@ interface ApproveData {
   styleUrls: ['./approve.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class ApproveComponent implements OnInit {
   public approveList: Array<ApproveData> | undefined

client/src/app/review/history/history.component.html

@@ -24,19 +24,19 @@
               <a
                 *ngIf="ind < 1"
                 (click)="getTable(approveData[col])"
-                class="cursor-pointer"
+                class="cursor-pointer table-link"
                 >{{ approveData[col] }}</a
               >
               <div *ngIf="ind < 2 && ind >= 1">
                 <a
                   (click)="getBaseTable(approveData[col])"
-                  class="cursor-pointer"
+                  class="cursor-pointer table-link"
                   >VIEW</a
                 >
                 <span> / </span>
                 <a
                   (click)="getEditTable(approveData[col])"
-                  class="cursor-pointer"
+                  class="cursor-pointer table-link"
                   >EDIT</a
                 >
               </div>
@@ -47,7 +47,12 @@
       </table>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline" (click)="openModal = false">
+      <button
+        type="button"
+        aria-label="Close modal"
+        class="btn btn-outline"
+        (click)="openModal = false"
+      >
         OK
       </button>
     </div>
@@ -119,6 +124,7 @@
         <clr-dg-cell class="verCenter">{{ historyItem.reviewed }}</clr-dg-cell>
         <clr-dg-cell class="verCenter p-0 d-flex justify-content-center">
           <button
+            aria-label="Download audit file"
             class="btn btn-success"
             (click)="download(historyItem.tableId); $event.stopPropagation()"
           >

client/src/app/review/history/history.component.scss

@@ -1,37 +0,0 @@
-.rejected {
-  color: #f83126;
-  font-weight: bold
-}
-
-.accepted {
-  color: #3fc424;
-  font-weight: bold
-}
-
-.hsCell {
-  display: flex !important;
-    flex-direction: column !important;
-    justify-content: center !important;
-    align-items: center !important;
-    padding: 7px;
-}
-.btCell {
-  display: flex !important;
-  justify-content: center !important;
-}
-
-.verCenter {
-    display: flex;
-    align-items: center;
-    word-break: break-all;
-}
-
-.load-more {
-  input {
-    width: 90px;
-  }
-}
-
-#noDataContainer {
-  height: calc(100vh - 200px);
-}

client/src/app/review/history/history.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 import { Router } from '@angular/router'
 import { SASjsConfig } from '@sasjs/adapter'
@@ -15,7 +15,8 @@ import {
   styleUrls: ['./history.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class HistoryComponent implements OnInit {
   public history: Array<any> = []

client/src/app/review/submitter/submitter.component.html

@@ -64,7 +64,11 @@
               <!-- <clr-dg-cell>{{sub.approver}}</clr-dg-cell> -->
               <clr-dg-cell>{{ sub.submitReason }}</clr-dg-cell>
               <clr-dg-cell>
-                <div class="row justify-content-around" role="tooltip">
+                <div
+                  class="row justify-content-around"
+                  role="tooltip"
+                  aria-label="Go to staged data screen"
+                >
                   <a
                     class="column-center links tooltip tooltip-md tooltip-bottom-left color-blue"
                     (click)="goToStage(sub.tableId)"
@@ -79,6 +83,7 @@
               <clr-dg-cell class="p-0 d-flex justify-content-center">
                 <button
                   class="btn btn-success"
+                  aria-label="Download audit file for table record"
                   (click)="download(sub.tableId); $event.stopPropagation()"
                 >
                   <clr-icon shape="download"></clr-icon>

client/src/app/review/submitter/submitter.component.scss

@@ -1,17 +0,0 @@
-@import '../../../colors.scss';
-
-.noBorder {
-  border-bottom: 1px solid transparent!important;
-}
-
-.tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-  background: $headerBackground !important;
-}
-.tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-  border-right: .25rem solid $headerBackground;
-  border-bottom: .20833rem solid $headerBackground;
-}
-
-.no-submitted-tables {
-  height: calc(100vh - 200px);
-}

client/src/app/review/submitter/submitter.component.ts

@@ -1,4 +1,9 @@
-import { Component, AfterViewInit, OnInit } from '@angular/core'
+import {
+  Component,
+  AfterViewInit,
+  OnInit,
+  ViewEncapsulation
+} from '@angular/core'
 import { Subscription } from 'rxjs'
 import { ActivatedRoute, Router } from '@angular/router'
 import { SasStoreService, EventService, SasService } from '../../services'
@@ -17,7 +22,8 @@ interface SubmitterData {
   styleUrls: ['./submitter.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class SubmitterComponent implements OnInit, AfterViewInit {
   public remained: number = 0

client/src/app/role/role.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { globals } from '../_globals'
 import { HelperService } from '../services/helper.service'
 import { Location } from '@angular/common'
@@ -12,7 +12,8 @@ import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapper
   styleUrls: ['./role.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class RoleComponent implements OnInit {
   public roles: Array<any> | undefined

client/src/app/routes/home-route/home-route.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-home-route',
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
   styleUrls: ['./home-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class HomeRouteComponent implements OnInit, OnDestroy {
   constructor() {}

client/src/app/routes/review-route/review-route.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-review-route',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./review-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class ReviewRouteComponent implements OnInit {
   constructor() {}

client/src/app/routes/usernav-route/usernav-route.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-usernav-route',
@@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core'
   styleUrls: ['./usernav-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class UsernavRouteComponent implements OnInit {
   constructor() {}

client/src/app/routes/view-route/view-route.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-view-route',
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
   styleUrls: ['./view-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class ViewRouteComponent implements OnInit, OnDestroy {
   constructor() {}

client/src/app/routes/xlmap-route/xlmap-route.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'app-xlmap-route',
@@ -6,7 +6,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core'
   styleUrls: ['./xlmap-route.component.scss'],
   host: {
     class: 'content-container'
-  }
+  },
+  encapsulation: ViewEncapsulation.None
 })
 export class XLMapRouteComponent implements OnInit, OnDestroy {
   constructor() {}

client/src/app/services/sas-store.service.ts

@@ -223,7 +223,7 @@ export class SasStoreService {
     tables[tableName] = [tableData]
     return (
       await this.sasService.request(program, tables, {
-        useComputeApi: false
+        useComputeApi: null // Using WEB APPROACH as a temporary workaround until VIYA JES API is fixed. For other server types then VIYA this is not applicable
       })
     ).adapterResponse
   }
@@ -232,7 +232,7 @@ export class SasStoreService {
     tables[tableName] = [tableData]
     return (
       await this.sasService.request(program, tables, {
-        useComputeApi: false
+        useComputeApi: null // Using WEB APPROACH as a temporary workaround until VIYA JES API is fixed. For other server types then VIYA this is not applicable
       })
     ).adapterResponse
   }

client/src/app/services/sas-viya.service.ts

@@ -1,9 +1,21 @@
-import { HttpClient } from '@angular/common/http'
+import {
+  HttpClient,
+  HttpContext,
+  HttpErrorResponse,
+  HttpHeaders,
+  HttpParams
+} from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { Observable } from 'rxjs'
+import { catchError, Observable, throwError } from 'rxjs'
 import { Collection } from '../viya-api-explorer/models/collection.model'
 import { AppStoreService } from './app-store.service'
 import { ViyaApis } from '../viya-api-explorer/models/viya-apis.models'
+import { ViyaApiFolderMembers } from '../viya-api-explorer/models/viya-api-folder-content.model'
+import { ViyaApiFolder } from '../viya-api-explorer/models/viya-api-folder.model'
+import { ViyaApiIdentities } from '../viya-api-explorer/models/viya-api-identities.model'
+import { ViyaApiCurrentUser } from '../viya-api-explorer/models/viya-api-current-user.model'
+import { ViyaComputeContexts } from '../viya-api-explorer/models/viya-compute-contexts.model'
+import { ComputeContextDetails } from '../viya-api-explorer/models/viya-compute-context-details.model'
 
 @Injectable({
   providedIn: 'root'
@@ -22,7 +34,8 @@ export class SasViyaService {
     },
     Compute: {
       jobs: '/jobDefinitions',
-      jobExecution: '/jobExecution'
+      jobExecution: '/jobExecution',
+      contexts: '/compute/contexts'
     },
     Decision_Management: {
       modelManagement: '/modelManagement',
@@ -57,15 +70,23 @@ export class SasViyaService {
   constructor(
     private http: HttpClient,
     private appStoreService: AppStoreService
-  ) {
+  ) {}
+
+  /**
+   * This function is replacing the constructor.
+   * The reason for this is timing issues, other services eg. sas.service, app-store.service
+   * must be initialized before this bit of code is executed.
+   * This function is being called by `sas.service`
+   */
+  setup() {
     const adapterConfig = this.appStoreService.getDcAdapterSettings()
 
     this.serverUrl = adapterConfig?.serverUrl || ''
 
-    //example
-    this.getByCollection('jobs').subscribe((res) => {
-      console.log('res', res)
-    })
+    // example collection request
+    // this.getByCollection('jobs').subscribe((res) => {
+    //   console.log('res', res)
+    // })
   }
 
   /**
@@ -82,7 +103,7 @@ export class SasViyaService {
    * @returns
    */
   getByUrl(url: string): Observable<Collection> {
-    return this.http.get<Collection>(`${this.serverUrl}${url}`, {
+    return this.get<Collection>(`${this.serverUrl}${url}`, {
       withCredentials: true
     })
   }
@@ -93,8 +114,106 @@ export class SasViyaService {
    * @returns
    */
   getByCollection(apiCollection: string): Observable<Collection> {
-    return this.http.get<Collection>(`${this.serverUrl}${apiCollection}`, {
+    return this.get<Collection>(`${this.serverUrl}${apiCollection}`, {
       withCredentials: true
     })
   }
+
+  getComputeContexts(): Observable<ViyaComputeContexts> {
+    return this.get<ViyaComputeContexts>(`${this.serverUrl}/compute/contexts`, {
+      withCredentials: true
+    })
+  }
+
+  getComputeContextById(id: string): Observable<ComputeContextDetails> {
+    return this.get<ComputeContextDetails>(
+      `${this.serverUrl}/compute/contexts/${id}`,
+      {
+        withCredentials: true
+      }
+    )
+  }
+
+  /**
+   * @param path Path to the folder
+   * @returns The folder info object
+   */
+  getFolderByPath(path: string): Observable<ViyaApiFolder> {
+    return this.get<ViyaApiFolder>(
+      `${this.serverUrl}/folders/folders/@item?path=${path}`,
+      {
+        withCredentials: true
+      }
+    )
+  }
+
+  getFolderMembers(folderId: string): Observable<ViyaApiFolderMembers> {
+    return this.get<ViyaApiFolderMembers>(
+      `${this.serverUrl}/folders/folders/${folderId}/members`,
+      {
+        withCredentials: true
+      }
+    )
+  }
+
+  getAdminGroups(limit: number = 5000): Observable<ViyaApiIdentities> {
+    return this.get<ViyaApiIdentities>(
+      `${this.serverUrl}/identities/groups?sortBy=name&limit=${limit}`,
+      {
+        withCredentials: true
+      }
+    )
+  }
+
+  getCurrentUser(): Observable<ViyaApiCurrentUser> {
+    return this.get<ViyaApiCurrentUser>(
+      `${this.serverUrl}/identities/users/@currentUser`,
+      {
+        withCredentials: true
+      }
+    )
+  }
+
+  get<T>(
+    url: string,
+    options?: {
+      headers?:
+        | HttpHeaders
+        | {
+            [header: string]: string | string[]
+          }
+      context?: HttpContext
+      observe?: 'body'
+      params?:
+        | HttpParams
+        | {
+            [param: string]:
+              | string
+              | number
+              | boolean
+              | ReadonlyArray<string | number | boolean>
+          }
+      reportProgress?: boolean
+      responseType?: 'json'
+      withCredentials?: boolean
+      transferCache?:
+        | {
+            includeHeaders?: string[]
+          }
+        | boolean
+    }
+  ): Observable<T> {
+    return this.http.get<T>(url, options).pipe(
+      catchError((err: HttpErrorResponse) => {
+        console.log('url', url)
+        console.log('err.status', err.status)
+        if (err.status === 449 || err.status === 401) {
+          // Retry once if we got a 449
+          return this.http.get<T>(url, options)
+        }
+        // Otherwise propagate the error
+        return throwError(() => err)
+      })
+    )
+  }
 }

client/src/app/services/sas.service.ts

@@ -16,6 +16,9 @@ import { RequestWrapperOptions } from '../models/request-wrapper/RequestWrapperO
 import { ErrorBody } from '../models/ErrorBody'
 import { UploadFileResponse } from '../models/UploadFile'
 import { RequestWrapperResponse } from '../models/request-wrapper/RequestWrapperResponse'
+import { SasViyaService } from './sas-viya.service'
+import { ViyaApiFolder } from '../viya-api-explorer/models/viya-api-folder.model'
+import { ViyaApiFolderMembers } from '../viya-api-explorer/models/viya-api-folder-content.model'
 
 @Injectable({
   providedIn: 'root'
@@ -38,6 +41,7 @@ export class SasService {
     private userService: UserService,
     private eventService: EventService,
     private sasjsService: SasjsService,
+    private sasViyaService: SasViyaService,
     private loggerService: LoggerService,
     private router: Router
   ) {}
@@ -51,6 +55,7 @@ export class SasService {
     this.dcAdapterSettings = this.appStoreService.getDcAdapterSettings()
 
     this.sasjsService.setup()
+    this.sasViyaService.setup()
 
     if (!this.dcAdapterSettings) {
       this.eventService.showInfoModal(
@@ -423,21 +428,93 @@ export class SasService {
       typeof this.sasjsAdapter.getFolder !== 'undefined'
 
     let appLocExists: boolean = false
+    let errorMessage: string | undefined = undefined
 
     if (getFolderExistsInAdapter) {
-      appLocExists = await this.appLocCheck(path)
+      const results = await this.appLocCheck(path)
+
+      appLocExists = results.found
+      errorMessage = results.errorMessage
     } else {
       appLocExists = await this.appLocCheckPreAxiosdAdapter(path)
     }
 
     if (appLocExists) {
-      this.loadStartupServiceEmitter.emit()
+      // Check if there is appLoc/services/admin/makedata.sas present
+      // if yes, it needs to be run, so we redirect to /deploy
+      // if not, we load the startup service
+
+      this.viyaMakedataSuccessfull().then(
+        (success: boolean) => {
+          if (success) {
+            this.loadStartupServiceEmitter.emit()
+          } else {
+            this.eventService.startupDataLoaded()
+            this.router.navigateByUrl('/deploy')
+          }
+        },
+        (error: any) => {
+          console.error('Error while looking for the file: makedata.sas', error)
+        }
+      )
+    } else {
+      const errorMessageToShow =
+        (errorMessage ||
+          'Viya services are not present on the current appLoc, or API not reachable. Check the ADAPTER configuration.') +
+        `\nAppLoc: ${path}`
+
+      this.eventService.showInfoModal('Error', errorMessageToShow)
     }
   }
 
-  public appLocCheck(path: string): Promise<boolean> {
+  private async viyaMakedataSuccessfull(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+      const sasjsConfig = this.getSasjsConfig()
+      const configuratorFolder = `${sasjsConfig.appLoc}/services/admin`
+
+      this.sasViyaService.getFolderByPath(configuratorFolder).subscribe(
+        (folderInfo: ViyaApiFolder) => {
+          const folderId = folderInfo.id
+
+          if (!folderId) {
+            console.error(
+              `Folder ID is not present. ${configuratorFolder}`,
+              sasjsConfig
+            )
+            resolve(false)
+          }
+
+          this.sasViyaService.getFolderMembers(folderId).subscribe(
+            (members: ViyaApiFolderMembers) => {
+              if (
+                !members.items.some((item: any) => item.name === 'makedata')
+              ) {
+                // Makedata.sas is not present, which means it was run
+                resolve(true)
+              } else {
+                // Makedata.sas is present, which means it was not run
+                resolve(false)
+              }
+            },
+            (err: any) => {
+              console.error('Error getting folder contents', err)
+              reject()
+            }
+          )
+        },
+        (err: any) => {
+          console.warn('Error getting folder info', err)
+          reject(err)
+        }
+      )
+    })
+  }
+
+  public appLocCheck(
+    path: string
+  ): Promise<{ found: boolean; errorMessage?: string }> {
     return new Promise(async (resolve, reject) => {
-      let statusNotFound: boolean = false
+      let fetchError: string = ''
 
       let res: any
 
@@ -448,20 +525,21 @@ export class SasService {
           this.appLocCheckPending = true
           this.shouldLogin.next(true)
 
-          resolve(false)
+          resolve({ found: false })
+        } else if (err.name === 'NotFoundeError') {
+          fetchError = err.message
         } else {
-          statusNotFound = true
+          fetchError =
+            'Viya services are not present on the current appLoc, or API not reachable. Check the ADAPTER configuration.'
         }
       }
 
-      if (statusNotFound) {
-        console.warn('Viya services are not present on the current appLoc.')
-        this.eventService.startupDataLoaded()
-        this.router.navigateByUrl('/deploy')
-        return resolve(false)
+      if (fetchError.length) {
+        console.warn(fetchError)
+        return resolve({ found: false, errorMessage: fetchError })
       }
 
-      resolve(true)
+      resolve({ found: true })
     })
   }
 
@@ -579,4 +657,17 @@ export class SasService {
       }
     }
   }
+
+  // Viya specific functions
+  public getFileContent(folderPath: string, fileName: string) {
+    return this.sasjsAdapter.getFileContent(folderPath, fileName)
+  }
+
+  public updateFileContent(
+    folderPath: string,
+    fileName: string,
+    content: string
+  ) {
+    return this.sasjsAdapter.updateFileContent(folderPath, fileName, content)
+  }
 }

client/src/app/shared/abort-modal/info-modal.component.html

@@ -7,7 +7,10 @@
 >
   <h3 class="modal-title">
     {{ data.modalTitle }}
-    <p *ngIf="data.sasService && data.sasService.length > 0" class="sasService">
+    <p
+      *ngIf="data.sasService && data.sasService.length > 0"
+      class="sasService mt-0"
+    >
       SAS Service: <strong>{{ data.sasService }}</strong>
     </p>
   </h3>

client/src/app/shared/abort-modal/info-modal.component.scss

@@ -1,43 +0,0 @@
-.clr-abort-modal {
-    ::ng-deep {
-        .modal {
-            z-index: 2050;
-        }
-        
-        .modal-title-wrapper {
-            width: 100%;
-        }
-
-        .modal {
-            z-index: 2050;
-        }
-    }
-}
-
-.modal-title {
-    position: relative;
-}
-
-.sasService {
-    position: absolute;
-    top: 0px;
-    right: 10px;
-    margin: 0;
-}
-
-.modal-footer {
-    position: relative;
-    border-top: 1px solid #dcdcdc;
-}
-
-.systext {
-    overflow: auto;
-    margin-top: 20px;
-    padding: 10px 0;
-    border-top: 1px solid #dcdcdc;
-
-    p {
-        margin-top: 0;
-        word-wrap: break-word;
-    }
-}

client/src/app/shared/abort-modal/info-modal.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { ServerType } from '@sasjs/utils/types/serverType'
 import { EventService } from 'src/app/services/event.service'
@@ -9,7 +16,8 @@ import { AbortDetails, InfoModal } from '../../models/InfoModal'
 @Component({
   selector: 'app-info-modal',
   templateUrl: './info-modal.component.html',
-  styleUrls: ['./info-modal.component.scss']
+  styleUrls: ['./info-modal.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class InfoModalComponent implements OnInit {
   @Output() onConfirmModalClick: EventEmitter<any> = new EventEmitter()

client/src/app/shared/alerts/alerts.component.scss

@@ -1,3 +0,0 @@
-clr-alerts {
-  display: block;
-}

client/src/app/shared/alerts/alerts.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnInit, ViewEncapsulation } from '@angular/core'
 import { Subscription } from 'rxjs'
 import { Alert } from './alert'
 import { AlertsService } from './alerts.service'
@@ -6,7 +6,8 @@ import { AlertsService } from './alerts.service'
 @Component({
   selector: 'app-alerts',
   templateUrl: './alerts.component.html',
-  styleUrls: ['./alerts.component.scss']
+  styleUrls: ['./alerts.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AlertsComponent implements OnInit {
   public alerts: Array<Alert> = []

client/src/app/shared/autocomplete/autocomplete.component.scss

@@ -1,75 +0,0 @@
-.input-val {
-  border: 0px;
-  background: transparent;
-  border-bottom: 1px solid #999999;
-}
-
-input {
-  width: 100%;
-  outline: none;
-
-  &::-webkit-calendar-picker-indicator {
-      margin-top: -5px;
-  }
-}
-
-::ng-deep {
-  body[cds-theme="dark"] {
-    .datalist {
-      background: #21333b;
-      border: 1px solid #575757;
-    }
-
-    input {
-      color: #fff;
-    }
-
-    .datalist option {
-      color: #fff
-    }
-  }
-
-  body[cds-theme="light"] {
-    .datalist {
-      background: #fff;
-    }
-  }
-}
-
-.autocomplete-wrapper {
-  .overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1500;
-  }
-
-  .datalist {
-      position: fixed;
-      box-shadow: 0px 3px 10px -1px #0000002b;
-      overflow: auto;
-      z-index: 2000;
-
-      ::ng-deep {
-          option {
-              padding: 5px 10px;
-              cursor: pointer;
-
-              &:hover {
-                  background: #0000000f;
-              }
-
-              &.focused {
-                background: #0000000f;
-              }
-          }
-      }
-  }
-
-  .load-more {
-    text-align: center;
-    border-top: 1px solid #e6e6e6;
-  }
-}

client/src/app/shared/autocomplete/autocomplete.component.ts

@@ -7,7 +7,8 @@ import {
   Input,
   OnInit,
   Output,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core'
 
 export type OnLoadingMoreEvent = {
@@ -17,7 +18,8 @@ export type OnLoadingMoreEvent = {
 @Component({
   selector: 'app-autocomplete',
   templateUrl: './autocomplete.component.html',
-  styleUrls: ['./autocomplete.component.scss']
+  styleUrls: ['./autocomplete.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AutocompleteComponent implements OnInit, AfterViewInit {
   @ViewChild('input') inputElement: any

client/src/app/shared/contact-link/contact-link.component.scss

@@ -1,3 +0,0 @@
-.unset {
-    color: unset;
-}

client/src/app/shared/contact-link/contact-link.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'
 
 @Component({
   selector: 'contact-link',
   templateUrl: './contact-link.component.html',
-  styleUrls: ['./contact-link.component.scss']
+  styleUrls: ['./contact-link.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class ContactLinkComponent implements OnInit {
   @Input() classes: string = ''

client/src/app/shared/dataset-info/dataset-info.component.scss

@@ -1,35 +0,0 @@
-.modal-body {
-  clr-tabs {
-    max-height: 70vh;
-  }
-
-  ::ng-deep {
-    .tab-content {
-      width: 100%;
-      overflow: auto;
-
-      .datagrid-outer-wrapper {
-        width: 100%;
-      }
-    }
-  }
-}
-
-clr-modal {
-  ::ng-deep {
-    .modal-dialog {
-      height: 100%;
-    }
-  }
-}
-
-.clickable-row {
-  cursor: pointer;
-}
-
-::ng-deep {
-  .datagrid-table .datagrid-cell:focus {
-    outline: none;
-    outline-offset: 0;
-  }
-}

client/src/app/shared/dataset-info/dataset-info.component.ts

@@ -5,7 +5,8 @@ import {
   OnChanges,
   OnInit,
   Output,
-  SimpleChanges
+  SimpleChanges,
+  ViewEncapsulation
 } from '@angular/core'
 import { DSMeta, Version } from 'src/app/models/sas/editors-getdata.model'
 import { Tab } from './models/dsmeta-groupped.model'
@@ -13,7 +14,8 @@ import { Tab } from './models/dsmeta-groupped.model'
 @Component({
   selector: 'app-dataset-info',
   templateUrl: './dataset-info.component.html',
-  styleUrls: ['./dataset-info.component.scss']
+  styleUrls: ['./dataset-info.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class DatasetInfoComponent implements OnInit, OnChanges {
   @Input() open: boolean = false

client/src/app/shared/dc-tree/dc-tree.component.scss

@@ -1,17 +0,0 @@
-clr-tree-node button {
-  white-space: nowrap;
-}
-
-clr-tree {
-  ::ng-deep {
-    .clr-tree-node-content-container {
-      &:focus {
-        .clr-treenode-link {
-          background: #e8e8e8;
-          background: var(--clr-tree-link-hover-color, #e8e8e8);
-          text-decoration: none;
-        }
-      }
-    }
-  }
-}

client/src/app/shared/dc-tree/dc-tree.component.ts

@@ -9,7 +9,8 @@ import {
   Output,
   QueryList,
   SimpleChanges,
-  ViewChildren
+  ViewChildren,
+  ViewEncapsulation
 } from '@angular/core'
 import { HelperService } from 'src/app/services/helper.service'
 import { LicenceService } from 'src/app/services/licence.service'
@@ -20,7 +21,8 @@ import { TableClickEmitter } from './models/TableClickEmitter'
 @Component({
   selector: 'dc-tree',
   templateUrl: './dc-tree.component.html',
-  styleUrls: ['./dc-tree.component.scss']
+  styleUrls: ['./dc-tree.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class DcTreeComponent implements OnInit, AfterViewInit, OnChanges {
   // REFACTOR NOTICE

client/src/app/shared/dc-validator/tests/getHotDataSchema.spec.ts

@@ -2,7 +2,7 @@ import { getHotDataSchema } from '../utils/getHotDataSchema'
 
 describe('DC Validator - hot data schema', () => {
   it('should return correct value for col type', () => {
-    expect(getHotDataSchema('numeric')).toEqual(0)
+    expect(getHotDataSchema('numeric')).toEqual('')
     expect(
       getHotDataSchema('autocomplete', { data: '', source: [1, 2, 3] })
     ).toEqual(1)

client/src/app/shared/dc-validator/utils/getHotDataSchema.ts

@@ -1,7 +1,7 @@
 import { DcValidation } from '../models/dc-validation.model'
 
 const schemaTypeMap: { [key: string]: any } = {
-  numeric: 0,
+  numeric: '',
   default: ''
 }
 

client/src/app/shared/excel-password-modal/excel-password-modal.component.scss

@@ -1,18 +0,0 @@
-.excel-password-root {
-  ::ng-deep {
-    .modal {
-      z-index: 1060;
-    }
-  }
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .buttons {
-    display: flex;
-    gap: 5px;
-  }
-}

client/src/app/shared/excel-password-modal/excel-password-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, ViewEncapsulation } from '@angular/core'
 import { Observable } from 'rxjs'
 import { ExcelPasswordModalService } from './excel-password-modal.service'
 import { Options } from './models/options.interface'
@@ -6,7 +6,8 @@ import { Options } from './models/options.interface'
 @Component({
   selector: 'app-excel-password-modal',
   styleUrls: ['./excel-password-modal.component.scss'],
-  templateUrl: './excel-password-modal.component.html'
+  templateUrl: './excel-password-modal.component.html',
+  encapsulation: ViewEncapsulation.None
 })
 export class ExcelPasswordModalComponent {
   options$: Observable<Options> = this.excelPasswordModalService.optionsSubject$

client/src/app/shared/loading-indicator/loading-indicator.component.scss

@@ -1,53 +0,0 @@
-// there are no clear instructions how to use Clarity ui variables
-$clr-header-height: 2.5rem;
-$clr-dark-gray: #565656;
-$clr-red: #c92100;
-$clr-yellow: rgb(233, 191, 4);
-$clr-green: #60b515;
-
-
-.loading-indicator {
-  line-height: $clr-header-height;
-  height: $clr-header-height;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  margin-right: 10px;
-
-  .spinner {
-    vertical-align: middle;
-  }
-
-  clr-signpost-content {
-    line-height: 24px;
-    color: $clr-dark-gray;
-    cursor: auto;
-
-    p {
-      margin-top: 10px;
-      display: flex;
-      justify-content: space-between;
-
-      &:first-child {
-        margin-top: 0;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      span {
-        margin-left: 10px;
-
-        &.running {
-          color: $clr-yellow;
-        }
-        &.success {
-          color: $clr-green;
-        }
-        &.fail {
-          color: $clr-red;
-        }
-      }
-    }
-  }
-}

client/src/app/shared/loading-indicator/loading-indicator.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'
 import { Subscription } from 'rxjs'
 
 import { Service } from '../service.interface'
@@ -6,7 +6,8 @@ import { Service } from '../service.interface'
 @Component({
   selector: 'app-loading-indicator',
   templateUrl: './loading-indicator.component.html',
-  styleUrls: ['./loading-indicator.component.scss']
+  styleUrls: ['./loading-indicator.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class LoadingIndicatorComponent implements OnInit, OnDestroy {
   public loading: boolean = false

client/src/app/shared/login/login.component.html

@@ -1,13 +1,17 @@
 <div class="login-sidebar-wrapper" [class.active]="isActive">
   <div class="login-sidebar sideBarProps">
     <!--img src="images/data_controller.png" alt=""-->
-    <img class="login-logo" src="images/datacontroller.svg" alt="" />
+    <img
+      class="login-logo"
+      src="images/datacontroller.svg"
+      alt="datacontroller logo"
+    />
 
     <form class="login" (ngSubmit)="submit()">
       <label class="title">
         <h3 class="welcome">Welcome to</h3>
         Data Controller
-        <h5 class="hint">Capture, Review, and Approve</h5>
+        <h4 class="hint">Capture, Review, and Approve</h4>
       </label>
       <div class="login-group">
         <input

client/src/app/shared/login/login.component.scss

@@ -1,129 +0,0 @@
-@import '../../../colors.scss';
-
-.sideBarProps {
-  background: $headerBackground !important;
-  color: #e0e0e0;
-}
-
-.sideBarProps h2, .sideBarProps h3, .sideBarProps h4, .sideBarProps h5, .sideBarProps input {
-  color: #e0e0e0;
-}
-
-.sideBarProps button {
-  border-color: wheat!important;
-}
-
-.sideBarProps a {
-  color: #e0e0e0;
-}
-
-.login-sidebar-wrapper {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  z-index: 10000;
-
-  >* {
-    pointer-events: auto;
-  }
-
-  .login-sidebar {
-    width: 400px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    background: #fff;
-    border-right: 1px solid #ddd;
-    padding: 40px;
-
-    form.login {
-      z-index: 101;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-      flex-direction: column;
-      -webkit-box-pack: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-
-      .title {
-        font-size: 32px;
-        letter-spacing: normal;
-        line-height: 36px;
-        .welcome {
-          margin-top: 36px;
-        }
-      }
-
-      .login-group {
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        padding: 48px 0 0 0;
-
-        >* {
-          margin: 6px 0 18px 0;
-        }
-      }
-    }
-
-    -webkit-transform: translateX(-400px);
-    transform: translateX(-400px);
-
-    transition: -webkit-transform .3s ease;
-    transition: transform .3s ease;
-    transition: transform .3s ease, -webkit-transform .3s ease;
-  }
-
-  &.active {
-    .login-sidebar {
-      -webkit-transform: translateX(0);
-      transform: translateX(0);
-      z-index: 101;
-    }
-    .overlay {
-      display: block;
-    }
-  }
-
-  .overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-
-    background: rgba(33, 33, 33, .5);
-    z-index: 100;
-  }
-}
-
-::ng-deep .login-sidebar-wrapper .login-group {
-  .clr-control-container, .username, .password {
-    width: 100%;
-  }
-
-  .clr-input-wrapper {
-    max-width: none;
-  }
-
-  button {
-    max-width: none;
-  }
-}
-
-.login-logo {
-  max-width: 200px
-}

client/src/app/shared/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'
 import { LoggerService } from '../../services/logger.service'
 import { Subscription } from 'rxjs'
 
@@ -12,7 +12,8 @@ interface User {
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class LoginComponent implements OnInit, OnDestroy {
   private _subscription: Subscription = new Subscription()

client/src/app/shared/requests-modal/requests-modal.component.html

@@ -86,9 +86,17 @@
                     </clr-tree>
 
                     <div
+                      *ngIf="serverType !== 'SASVIYA'"
                       class="log-wrapper saslog"
                       [innerHTML]="programLog.logFile"
                     ></div>
+
+                    <div
+                      *ngIf="serverType === 'SASVIYA'"
+                      class="log-wrapper saslog viya"
+                      [textContent]="programLog.logFile"
+                    ></div>
+
                     <button
                       *ngIf="programLog.logFile?.length! > 0"
                       (click)="downloadLog(programLog.logFile)"

client/src/app/shared/requests-modal/requests-modal.component.scss

@@ -1,68 +0,0 @@
-::ng-deep {
-    .requests-modal .modal-header .close clr-icon {
-        display: block !important;
-    }
-
-    .requests-modal .modal-content {
-        padding: 20px 10px 5px 10px;
-    }
-
-    .work-tables-dropdown button {
-        color: var(--clr-nav-link-color, #8c8c8c) !important;
-    }
-
-    .stack-view {
-        height: auto !important;
-
-        //Following lines will fix clarity (requests modal white) issue.
-        //Clarity version that has issue is: v12
-        mask-image: none !important;
-        -webkit-mask-image: none !important;
-    }
-
-    .content {
-        clr-icon {
-            margin-bottom: 5px;
-        }
-
-        pre {
-            word-break: break-all;
-            white-space: pre-wrap;
-            max-height: initial;
-            overflow: visible;
-            border: 0;
-        }
-
-        .stack-block-label {
-            // Clarity before V3 -----
-            // display: none;
-
-            // Clarity V3 -----
-            width: 100%;
-            padding-left: .6rem !important;
-
-            .stack-view-key {
-                display: none !important;
-            }
-        }
-    }
-
-    .err-links {
-        .clr-treenode-children {
-            max-height: 55px;
-            overflow: auto;
-        }
-    }
-}
-
-.dropdown-item {
-    &.selected {
-        background: #d8e3e9;
-    }
-}
-
-.no-reqs {
-    border-top: 1px solid #0000001a;
-    padding-top: 5px;
-    text-align: center;
-}

client/src/app/shared/requests-modal/requests-modal.component.ts

@@ -1,10 +1,17 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core'
 import { SASjsRequest } from '@sasjs/adapter'
 import * as moment from 'moment'
 import { HelperService } from 'src/app/services/helper.service'
 import { LoggerService } from '../../services/logger.service'
 import { SasService } from '../../services/sas.service'
-
+import { ServerType } from '@sasjs/utils/types/serverType'
 interface SASjsRequestExtended extends SASjsRequest {
   parsedTimestamp?: string
   logErrors?: string[]
@@ -15,7 +22,8 @@ interface SASjsRequestExtended extends SASjsRequest {
 @Component({
   selector: 'app-requests-modal',
   templateUrl: './requests-modal.component.html',
-  styleUrls: ['./requests-modal.component.scss']
+  styleUrls: ['./requests-modal.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class RequestsModalComponent implements OnInit {
   private _opened: boolean = false
@@ -38,6 +46,7 @@ export class RequestsModalComponent implements OnInit {
   public tablesActive: boolean = false
 
   public sasjsConfig = this.sasService.getSasjsConfig()
+  public serverType: string
   public sasjsRequests: SASjsRequestExtended[] = []
   public workTables: any
 
@@ -45,7 +54,10 @@ export class RequestsModalComponent implements OnInit {
     private sasService: SasService,
     private loggerService: LoggerService,
     private helperService: HelperService
-  ) {}
+  ) {
+    this.sasjsConfig = this.sasService.getSasjsConfig()
+    this.serverType = this.sasService.getServerType()
+  }
 
   ngOnInit(): void {}
 
@@ -90,21 +102,81 @@ export class RequestsModalComponent implements OnInit {
     requestStackId: string,
     type: string
   ) {
-    let allLines: any = document.querySelectorAll(
-      `#${requestStackId} .log-wrapper.saslog font`
-    )
-    let logWrapper: any = document.querySelector(
+    const logWrapper: HTMLElement | null = document.querySelector(
       `#${requestStackId} .log-wrapper.saslog`
     )
 
-    for (let line of allLines) {
-      if (line.textContent.includes(linkingLine)) {
-        logWrapper.scrollTop = line.offsetTop - logWrapper.offsetTop
-        line.style.backgroundColor = '#61a2202b'
+    if (!logWrapper) return
 
-        setTimeout(() => {
-          line.style = ''
-        }, 3000)
+    if (this.serverType === 'SASVIYA') {
+      // For VIYA (textContent approach)
+      const logContent = logWrapper.textContent || ''
+      const logLines = logContent.split('\n')
+      let lineIndex = -1
+
+      // Find the matching line index
+      for (let i = 0; i < logLines.length; i++) {
+        if (logLines[i].includes(linkingLine)) {
+          lineIndex = i
+          break
+        }
+      }
+
+      if (lineIndex === -1) return
+
+      // Create a temporary div to calculate line height
+      const tempDiv = document.createElement('div')
+      tempDiv.className = 'temp-line-height-calc'
+      tempDiv.textContent = 'X'
+      logWrapper.appendChild(tempDiv)
+      const lineHeight = tempDiv.clientHeight
+      logWrapper.removeChild(tempDiv)
+
+      // Scroll to the appropriate position
+      logWrapper.scrollTop = lineHeight * lineIndex
+
+      // Create highlighting overlay at that position
+      const overlay = document.createElement('div')
+      overlay.className = `line-highlight-overlay ${type === 'error' ? 'error-highlight' : 'warning-highlight'}`
+
+      // We are setting the height using a CSS variable to the HTML element
+      // this does not trigger CSP errors because it's driven by JS
+      overlay.classList.add('temp-height-setter')
+      document.documentElement.style.setProperty(
+        '--line-height',
+        `${lineHeight}px`
+      )
+      overlay.classList.add('line-position-setter')
+      document.documentElement.style.setProperty(
+        '--line-top',
+        `${lineHeight * lineIndex}px`
+      )
+
+      logWrapper.appendChild(overlay)
+
+      setTimeout(() => {
+        if (logWrapper.contains(overlay)) {
+          logWrapper.removeChild(overlay)
+        }
+      }, 3000)
+    } else {
+      // For non-VIYA (innerHTML approach)
+      const allLines: NodeListOf<Element> = document.querySelectorAll(
+        `#${requestStackId} .log-wrapper.saslog font`
+      )
+
+      for (let line of Array.from(allLines)) {
+        if (line.textContent?.includes(linkingLine)) {
+          logWrapper.scrollTop =
+            (line as HTMLElement).offsetTop - logWrapper.offsetTop
+          // Use class instead of inline style
+          line.classList.add('highlighted-line')
+
+          setTimeout(() => {
+            line.classList.remove('highlighted-line')
+          }, 3000)
+          break
+        }
       }
     }
   }
@@ -117,7 +189,9 @@ export class RequestsModalComponent implements OnInit {
     let errorLines = []
     let warningLines = []
 
+    // Create a safe version of the log content
     let logLines = req.logFile.split('\n')
+    let originalLogLines = [...logLines]
 
     for (let i = 0; i < logLines.length; i++) {
       if (/<.*>ERROR/gm.test(logLines[i])) {
@@ -129,7 +203,9 @@ export class RequestsModalComponent implements OnInit {
       } else if (/^ERROR/gm.test(logLines[i])) {
         errorLines.push(logLines[i])
 
-        logLines[i] = '<font>' + logLines[i] + '</font>'
+        if (this.serverType !== 'SASVIYA') {
+          logLines[i] = '<font class="error-line">' + logLines[i] + '</font>'
+        }
       }
 
       if (/<.*>WARNING/gm.test(logLines[i])) {
@@ -141,12 +217,41 @@ export class RequestsModalComponent implements OnInit {
       } else if (/^WARNING/gm.test(logLines[i])) {
         warningLines.push(logLines[i])
 
-        logLines[i] = '<font>' + logLines[i] + '</font>'
+        if (this.serverType !== 'SASVIYA') {
+          logLines[i] = '<font class="warning-line">' + logLines[i] + '</font>'
+        }
       }
     }
 
     this.loggerService.log(warningLines)
 
+    // For VIYA, store both versions of the log
+    if (this.serverType === 'SASVIYA') {
+      req.originalLogFile = originalLogLines.join('\n')
+      req.logFileLineMap = {}
+
+      // Create a mapping of error/warning lines to their indices
+      errorLines.forEach((errorLine) => {
+        for (let i = 0; i < originalLogLines.length; i++) {
+          if (originalLogLines[i].includes(errorLine)) {
+            if (!req.logFileLineMap.errors) req.logFileLineMap.errors = {}
+            req.logFileLineMap.errors[errorLine] = i
+            break
+          }
+        }
+      })
+
+      warningLines.forEach((warningLine) => {
+        for (let i = 0; i < originalLogLines.length; i++) {
+          if (originalLogLines[i].includes(warningLine)) {
+            if (!req.logFileLineMap.warnings) req.logFileLineMap.warnings = {}
+            req.logFileLineMap.warnings[warningLine] = i
+            break
+          }
+        }
+      })
+    }
+
     req.logFile = logLines.join('\n')
     req.logErrors = errorLines
     req.logWarnings = warningLines

client/src/app/shared/sidebar/sidebar.component.html

@@ -11,7 +11,7 @@
     class="d-flex justify-content-center sub-dropdown"
   >
     <clr-dropdown>
-      <button class="dropdown-toggle btn btn-link" clrDropdownTrigger>
+      <button class="dropdown-toggle btn btn-primary" clrDropdownTrigger>
         {{ getSubPage() }}
         <clr-icon shape="caret down"></clr-icon>
       </button>
@@ -113,7 +113,7 @@
     class="d-flex justify-content-center sub-dropdown"
   >
     <clr-dropdown>
-      <button class="dropdown-toggle btn btn-link" clrDropdownTrigger>
+      <button class="dropdown-toggle btn btn-primary" clrDropdownTrigger>
         {{ getSubPage() }}
         <clr-icon shape="caret down"></clr-icon>
       </button>

client/src/app/shared/sidebar/sidebar.component.scss

@@ -1,82 +0,0 @@
-$sidebarWidth: 272px;
-
-.clr-vertical-nav .nav-link.active {
-    background-color: transparent;
-}
-
-clr-vertical-nav {
-    width: $sidebarWidth;
-    min-width: $sidebarWidth;
-    height: 100%;
-    max-width: 375px;
-    position: relative;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
-
-    .sun-dropdown {
-        min-height: 36px
-    }
-
-    .nav-tree {
-        height: 100%;
-        overflow-y: auto;
-    }
-
-    &.closed {
-        margin-left: -$sidebarWidth;
-    }
-
-    .resize-handle {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: -3px;
-        border-right: 4px solid #80b441;
-        cursor: col-resize;
-        opacity: 0;
-        transition: all 0.1s ease-in-out;
-
-        &:hover {
-            opacity: .5;
-        }
-
-        &.resizing {
-            opacity: 1;
-        }
-    }
-
-    &.resizing {
-        transition: none !important;
-    }
-}
-
-.nav-divider {
-    border: 0;
-    border-top: 1px solid #d3d3d3;
-    margin-bottom: 0;
-}
-
-.page-title {
-    margin: 0;
-    font-size: 18px;
-    text-align: center;
-}
-.zero-margin{
-    margin: 0px;
-}
-.user-nav-btn{
-    padding: 0px;
-    padding-left: 2px;
-    padding-right: 2px;
-}
-
-#sidebarNav {
-    z-index: 200;
-}
-
-@media (max-width: 767px) { //768
-    #sidebarNav {
-        position: absolute;
-        bottom: 0;
-        top: 0;
-    }
-}

client/src/app/shared/sidebar/sidebar.component.ts

@@ -5,7 +5,8 @@ import {
   ViewChild,
   ElementRef,
   EventEmitter,
-  Output
+  Output,
+  ViewEncapsulation
 } from '@angular/core'
 import { Router } from '@angular/router'
 import { EventService } from '../../services/event.service'
@@ -16,7 +17,8 @@ import { globals } from '../../_globals'
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss']
+  styleUrls: ['./sidebar.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class SidebarComponent implements OnInit {
   @ViewChild('sidebarNav') sidebarNav!: ElementRef

client/src/app/shared/soft-select/soft-select.component.scss

@@ -1,39 +0,0 @@
-.input-val {
-    border: 0px;
-    background: transparent;
-    border-bottom: 1px solid #999999;
-}
-
-input {
-    width: 100%;
-    outline: none;
-
-    &::-webkit-calendar-picker-indicator {
-        margin-top: -5px;
-    }
-}
-
-clr-date-container {
-    position: relative;
-    margin-top: 2px !important;
-
-    ::ng-deep {
-        .clr-input-group-icon-action {
-            position: absolute;
-            right: -5px;
-        }
-
-        input::-webkit-calendar-picker-indicator {
-            margin-right: 20px;
-            margin-top: -5px;
-        }
-    }
-}
-
-label.secondLabelActive span {
-    &:not(.value-type-selected) {
-        text-decoration: line-through;
-        cursor: pointer;
-        opacity: 0.6;
-    }
-}

client/src/app/shared/soft-select/soft-select.component.ts

@@ -6,14 +6,16 @@ import {
   OnInit,
   Output,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core'
 import { OnLoadingMoreEvent } from '../autocomplete/autocomplete.component'
 
 @Component({
   selector: 'app-soft-select',
   templateUrl: './soft-select.component.html',
-  styleUrls: ['./soft-select.component.scss']
+  styleUrls: ['./soft-select.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class SoftSelectComponent implements OnInit, OnChanges {
   @Input() inputId: string = ''