Fix integrations

mpds-io · Aug 29, 2024 · aca5720 · aca5720
1 parent f4b561d
commit aca5720
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 12 deletions.
diff --git a/labs/view-phonons/index.html b/labs/view-phonons/index.html
@@ -4,10 +4,12 @@
 <meta charset="utf-8" />
 <title>Phonon visualization</title>
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
-<script type="text/javascript" src="/src_js/third_party/cifplayer.js"></script>
+<script type="text/javascript" src="/ermac/src_js/third_party/cifplayer.js"></script><!-- FIXME -->
 <style type="text/css">
 *{margin:0;padding:0;}
+
 :root{--textcolor:#000;}
+
 html, body{font-family:Courier;color:var(--textcolor);}
 body{background:#fff;}
 #left{width:36%;z-index:2;position:fixed;margin-left:0.3em;height:600px;overflow-y:auto;}
@@ -53,7 +55,7 @@
 
 window.ref_endpoint = 'https://api.mpds.io/v0/download/s?fmt=optimade&q='; // (window.location.host.indexOf('localhost')==-1)
 window.example_data = 'https://api.mpds.io/v0/download/p?q=P50018989-7&fmt=json'; // SrTiO3/221/cP5 phonons
-window.player = null; // web-component
+window.player = null; // cifplayer web-component
 
 function close_vibox(){
     // this is a mock-up for player.html
@@ -116,7 +118,7 @@
     //document.getElementById('main').innerHTML = '<iframe id="player" frameborder=0 scrolling="no" width="100%" height="700" src="' + window.player_src + '#' + window.ref_endpoint + ref_entry + '"></iframe>';
 
     ajax_download(window.ref_endpoint + ref_entry, function(item){
-        document.getElementById('main').innerHTML = '<optimade-cifplayer-player externals={"skip_panel":true,"theme":""}></optimade-cifplayer-player>';
+        document.getElementById('main').innerHTML = '<optimade-cifplayer-player fullscreen="false" skip_panel="true"></optimade-cifplayer-player>';
         window.player = document.getElementsByTagName('optimade-cifplayer-player')[0].view;
         //console.log(item);
         window.player.data(item);

diff --git a/src_js/third_party/cifplayer.js b/src_js/third_party/cifplayer.js
diff --git a/webassets/iframe_visavis.html b/webassets/iframe_visavis.html
@@ -3,9 +3,18 @@
 <head>
 <meta charset="utf-8" />
 <style type="text/css">
-html, body{width:100%;height:100%;overflow:hidden;}
+html, body, #main{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
 mpds-visavis-plot{width:100%;height:100%;}
+
+#switcher{display:none;position:fixed;top:10px;left:10px;width:40px;height:40px;z-index:10000;cursor:pointer;background:url(data:image/gif;base64,R0lGODlhHgAXAIABAAAAAP///yH5BAEKAAEALAAAAAAeABcAAAJVjA0Jx63bzkuRTegorXapjHHiJ23iaAbkya1qyFamG0ckXXcQniNb2su8do/TxHdJhpTMpvMJhbaS06LsByxZbViYdvtFeovgssv61DG/F67SzWOHCgA7) center center no-repeat;border:2px solid #ff8400;border-radius:25px;}
+#switcher:hover{transform:rotate(180deg);} /* FIXME: REFACTOR */
 </style>
+</head>
+<body>
+
+<div id="main"></div>
+<div id="switcher" title="Show interactive plot (experimental feature)"></div>
+
 <script type="text/javascript" src="../src_js/third_party/visavis.js"></script>
 <script type="text/javascript">
 "use strict";
@@ -16,6 +25,20 @@
 window.visavis = {};
 window.visavis.elementals_on = ['nump'];
 
+function manage_switcher(url){
+    /* FIXME: REFACTOR */
+    document.getElementById('switcher').style.display = 'none';
+
+    if (url.indexOf('q=') === -1)
+        return;
+    let parts = url.split('q='),
+        entry = parts[parts.length - 1];
+    entry = entry.split('&')[0];
+
+    if (entry.charAt(0) == 'P' || entry.charAt(0) == 'C')
+        document.getElementById('switcher').style.display = 'block';
+}
+
 function matrix_order(x_sort, y_sort, x_op, y_op){
 
     if (!y_sort) y_sort = x_sort;
@@ -76,9 +99,15 @@
     let url = window.location.hash.substr(1);
     url = url.replace('%22total_count%22%3A1%2C', '');
 
-    document.body.innerHTML = '<mpds-visavis-plot fullscreen="true"></mpds-visavis-plot>';
+    manage_switcher(url); /* FIXME: REFACTOR */
+
+    document.getElementById('main').innerHTML = '<mpds-visavis-plot fullscreen="true"></mpds-visavis-plot>';
     window.plot = document.getElementsByTagName('mpds-visavis-plot')[0].view;
     window.plot.notify = (msg) => window.parent.wmgui.notify(msg);
+    window.plot.on_fixel_checked = (checked) => {
+        const link = window.plot.json_request();
+        window.plot.json_request( checked ? `${link}&fixel=1` : link.replace('&fixel=1', '') );
+    }
 
     if (!keep_state){
         window.plot.json_request(url);
@@ -92,14 +121,11 @@
         url_redraw_react();
     });
 
-    window.plot.on_fixel_checked = (checked) => {
-        const link = window.plot.json_request();
-        window.plot.json_request( checked ? `${link}&fixel=1` : link.replace('&fixel=1', '') );
+    document.getElementById('switcher').onclick = function(){
+        /* FIXME: REFACTOR */
+        window.location = '/pd_stub.html#' + window.location.hash.substr(1).replace('fmt=json', 'fmt=png');
     }
-
 })();
 </script>
-</head>
-<body>
 </body>
 </html>