Page MenuHomeSoftware Heritage

misc: Add iframe view for contents and directories
ClosedPublic

Authored by anlambert on Sep 3 2021, 5:22 PM.

Details

Summary

Add a new Django view that can be embedded in an iframe to display
contents and directories archived by Software Heritage in a minimalist
Web UI.

The URL targetting that view is /embed/(swhid)/.

The view enables to navigate in a source tree and to display SWHIDs
of currently browsed objects. It also has a fixed header with a link
to softwareheritage.org and a link to browse current object on the
main archive website. Code fragment highlighting for content objects
is also supported if the input SWHID has a lines qualifier.

Below is an example of how to integrate that view in an iframe:

<iframe style="width: 100%; height: 500px; border: 1px solid rgba(0, 0, 0, 0.125);" src="https://archive.softwareheritage.org/embed/(swhid)/"></iframe>

And this is how it looks:



Related to T3489

Diff Detail

Repository
rDWAPPS Web applications
Branch
swhid-iframe
Lint
No Linters Available
Unit
No Unit Test Coverage
Build Status
Buildable 23444
Build 36583: Phabricator diff pipeline on jenkinsJenkins console · Jenkins
Build 36582: arc lint + arc unit

Event Timeline

Build has FAILED

Patch application report for D6186 (id=22410)

Rebasing onto ea485ffd9e...

First, rewinding head to replay your work on top of it...
Applying: misc: Add iframe view for contents and directories
Changes applied before test
commit 9160352b58af3a3b3855384717393c6fe1d24e3b
Author: Antoine Lambert <antoine.lambert@inria.fr>
Date:   Fri May 28 17:57:58 2021 +0200

    misc: Add iframe view for contents and directories
    
    Add a new Django view that can be embedded in an iframe to display
    contents and directories archived by Software Heritage in a minimalist
    Web UI.
    
    The URL targetting that view is /embed/(swhid)/.
    
    The view enables to navigate in a source tree and to display SWHIDs
    of currently browsed objects. It also has a fixed header with a link
    to softwareheritage.org and a link to browse current object on the
    main archive website. Code fragment highlighting for content objects
    is also supported if the input SWHID has a lines qualifier.
    
    Related to T3489

Link to build: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1068/
See console output for more information: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1068/console

Harbormaster returned this revision to the author for changes because remote builds failed.Sep 3 2021, 5:23 PM
Harbormaster failed remote builds in B23364: Diff 22410!

Build has FAILED

Patch application report for D6186 (id=22410)

Rebasing onto ea485ffd9e...

First, rewinding head to replay your work on top of it...
Applying: misc: Add iframe view for contents and directories
Changes applied before test
commit 161100178a6d3897a7428702d2249ac1420bffb1
Author: Antoine Lambert <antoine.lambert@inria.fr>
Date:   Fri May 28 17:57:58 2021 +0200

    misc: Add iframe view for contents and directories
    
    Add a new Django view that can be embedded in an iframe to display
    contents and directories archived by Software Heritage in a minimalist
    Web UI.
    
    The URL targetting that view is /embed/(swhid)/.
    
    The view enables to navigate in a source tree and to display SWHIDs
    of currently browsed objects. It also has a fixed header with a link
    to softwareheritage.org and a link to browse current object on the
    main archive website. Code fragment highlighting for content objects
    is also supported if the input SWHID has a lines qualifier.
    
    Related to T3489

Link to build: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1069/
See console output for more information: https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1069/console

Build is green

Patch application report for D6186 (id=22410)

Rebasing onto ea485ffd9e...

First, rewinding head to replay your work on top of it...
Applying: misc: Add iframe view for contents and directories
Changes applied before test
commit 7cbc0460a6bf8b7b33c821806c7eda47c5c3d104
Author: Antoine Lambert <antoine.lambert@inria.fr>
Date:   Fri May 28 17:57:58 2021 +0200

    misc: Add iframe view for contents and directories
    
    Add a new Django view that can be embedded in an iframe to display
    contents and directories archived by Software Heritage in a minimalist
    Web UI.
    
    The URL targetting that view is /embed/(swhid)/.
    
    The view enables to navigate in a source tree and to display SWHIDs
    of currently browsed objects. It also has a fixed header with a link
    to softwareheritage.org and a link to browse current object on the
    main archive website. Code fragment highlighting for content objects
    is also supported if the input SWHID has a lines qualifier.
    
    Related to T3489

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1070/ for more details.

Can you add a documentation page explaining how to use it?

swh/web/templates/misc/iframe.html
161–163

Why display: none?

Can you add a documentation page explaining how to use it?

Sure, I was thinking adding a new section in the sphinx doc about it and adding instructions in the permalinks tab the same way we did for the swh badges.

swh/web/templates/misc/iframe.html
161–163

LibreJS does not require the link to be visible and I do not think it is relevant to show it for the iframe case.

I just tried it and it still looks great. I found some edge cases/nitpicking on the layout though:

  1. When displaying content, the first line looks slightly smaller than the other ones; and when listing a revision/directory, text in the table header is not vertically centered. A few px in breadcrumbs-container's margin-bottom should fix it.
  1. Also, when clicking on a line, it is highlighted, then the iframe scrolls in such a way half the line is hidden beneath the breadcrumbs-container.
  1. Additionally, with JS disabled (or before it's loaded, which takes a noticeable fraction of a second for me), the "identifiers" popup is always shown, and is beneath the iframe's card-header; because d-sm-block has display: block !important, which overrides the style="display: none;" attribute. (There is a similar issue on the main website, but at least it's shown in a usable way instead of being beneath a position: fixed block)

When displaying content, the first line looks slightly smaller than the other ones; and when listing a revision/directory, text in the table header is not vertically centered. A few px in breadcrumbs-container's margin-bottom should fix it.

Nice catch, fixed by tweaking top margin of pre element containing source code.

Also, when clicking on a line, it is highlighted, then the iframe scrolls in such a way half the line is hidden beneath the breadcrumbs-container.

I disabled lines highlighting for the iframe view through javascript, did you recompile the static assets before your tests ?

Additionally, with JS disabled (or before it's loaded, which takes a noticeable fraction of a second for me), the "identifiers" popup is always shown, and is beneath the iframe's card-header; because d-sm-block has display: block !important, which overrides the style="display: none;" attribute. (There is a similar issue on the main website, but at least it's shown in a usable way instead of being beneath a position: fixed block)

Thanks for spotting, I moved the setting of the d-sm-block class from HTML to Javascript in order to fix the issue.

I disabled lines highlighting for the iframe view through javascript, did you recompile the static assets before your tests ?

Yes (I have to, the python process crashes when I don't)

Update:

  • rebase
  • address @vlorentz comments
  • fix a couple of spotted issues
  • add sphinx documentation
  • add modals displayable from the SWHIDs tab explaining how to integrate iframe views in external web page

Build is green

Patch application report for D6186 (id=22464)

Rebasing onto b552b01dc7...

Current branch diff-target is up to date.
Changes applied before test
commit 394734c93d44f54fb718cde54c0f3b7644806074
Author: Antoine Lambert <antoine.lambert@inria.fr>
Date:   Fri May 28 17:57:58 2021 +0200

    misc: Add iframe view for contents and directories
    
    Add a new Django view that can be embedded in an iframe to display
    contents and directories archived by Software Heritage in a minimalist
    Web UI.
    
    The URL targetting that view is /embed/(swhid)/.
    
    The view enables to navigate in a source tree and to display SWHIDs
    of currently browsed objects. It also has a fixed header with a link
    to softwareheritage.org and a link to browse current object on the
    main archive website. Code fragment highlighting for content objects
    is also supported if the input SWHID has a lines qualifier.
    
    Related to T3489

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1088/ for more details.

I disabled lines highlighting for the iframe view through javascript, did you recompile the static assets before your tests ?

Yes (I have to, the python process crashes when I don't)

I just tried, and it seems I can't anymore... most of the time.

However, if I click on a line number right after it displayed the column, I can still one line and it will scroll to it.

I disabled lines highlighting for the iframe view through javascript, did you recompile the static assets before your tests ?

Yes (I have to, the python process crashes when I don't)

I just tried, and it seems I can't anymore... most of the time.

However, if I click on a line number right after it displayed the column, I can still one line and it will scroll to it.

Ack, I see what is wrong, I have a better idea to properly disable lines selection.

Update:

  • rebase
  • ensure click handler for code highlighting will not be created in iframe mode
This revision is now accepted and ready to land.Sep 8 2021, 5:15 PM

Build is green

Patch application report for D6186 (id=22494)

Rebasing onto ec19895012...

Current branch diff-target is up to date.
Changes applied before test
commit e2b48563ac205c0993f0aae1fab536a4a2ded884
Author: Antoine Lambert <antoine.lambert@inria.fr>
Date:   Fri May 28 17:57:58 2021 +0200

    misc: Add iframe view for contents and directories
    
    Add a new Django view that can be embedded in an iframe to display
    contents and directories archived by Software Heritage in a minimalist
    Web UI.
    
    The URL targetting that view is /embed/(swhid)/.
    
    The view enables to navigate in a source tree and to display SWHIDs
    of currently browsed objects. It also has a fixed header with a link
    to softwareheritage.org and a link to browse current object on the
    main archive website. Code fragment highlighting for content objects
    is also supported if the input SWHID has a lines qualifier.
    
    Related to T3489

See https://jenkins.softwareheritage.org/job/DWAPPS/job/tests-on-diff/1096/ for more details.