Cannot delete filters from 'Edit Filters' tab

[kr0401]

The "Delete" button does not work under the "Edit Filters" tab.
The hover over effect does work, the button will appear red but nothing happens when I click it. We run MegaQC through Docker compose with only one minor change to the amount of threads requested. (See #475 for info on what was changed during install)

To Reproduce

1. Navigate to MegaQC webpage
2. From drop down menu in top right select "Edit Filters"
3. Click "Delete" under actions for the filter you wish to delete

Expected behavior

The filter would be removed from the list of filters.

Additional context

In the image below you can see the delete button is highlighted red from the hover over and the lighter band of red outlining it that appears after the button has been clicked. This visual change tells me the site is recognizing the button has been clicked but nothing else happens. This is all being done from the admin account.

[multimeric]

Okay, I'll look into it. As a workaround have you tried going to the Data Admin tab (top right menu), and then Filters, and then deleting?

[kr0401]

My "Data Admin" page is empty (see image). We currently have 1060 samples from 3 reports uploaded and the custom filter from above still exists. What should be appearing in the "Data Admin" page?

[multimeric]

This looks like you didn't compile the JavaScript. Can you explain how you installed MegaQC?

[eandersonIGS]

Hi, I am working with kr0401. The install was done using the docker compose stack using the directions here. I assumed that compiled code was present inside the containers, does something need to be built outside of the containers for them to be fully functional?

[multimeric]

Oh, yes it should be pre-compiled when using Docker. Can you please show the browser logs when you hit the Data Admin page?

[multimeric]

And while we're at it, can I have the frontend logs (ie the browser console) and the backend logs (from Docker Compose) when you hit the existing Delete button?

[kr0401]

Data Admin Logs:

Clicking delete button:
frontend:

backend:

deployment-megaqc-1 | This is MegaQC v0.3.0
deployment-megaqc-1 |
deployment-megaqc-1 | * Environment: Prod
deployment-megaqc-1 | * Database type: postgresql
deployment-megaqc-1 | * Database path: postgresql://megaqc:@db:5432/megaqc
deployment-megaqc-1 | Initialized the database.
deployment-megaqc-1 | INFO [alembic.runtime.migration] Context impl PostgresqlImpl.
deployment-megaqc-1 | INFO [alembic.runtime.migration] Will assume transactional DDL.
deployment-megaqc-1 | * Environment: Prod
deployment-megaqc-1 | * Database type: postgresql
deployment-megaqc-1 | * Database path: postgresql://megaqc:@db:5432/megaqc
deployment-megaqc-1 | [2023-05-24 12:10:02 +0000] [1] [INFO] Starting gunicorn 20.0.4
deployment-megaqc-1 | [2023-05-24 12:10:02 +0000] [1] [INFO] Listening at: http://0.0.0.0:80 (1)
deployment-megaqc-1 | [2023-05-24 12:10:02 +0000] [1] [INFO] Using worker: egg:meinheld#gunicorn_worker
deployment-megaqc-1 | [2023-05-24 12:10:02 +0000] [205] [INFO] Booting worker with pid: 205
deployment-megaqc-1 | [2023-05-24 12:10:02 +0000] [206] [INFO] Booting worker with pid: 206
deployment-megaqc-1 | [2023-05-24 12:10:02 +0000] [207] [INFO] Booting worker with pid: 207
deployment-megaqc-1 | [2023-05-24 12:10:03 +0000] [208] [INFO] Booting worker with pid: 208
deployment-megaqc-1 | [2023-05-24 12:10:03 +0000] [209] [INFO] Booting worker with pid: 209
deployment-megaqc-1 | [2023-05-24 12:10:03 +0000] [210] [INFO] Booting worker with pid: 210
deployment-nginx-1 | 10.91.178.33 - - [24/May/2023:12:10:55 +0000] "GET /edit_filters/ HTTP/1.1" 200 13432 "http://daken.igs.umaryland.edu/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36"
deployment-nginx-1 | 10.91.178.33 - - [24/May/2023:12:10:55 +0000] "GET /static/css/bootstrap.min.css.map HTTP/1.1" 404 555 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36"
deployment-nginx-1 | 2023/05/24 12:10:55 [error] 22#22: *1 open() "/home/app/web/project/static/css/bootstrap.min.css.map" failed (2: No such file or directory), client: 10.91.178.33, server: , request: "GET /static/css/bootstrap.min.css.map HTTP/1.1", host: "daken.igs.umaryland.edu"

[kr0401]

I was able to delete the filter from the data trends page (see picture). I would still be interested in a solution for deleting from Edit Filters and/or Data Admin tabs.

[multimeric]

Looking at the "Edit Sample Filters" page now, I can't see how it ever worked. Maybe there was some JavaScript that got deleted at some point? In any case I think I'll replace it with a link to the appropriate data admin page.

[multimeric]

Can you please test #479 and see if it resolves your issues? You will have to recompile the JS as described here.

[eandersonIGS]

We ran into some issues trying to test the changes. Will these changes work if we are using the docker-compose install or will we have to use the standard install to see the updates?

When trying to recompile the JS we ran into an error while running the second command.

[eanderson@daken MegaQC-test]$ npm run watch

> [email protected] watch
> webpack --mode development --watch

webpack is watching the files…

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/export/MegaQC-test/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/export/MegaQC-test/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/export/MegaQC-test/node_modules/webpack/lib/NormalModule.js:471:10)
    at /export/MegaQC-test/node_modules/webpack/lib/NormalModule.js:503:5
    at /export/MegaQC-test/node_modules/webpack/lib/NormalModule.js:358:12
    at /export/MegaQC-test/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/export/MegaQC-test/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/export/MegaQC-test/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /export/MegaQC-test/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/export/MegaQC-test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /export/MegaQC-test/node_modules/babel-loader/lib/index.js:44:71 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.16.0

Do you have any guesses as to what we are doing wrong?

[multimeric]

I think that's just an error on Linux that I haven't noticed yet on MacOS, but it's still a bug because I need to update webpack. Anyway, the workaround for now is to export NODE_OPTIONS=--openssl-legacy-provider before you run those commands.

[kr0401]

We have tested fix #479 and recompiled the javascript but it doesn't seem to be working for us. The data admin page is still completely empty though according to the fix we at least should be seeing a filters resource in the admin panel.

I have attached a picture of my data admin page as well as the browser console while on the page. Any further ideas on why we may not be seeing the changes?

[multimeric]

It's not "empty" so much as the JavaScript is throwing an error causing the page to not render. This is odd because the dependencies should be locked to exactly the same ones I use while developing. I'll test this on a fresh install and see what happens.

[kr0401]

Any updates on if you were able to reproduce with a fresh install? @multimeric