OHDSI / Atlas

ATLAS is an open source software tool for researchers to conduct scientific analyses on standardized observational data
http://atlas-demo.ohdsi.org/
Apache License 2.0
266 stars 136 forks source link

Custom Homepage : Atlas #2907

Open ahmed-dna opened 8 months ago

ahmed-dna commented 8 months ago

Expected behavior

Edit in the "home.html" file in the Atlas-2.14.1/js/pages/home/ directory should be reflected on the webpage.

Actual behavior

The changes to the Home page are not being reflected, while other modifications like in the banner are applied correctly. I suspect it might be related to the translation tool, but I'm not sure.

Steps to reproduce behavior

I download Atlas from the Git repository
edit the home.html file in the Atlas-2.14.1/js/pages/home/ directory to include additional details about my institution.
built the image and modified the dockerfile.yml (in Broadsea 3.1) to consider the new image.

Do you have any suggestions or insights into the right way to do it? Thank you very much for your time.

konstjar commented 8 months ago

I think you need to re-compile the application.

ahmed-dna commented 8 months ago

When I build the image to put it in my Broadsea container, that recompiles the app in one way or another, as some changes on the banner are reflected but not on the homepage.

konstjar commented 8 months ago

Broadsea uses pre-build images, they are not compile the application on the fly.

You may need to build your custom Docker image, as compilation is done here: https://github.com/OHDSI/Atlas/blob/master/Dockerfile#L14

ahmed-dna commented 8 months ago

That's what I did, but perhaps not in the best way. Here is my process:

Thanks to this, I can see the modifications I made in the 'index.html' file, but unfortunately, I don't see the changes I made in the 'home.html' file

konstjar commented 8 months ago

The flow is correct. Could it be your browser cache?

ahmed-dna commented 8 months ago

Not the browser cache, I tried on Chrome and Firefox, and forced a hard reload on both. For me, this comes from the syntax :

<div data-bind="html: ko.i18n('home.description', 'ATLAS is an open source application developed as a part of <a href=\'http://www.ohdsi.org\' target=\'_new\'>OHDSI</a> intended to provide a unified interface to patient level data and analytics.')"></div>

Nothing is written between <div></div>. It all gets passed to the ko.i18n() function that links to something, but I don't know exactly what and how to proceed.

Thank you for your help!

chrisknoll commented 8 months ago

The html binding is controlling what is placed into the div, so you aren't able to put content inside the div while the html data binding is controlling it. You could just add your own div after that one.

ahmed-dna commented 8 months ago

Here is my 'home.html' file with some new <div> elements to test.

image

And here is the result: None of the test tags are displayed on the home page. However, the modification of the index file is well taken into account because there is no 'data-bind' in the file. image

I don't know how to figure this out..

chrisknoll commented 8 months ago

My understanding is that the app will serve from the bundle....so you can disable that by changing the content in the index.html:

    <!-- non-bundled mode -->
    <script data-main="js/main" src="js/require.js"></script>

    <!-- bundled mode -->
    <!-- <script data-main="js/assets/bundle/bundle" src="js/require.js"></script>-->

By default we operate in non-bundled mode, but in your Docker index.html it may reference the bundle.

So try to modify the index.html as above so that it will load the files from the indivvidual templates (like home.html) and it should see your changes.

ahmed-dna commented 8 months ago

It was set to non-bundled mode by default, so I changed it to the other one, and it worked.

image

image

If I let on Bundled mode, will this have any impact on the tool's capabilities?

chrisknoll commented 8 months ago

I'm surprised that the bundled mode saw the change because non-bunded mode would read directly from the individual files for rendering (which is what I thought you were modifying) while the bundled files requires a 'build step' to combine the individual files into a bundle.

If I let on Bundled mode, will this have any impact on the tool's capabilities?

No, it's the same codebase, just packaged differently to speed up download speed. It does make tracing through code in the dev console harder (because bundled code is compressed down and harder to read) but it will have same functionality.

As a final test: if you go back to non-bundled mode, you can view the 'sources' tab in chrome and see the individual files that are downloaded. You can find the home.html download and see if it has your changes in it, and you can also see the URL path to the file that was fetched which may indicate that you're modifying files in a different location than they are being served from.