From aca5720cdddd9591f392a11a88ccc6036d34e5d6 Mon Sep 17 00:00:00 2001
From: Evgeny Blokhin <eb@tilde.pro>
Date: Fri, 30 Aug 2024 01:09:46 +0200
Subject: [PATCH] Fix integrations

---
 labs/view-phonons/index.html    |  8 ++++---
 src_js/third_party/cifplayer.js | 11 ++++++++-
 webassets/iframe_visavis.html   | 42 ++++++++++++++++++++++++++-------
 3 files changed, 49 insertions(+), 12 deletions(-)
diff --git a/labs/view-phonons/index.html b/labs/view-phonons/index.html
index da68e84..a2d5e64 100755
--- 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
index f74f5e2..6a4c2d1 100644
--- a/src_js/third_party/cifplayer.js
+++ b/src_js/third_party/cifplayer.js
@@ -5924,6 +5924,10 @@ var $;
 			if(next !== undefined) return next;
 			return true;
 		}
+		skip_panel(next){
+			if(next !== undefined) return next;
+			return false;
+		}
 		atom_radius_scale(){
 			return 0.6;
 		}
@@ -5974,6 +5978,9 @@ var $;
 		overlay_box(id){
 			return null;
 		}
+		minimal_heigth(){
+			return 300;
+		}
 		sub(){
 			return [
 				(this.Three()), 
@@ -6067,6 +6074,7 @@ var $;
 	($mol_mem(($.$optimade_cifplayer_player.prototype), "data"));
 	($mol_mem(($.$optimade_cifplayer_player.prototype), "externals"));
 	($mol_mem(($.$optimade_cifplayer_player.prototype), "fullscreen"));
+	($mol_mem(($.$optimade_cifplayer_player.prototype), "skip_panel"));
 	($mol_mem(($.$optimade_cifplayer_player.prototype), "vibrate"));
 	($mol_mem(($.$optimade_cifplayer_player.prototype), "phonon"));
 
@@ -7117,6 +7125,7 @@ var $;
                 color: $mol_theme.back,
             },
             position: 'relative',
+            height: '100%',
             '@': {
                 fullscreen: {
                     'true': {
@@ -7628,7 +7637,7 @@ var $;
                 this.vibration_active(true);
             }
             left_panel() {
-                if (this.externals()?.skip_panel)
+                if (this.skip_panel())
                     return [];
                 try {
                     this.structure_3d_data();
diff --git a/webassets/iframe_visavis.html b/webassets/iframe_visavis.html
index f9a3ba6..065bdbd 100644
--- 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>
