search

justpy-org / justpy

An object oriented high-level Python Web Framework that requires no frontend programming
https://justpy.io
Apache License 2.0
1.2k stars 95 forks source link

Setting resource url for JustpyBaseComponent #586

Closed aalexei closed 1 year ago

aalexei commented 1 year ago

Hi,

I'm trying to run a juspy app behind nginx and have hit a problem. The app locally runs on a particular port and uses a custom component. Unfortunately the javascript for the component gets inserted with a link for localhost instead of the external url. 

<script src=https://127.0.0.1:8888/static/components/pdfembed.js></script>

Is there a way to override url or to use a relative path (e.g. src=/static/components/pdfembed.js>)?

WolfgangFahl commented 1 year ago

@aalexei thanks for bringing this up. I had similar issues and brought up the discussion #402 on this. Which points to quite a few other issues and discussions that revolve around the core problem behind what you experience.

Recent versions of justpy have improved the situation by making sure that justpy now uses the standard routing mechanisms of the underlying starlette. Also the generation of the code you show has been moved away from the Jinja Template engine to our own code.

There is no proper documentation and "out of the box" solution yet but hopefully you'll get more comments here and eventually we'll see another pull request providing a direct way to handle proxy requests. @rodja already did quite a bit of work on this and he might have more details.

rodja commented 1 year ago

In my opinion this has little to do with the X-Forwarded-Prefix work I've done on #459. Unfortunately I'm not up-to-date with the latest routing changes in JustPy. It is great that JustPy now uses the underlying starlette routing. This should simplify a lot. But maybe there is still a bug where the wrong url is prefixed...

Unfortunately I do not have the time to look into this at the moment.

aalexei commented 1 year ago

Will take a little while to get back to this. My justpy version had fallen quite a bit behind the latest and a whole lot of things are now broken.

aalexei commented 1 year ago

Upgraded my app to run with latest justpy on PyPi, but still have problems loading module. if I manually add a link to the resource:

wp.head_html = '''
<script src="/static/components/pdfembed.js"></script>
'''

The js of the module is found, but the browser console reports an error: "Uncaught ReferenceError: Vue is not defined"

sandeep-gh commented 1 year ago

This means that the Vue library is not getting imported in main.svelte. Can you share, the html received on the browser side.

aalexei commented 1 year ago 
<!DOCTYPE html>
<html>
<!--This is a justpy application using the quasar.html template-->
<head>    <script>
        // Reload page if reached via back button (history in general)
        // @TODO - deprecated see https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angular
        if(performance.navigation.type == 2){
          location.reload(true);
        }
        // ScrollIntoView polyfill https://www.npmjs.com/package/smoothscroll-polyfill
        !function(){"use strict";function o(){var o=window,t=document;if(!("scrollBehavior"in t.documentElement.style&&!0!==o.__forceSmoothScrollPolyfill__)){var l,e=o.HTMLElement||o.Element,r=468,i={scroll:o.scroll||o.scrollTo,scrollBy:o.scrollBy,elementScroll:e.prototype.scroll||n,scrollIntoView:e.prototype.scrollIntoView},s=o.performance&&o.performance.now?o.performance.now.bind(o.performance):Date.now,c=(l=o.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(l)?1:0);o.scroll=o.scrollTo=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?h.call(o,t.body,void 0!==arguments[0].left?~~arguments[0].left:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:o.scrollY||o.pageYOffset):i.scroll.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:o.scrollX||o.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:o.scrollY||o.pageYOffset))},o.scrollBy=function(){void 0!==arguments[0]&&(f(arguments[0])?i.scrollBy.call(o,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):h.call(o,t.body,~~arguments[0].left+(o.scrollX||o.pageXOffset),~~arguments[0].top+(o.scrollY||o.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==f(arguments[0])){var o=arguments[0].left,t=arguments[0].top;h.call(this,this,void 0===o?this.scrollLeft:~~o,void 0===t?this.scrollTop:~~t)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},e.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==f(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):i.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},e.prototype.scrollIntoView=function(){if(!0!==f(arguments[0])){var l=function(o){for(;o!==t.body&&!1===(e=p(l=o,"Y")&&a(l,"Y"),r=p(l,"X")&&a(l,"X"),e||r);)o=o.parentNode||o.host;var l,e,r;return o}(this),e=l.getBoundingClientRect(),r=this.getBoundingClientRect();l!==t.body?(h.call(this,l,l.scrollLeft+r.left-e.left,l.scrollTop+r.top-e.top),"fixed"!==o.getComputedStyle(l).position&&o.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):o.scrollBy({left:r.left,top:r.top,behavior:"smooth"})}else i.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function n(o,t){this.scrollLeft=o,this.scrollTop=t}function f(o){if(null===o||"object"!=typeof o||void 0===o.behavior||"auto"===o.behavior||"instant"===o.behavior)return!0;if("object"==typeof o&&"smooth"===o.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+o.behavior+" is not a valid value for enumeration ScrollBehavior.")}function p(o,t){return"Y"===t?o.clientHeight+c<o.scrollHeight:"X"===t?o.clientWidth+c<o.scrollWidth:void 0}function a(t,l){var e=o.getComputedStyle(t,null)["overflow"+l];return"auto"===e||"scroll"===e}function d(t){var l,e,i,c,n=(s()-t.startTime)/r;c=n=n>1?1:n,l=.5*(1-Math.cos(Math.PI*c)),e=t.startX+(t.x-t.startX)*l,i=t.startY+(t.y-t.startY)*l,t.method.call(t.scrollable,e,i),e===t.x&&i===t.y||o.requestAnimationFrame(d.bind(o,t))}function h(l,e,r){var c,f,p,a,h=s();l===t.body?(c=o,f=o.scrollX||o.pageXOffset,p=o.scrollY||o.pageYOffset,a=i.scroll):(c=l,f=l.scrollLeft,p=l.scrollTop,a=n),d({scrollable:c,method:a,startTime:h,startX:f,startY:p,x:e,y:r})}}"object"==typeof exports&&"undefined"!=typeof module?module.exports={polyfill:o}:o()}();
    </script>
    <title>F:Quantum state tomography with informationally complete POVMs generated  in time domain</title>

    <link rel="shortcut icon" href=https://127.0.0.1:8888/static/img/ook.svg>

        <link rel="stylesheet" href="/templates/local/robotofont/robotofont.css"/>
        <link rel="stylesheet" href="/templates/local/ionicons/ionicons.css"/>
        <link rel="stylesheet" href="/templates/local/materialdesignicons/iconfont/material-icons.css"/>
        <link rel="stylesheet" href="/templates/local/fontawesome/css/all.min.css"/>
        <link rel="stylesheet" href="/templates/local/animate.css"/>
        <link rel="stylesheet" href="/templates/local/quasar.css"/>

    <style>
        :root {
                --q-color-dark      : #382a42;
                --q-color-primary   : #313451;
                --q-color-secondary : #4c4b6a;
                --q-color-info      : #ffffff;
                --q-color-positive  : #ffd196;
                --q-color-negative  : #70a8ff;
                --q-color-accent    : #fa7d07;
                --q-color-warning   : #d0b56a;
            }
            body.body--dark {
                color: #ffffff;
                background-color: #313451;
            }
            a, a:visited, a:active {color: inherit; text-decoration:none;}
            //.body--dark a:hover {background-color: #50404d; cursor: pointer;}
            .body--dark a:hover {background-color: #A0A0A020; cursor: pointer;}
            //.body--dark a:hover {cursor: pointer; color: inherit; background: currentColor;opacity:0.75; }

    </style>

            <script src="https://documentcloud.adobe.com/view-sdk/viewer.js"></script>
            <script src="/static/components/pdfembed.js"></script>

        <link href="/templates/css/highcharts_jp.css" rel="stylesheet">
    <script src="/templates/local/highcharts.js"></script>
    <script>
    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        }
    });
    </script>
    <script src="/templates/local/ag-grid-community.js"></script>
</head>
<body class="" style="" class="">

        <script src="/templates/local/jquery.js"></script>
        <script src="/templates/local/vue.js"></script>
        <script src="/templates/local/quasar.js"></script>

    <div id="components">
    </div>
    <script>
        console.log('Quasar Version ' + Quasar.version);

            Quasar.Dark.set(true);

    </script>

    <script src=https://127.0.0.1:8888/static/components/pdfembed.js></script>
      <script src='/templates/js//justpy_core.js'></script>
  <script>
    var page_id = 12;
    var use_websockets = true;
    var justpyComponents = [{"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"view": "hHh lpR fFf", "container": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-layout", "class_name": "QLayout", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"elevated": true}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-header", "class_name": "QHeader", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark text-info", "style": "", "set_focus": false, "html_tag": "q-toolbar", "class_name": "QToolbar", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"transition": null, "src": "/static/img/ook.svg"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "height:32px;width:32px", "set_focus": false, "html_tag": "q-img", "class_name": "QImg", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "text-subtitle1", "style": "", "set_focus": false, "html_tag": "q-toolbar-title", "class_name": "QToolbarTitle", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "F:2020czerwinski201013777 Quantum state tomography with informationally complete POVMs generated  in time domain"}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-space", "class_name": "QSpace", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"icon": "account_circle", "round": true, "flat": true, "dense": true, "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"id": "401", "value": false, "checked": false}, "id": 401, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-menu", "class_name": "QMenu", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-list", "class_name": "QList", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"clickable": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "text-positive", "style": "", "set_focus": false, "html_tag": "q-item", "class_name": "QItem", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "User: aalexei"}, {"attrs": {"id": "402", "disable": false, "clickable": true}, "id": 402, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-item", "class_name": "QItem", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"close-popup": true}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-item-section", "class_name": "QItemSection", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Logout"}]}]}], "debounce": 200, "input_type": "boolean", "value": false, "checked": false, "evaluate_prop": [], "disable_input_event": false}]}, {"attrs": {"id": "400", "icon": "menu", "round": true, "flat": true, "dense": true, "loading": false}, "id": 400, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}, {"attrs": {"id": "403", "side": "right", "mini": false, "value": false, "width": 200, "elevated": true}, "id": 403, "vue_type": "quasar_component", "show": true, "events": ["input", "before"], "event_modifiers": {}, "classes": "bg-dark text-info", "style": "", "set_focus": false, "html_tag": "q-drawer", "class_name": "QDrawer", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"offset": null, "duration": null}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "fit", "style": "", "set_focus": false, "html_tag": "q-scroll-area", "class_name": "QScrollArea", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"header": true}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "full-width text-center text-positive text-weight-bold", "style": "", "set_focus": false, "html_tag": "q-item-label", "class_name": "QItemLabel", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "entropy"}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-list", "class_name": "QList", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"type": "a", "icon": "search", "flat": true, "align": "between", "loading": false, "href": "/"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Search"}, {"attrs": {"type": "a", "icon": "info", "flat": true, "align": "between", "loading": false, "href": "/info"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "DB Info"}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-separator", "class_name": "QSeparator", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "407", "type": "a", "icon": "ion-add", "flat": true, "align": "between", "loading": false}, "id": 407, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Add Document"}]}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-list", "class_name": "QList", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"type": "a", "label": "Document", "icon": "description", "flat": true, "align": "between", "loading": false, "href": "/view/DT70TH5JCKFMQDQZEI8EOAEDV"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "410", "label": "Copy citekey", "icon": "content_copy", "flat": true, "align": "between", "loading": false}, "id": 410, "vue_type": "quasar_component", "show": true, "events": ["click", "after"], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "414", "type": "a", "label": "Item data", "icon": "ion-list", "flat": true, "align": "between", "loading": false}, "id": 414, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "419", "type": "a", "label": "Bulk Edit", "icon": "ion-create", "flat": true, "align": "between", "loading": false}, "id": 419, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "422", "type": "a", "label": "Delete", "icon": "ion-trash", "flat": true, "align": "between", "loading": false}, "id": 422, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "full-width", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-list", "class_name": "QList", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-separator", "class_name": "QSeparator", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "408", "type": "a", "icon": "ion-expand", "flat": true, "align": "between", "loading": false}, "id": 408, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "full-width q-ma-sm", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"model": "fs_value"}, "scoped_slots": {}, "object_props": [], "text": "Fullscreen"}]}], "offset": null, "duration": null}]}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-page-container", "class_name": "QPageContainer", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"id": "409", "rounded": true}, "id": 409, "vue_type": "quasar_component", "show": false, "events": ["click"], "event_modifiers": {}, "classes": "bg-warning text-black q-ma-lg", "style": "", "set_focus": false, "html_tag": "q-banner", "class_name": "QBanner", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {"action": {"attrs": {"label": "Dissmiss", "color": "dark", "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}}, "object_props": [], "text": ""}, {"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "q-px-sm", "style": "", "set_focus": false, "html_tag": "q-page", "class_name": "QPage", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "row fit items-start q-px-sm", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"vue_type": "jppdfembed", "id": 411, "show": true, "classes": "m-2 col", "style": "height: 95vh; width: 100%;", "client_id": "", "showAnnotationTools": true, "embedMode": "", "defaultViewMode": "FIT_WIDTH", "focusOnRendering": true, "showDownloadPDF": false, "showPrintPDF": false, "showPageControls": true, "dockPageControls": true, "showLeftHandPanel": true, "autoSaveFrequency": 0, "enableFocusPolling": false, "showSaveButton": true, "event_propagation": true, "def": {}, "events": ["file_save"], "clear": false, "options": {}}]}]}]}]}, {"attrs": {"id": "404", "transition-show": "scale", "transition-hide": "scale", "value": false, "title": "Add Document", "checked": false}, "id": 404, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-dialog", "class_name": "OokFileAddDialog", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-card", "class_name": "QCard", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"id": "405", "enctype": "multipart/form-data"}, "id": 405, "vue_type": "html_component", "show": true, "events": ["submit"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "form", "class_name": "Form", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark", "style": "", "set_focus": false, "html_tag": "q-bar", "class_name": "QBar", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Add Document"}, {"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-section", "class_name": "QCardSection", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"id": "406", "checked": false, "form": null, "multiple": true, "type": "file", "value": ""}, "id": 406, "vue_type": "html_component", "show": true, "events": ["change", "before"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "input", "class_name": "Input", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "debounce": 200, "input_type": "file", "value": "", "checked": false}, {"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}, {"attrs": {"align": "right"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-actions", "class_name": "QCardActions", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"label": "Cancel", "flat": true, "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"close-popup": true}, "scoped_slots": {}, "object_props": []}, {"attrs": {"type": "submit", "label": "Add", "loading": false, "disable": true}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}]}], "debounce": 200, "input_type": "boolean", "value": false, "checked": false, "evaluate_prop": [], "disable_input_event": false}, {"attrs": {"notify": false, "color": "warning", "textColor": "black", "icon": "info", "position": "top-right"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-notify", "class_name": "QNotify", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "notify": false}, {"attrs": {"id": "412", "transition-show": "scale", "transition-hide": "scale", "full-width": true, "full-height": true, "value": false, "title": "", "checked": false}, "id": 412, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-dialog", "class_name": "OokDialog", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-card", "class_name": "QCard", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark", "style": "", "set_focus": false, "html_tag": "q-bar", "class_name": "QBar", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": ""}, {"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-section", "class_name": "QCardSection", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"id": "413", "columns": [{"name": "key", "field": "key", "label": "Key", "align": "left"}, {"name": "value", "field": "value", "label": "Value", "align": "left"}], "title": "Data for item:", "wrap-cells": true, "data": [{"key": "kind", "value": "File"}, {"key": "uid", "value": "DWGIR5P8BUAAQ8I3RSI4W3Q88"}, {"key": "ctime", "value": "1637189395.9784286"}, {"key": "mtime", "value": "1666738115.189554"}, {"key": "ext", "value": ".pdf"}, {"key": "size", "value": "192740"}, {"key": "mime_type", "value": "application/pdf"}, {"key": "blake2b", "value": "5KU36I6E3BRFG5ZYIKG4CK3BRAF5KGKV"}], "row-key": "key", "pagination": {"rowsPerPage": 10}, "selected": [], "dense": true}, "id": 413, "vue_type": "quasar_component", "show": true, "events": ["update:pagination", "update:selected", "before"], "event_modifiers": {}, "classes": "col-10", "style": "", "set_focus": false, "html_tag": "q-table", "class_name": "QTable", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}, {"attrs": {"align": "right"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-actions", "class_name": "QCardActions", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"label": "Cancel", "flat": true, "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"close-popup": true}, "scoped_slots": {}, "object_props": []}]}]}], "debounce": 200, "input_type": "boolean", "value": false, "checked": false, "evaluate_prop": [], "disable_input_event": false}, {"attrs": {"id": "415", "persistent": true, "transition-show": "scale", "transition-hide": "scale", "full-width": true, "full-height": true, "value": false, "title": "Bulk Edit", "checked": false}, "id": 415, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-dialog", "class_name": "OokDialog", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-card", "class_name": "QCard", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark", "style": "", "set_focus": false, "html_tag": "q-bar", "class_name": "QBar", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Bulk Edit"}, {"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-section", "class_name": "QCardSection", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"id": "418", "outlined": true, "value": "", "type": "textarea", "debounce": 200, "input-class": "items-stretch", "input-style": "width:100%;height:80vh;resize: none;", "checked": false}, "id": 418, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-input", "class_name": "QInput", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "debounce": 200, "input_type": "textarea", "value": "", "checked": false, "evaluate_prop": ["rules"], "disable_input_event": false}]}]}, {"attrs": {"align": "right"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-actions", "class_name": "QCardActions", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"label": "Cancel", "flat": true, "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"close-popup": true}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "416", "label": "Save", "loading": false}, "id": 416, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "bg-dark text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}, {"attrs": {"id": "417", "transition-show": "scale", "transition-hide": "scale", "value": false, "title": "Error", "checked": false}, "id": 417, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-dialog", "class_name": "OokDialog", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-card", "class_name": "QCard", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark", "style": "", "set_focus": false, "html_tag": "q-bar", "class_name": "QBar", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Error"}, {"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "q-pt-none", "style": "", "set_focus": false, "html_tag": "q-card-section", "class_name": "QCardSection", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-list", "class_name": "QList", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}, {"attrs": {"align": "right"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-actions", "class_name": "QCardActions", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"label": "Cancel", "flat": true, "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"close-popup": true}, "scoped_slots": {}, "object_props": []}]}]}], "debounce": 200, "input_type": "boolean", "value": false, "checked": false, "evaluate_prop": [], "disable_input_event": false}], "debounce": 200, "input_type": "boolean", "value": false, "checked": false, "evaluate_prop": [], "disable_input_event": false}, {"attrs": {"id": "420", "transition-show": "scale", "transition-hide": "scale", "value": false, "title": "Confirm Delete", "checked": false}, "id": 420, "vue_type": "quasar_component", "show": true, "events": ["before", "input"], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-dialog", "class_name": "OokDialog", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-card", "class_name": "QCard", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-dark", "style": "", "set_focus": false, "html_tag": "q-bar", "class_name": "QBar", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [], "text": "Confirm Delete"}, {"attrs": {}, "id": null, "vue_type": "html_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "div", "class_name": "Div", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}, {"attrs": {"align": "right"}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "", "style": "", "set_focus": false, "html_tag": "q-card-actions", "class_name": "QCardActions", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": [{"attrs": {"label": "Cancel", "flat": true, "loading": false}, "id": null, "vue_type": "quasar_component", "show": true, "events": [], "event_modifiers": {}, "classes": "bg-secondary text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {"close-popup": true}, "scoped_slots": {}, "object_props": []}, {"attrs": {"id": "421", "label": "Delete", "loading": false}, "id": 421, "vue_type": "quasar_component", "show": true, "events": ["click"], "event_modifiers": {}, "classes": "bg-dark text-info", "style": "", "set_focus": false, "html_tag": "q-btn", "class_name": "QBtn", "event_propagation": true, "inner_html": "", "animation": false, "debug": false, "transition": null, "directives": {}, "scoped_slots": {}, "object_props": []}]}]}], "debounce": 200, "input_type": "boolean", "value": false, "checked": false, "evaluate_prop": [], "disable_input_event": false}];
    let justpy_core=new JustpyCore(
                this, // window
                12, // page_id
                'F:Quantum state tomography with informationally complete POVMs generated  in time domain', // title
                'true', // use_websockets
                '', // redirect
                '', // display_url
                true, // page_ready
                false, // result_ready     
                0, // reload_interval
                ['page_ready'],  // events
                'https://127.0.0.1:8888/static/',  // static_resources_url
                false   // debug
            );
  </script>
  <script src='/templates/js//event_handler.js'></script>
  <script src='/templates/js/vue/component_generator.js'></script>
  <script src='/templates/js/vue/editorjp.js'></script>
  <script src='/templates/js/vue/html_component.js'></script>
  <script src='/templates/js/vue/aggrid.js'></script>
  <script src='/templates/js/vue/chartjp.js'></script>
  <script src='/templates/js/vue/katexjp.js'></script>
  <script src='/templates/js/vue/iframejp.js'></script>
  <script src='/templates/js/vue/plotlyjp.js'></script>
  <script src='/templates/js/vue/deckgl.js'></script>
  <script src='/templates/js/vue/quasar_component.js'></script>
  <script src='/templates/js/vue/altairjp.js'></script>
  <script src='/templates/js/vue/bokehjp.js'></script>
  <script>
    justpy_core.setup();
  </script>

</body>
aalexei commented 1 year ago

Most resources get linked correctly because they are relative links without the host. The standouts are the icon <link rel="shortcut icon" href=https://127.0.0.1:8888/static/img/ook.svg>, the custom component <script src=https://127.0.0.1:8888/static/components/pdfembed.js></script>, and the static resource url 'https://127.0.0.1:8888/static/' for JustpyCore. I think in this instance they could all work as relative urls and the hostname translation left to nginx.

aalexei commented 1 year ago

The following hacks fix the issues above and the component works:

All make use of url_for() so maybe that is the place to tackle it.

WolfgangFahl commented 1 year ago

@aalexei thank you for this analysis - that is very helpful. Could you please also share your nginx configuration file.

This is linked to #519 and #162

aalexei commented 1 year ago

The relevant config lines for the vhost in nginx are

          proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   X-Forwarded-Proto $scheme;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection $connection_upgrade;

where the last 3 lines forward the websocket. Don't have the full config as I'm configuring it programatically on nixos.

WolfgangFahl commented 1 year ago

see #685