Home Esplora Aiuto
Accedi
web
/
TmMolStar
3
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

Issue #836: fixed Fenix issue: delay during element rendering

cycle20 1 anno fa
parent
10b1c31cbe
commit
0dc21e0988
4 ha cambiato i file con 77 aggiunte e 16 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 2 1
      package.json
  2. 56 0
      src/TmFv3DApp/1dtest.html
  3. 1 0
      src/TmFv3DApp/index.ts
  4. 18 15
      src/TmFv3DApp/tmdet-viewer/TmFv1DComponent.tsx

+ 2 - 1
package.json
Vedi File 

@@ -12,10 +12,11 @@
 
     "tsc": "tsc --incremental",
 
     "tsc": "tsc --incremental",
 
     "build": "webpack --config ./webpack.config.js",
 
     "build": "webpack --config ./webpack.config.js",
 
     "buildTmFv": "npm run cleanAll && npm run tsc && npm run initTmFvBuild && webpack --config ./webpack.tm-saguaro.config.js",
 
     "buildTmFv": "npm run cleanAll && npm run tsc && npm run initTmFvBuild && webpack --config ./webpack.tm-saguaro.config.js",
 
+    "devTmFv": "npm run cleanAll && npm run tsc && npm run initTmFvBuild && webpack --mode development --config ./webpack.tm-saguaro.config.js",
 
     "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run mkDist && npm run copyConfig && npm run copyDef && npm run build && npm run buildDoc",
 
     "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run mkDist && npm run copyConfig && npm run copyDef && npm run build && npm run buildDoc",
 
     "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run mkDist && npm run copyConfig && npm run copyDef && npm run build",
 
     "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run mkDist && npm run copyConfig && npm run copyDef && npm run build",
 
     "cpStyles": "ncp src/styles lib/styles",
 
     "cpStyles": "ncp src/styles lib/styles",
 
-    "cpPublic": "ncp public build/TmFeatureViewer && ncp src/TmFv3DApp/index.html build/TmFeatureViewer/index.html",
 
+    "cpPublic": "ncp public build/TmFeatureViewer && cp src/TmFv3DApp/*.html build/TmFeatureViewer",
 
     "mkDist": "mkdirp build/dist",
 
     "mkDist": "mkdirp build/dist",
 
     "initTmFvBuild": "mkdirp build/TmFeatureViewer && npm run cpPublic && npm run cpStyles",
 
     "initTmFvBuild": "mkdirp build/TmFeatureViewer && npm run cpPublic && npm run cpStyles",
 
     "copyConfig": "ncp lib/config.js build/dist/config.js",
 
     "copyConfig": "ncp lib/config.js build/dist/config.js",

+ 56 - 0
src/TmFv3DApp/1dtest.html
Vedi File 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>RCSB PDB 1D Viewer Test Page</title>
 
+    <script src="./tm-saguaro.js"></script>
 
+</head>
 
+<style>
 
+    .ult_side1 { fill: #f88; }
 
+    .ult_side2 { fill: #88f; }
 
+    .ult_beta { fill: #ff0; }
 
+    .ult_coil { fill: #ff0; }
 
+    .ult_ifh { fill: #0f0; }
 
+    .ult_alpha { fill: #ff0; }
 
+    .ult_mebins { fill: #f0f; }
 
+    .ult_reentrant { fill: #f80; }
 
+    .ult_unknown { fill: #aaa; }
 
+    .ult_membrane { fill: #ff0; }
 
+    .ult_inside { fill: #f00; }
 
+    .ult_outside { fill: #00f; }
 
+    .ult_not_inside { fill: #08f; }
 
+    .ult_not_outside { fill: #f04; }
 
+    .ult_not_membrane { fill: #f0f; }
 
+    .ult_signal { fill: #000; }
 
+    .ult_propeptide { fill: #000; }
 
+    .ult_transit { fill: #000; }
 
+    .ult_cleavable { fill: #000; }
 
+    .ult_domain { fill: #aaf; }
 
+    .ult_periplasm { fill: #f0f; }
 
+  </style>
 
+<body>
 
+<script>
 
+  function displayWidth() {
 
+    const bb = document.body.getBoundingClientRect();
 
+    const message = `Dimensions Test ${bb.width}x${bb.height} ready state: ${document.readyState}`
 
+    const div = document.createElement('div');
 
+    div.appendChild(document.createTextNode(message));
 
+    document.body.appendChild(div);
 
+  }
 
+
 
+  displayWidth();
 
+  document.addEventListener('DOMContentLoaded', (e) => displayWidth());
 
+
 
+</script>
 
+<div style="border: 1px solid black; margin-top: 50px;">
 
+    <tm-saguaro-1d  id="tms1d" elementId="xy" autoResize="true" rowTitleWidth="150" trackWidth="700" url="./zdh15_saguaro_7khm_A.json" side1="Inside" />
 
+</div>
 
+
 
+<script>
 
+  displayWidth();
 
+</script>
 
+  
+<button onclick="displayWidth()">Display width value of body element</button>
 
+
 
+</body>
 
+</html>

+ 1 - 0
src/TmFv3DApp/index.ts
Vedi File 

@@ -66,4 +66,5 @@ export {
 
     DebugUtil,
 
     DebugUtil,
 
     createRcsb3DViewer,
 
     createRcsb3DViewer,
 
     createRcsbFeatureViewer,
 
     createRcsbFeatureViewer,
 
+    TmFv1DElement
 
 };
 
 };

+ 18 - 15
src/TmFv3DApp/tmdet-viewer/TmFv1DComponent.tsx
Vedi File 

@@ -1,5 +1,5 @@
 
 import React from 'react';
 
 import React from 'react';
 
-import { createRoot } from 'react-dom/client';
 
+import { Root, createRoot } from 'react-dom/client';
 
 import { updateSiteColors } from '../tmdet-extension/tmdet-color-theme';
 
 import { updateSiteColors } from '../tmdet-extension/tmdet-color-theme';
 
 import { RcsbFv, RcsbFvBoardConfigInterface } from '@rcsb/rcsb-saguaro';
 
 import { RcsbFv, RcsbFvBoardConfigInterface } from '@rcsb/rcsb-saguaro';
 
 import { fetchDescriptor } from '../UniTmpHelper';
 
 import { fetchDescriptor } from '../UniTmpHelper';
 
@@ -33,8 +33,6 @@ export class TmFv1D extends React.Component<TmFv1DParams, TmFv1DState> {
 
     }
 
     }
 
 
 
     public async componentDidMount(): Promise<void> {
 
     public async componentDidMount(): Promise<void> {
 
-        console.log('PROPS', this.props);
 
-
 
         await createRcsbFeatureViewer({
 
         await createRcsbFeatureViewer({
 
             elementId: this.props.elementId,
 
             elementId: this.props.elementId,
 
             url: this.props.url,
 
             url: this.props.url,
 
@@ -50,13 +48,12 @@ export class TmFv1D extends React.Component<TmFv1DParams, TmFv1DState> {
 
     }
 
     }
 
 
 
     resize(entries: ResizeObserverEntry[], observer: ResizeObserver) {
 
     resize(entries: ResizeObserverEntry[], observer: ResizeObserver) {
 
-        console.log('Observer params', [ entries, observer ]);
 
         const currentId = entries[0].target.id;
 
         const currentId = entries[0].target.id;
 
         const observerEntry = entries[0];
 
         const observerEntry = entries[0];
 
         const featureViewer = featureViewerRegistry.get(currentId) as RcsbFv;
 
         const featureViewer = featureViewerRegistry.get(currentId) as RcsbFv;
 
         const boardConfig = featureViewer.getBoardConfig();
 
         const boardConfig = featureViewer.getBoardConfig();
 
         boardConfig.trackWidth = observerEntry.contentRect.width - boardConfig.rowTitleWidth!;
 
         boardConfig.trackWidth = observerEntry.contentRect.width - boardConfig.rowTitleWidth!;
 
-        resizeBoardConfigTrackWidth(boardConfig, observerEntry);
 
+        resizeBoardConfigTrackWidth(boardConfig, observerEntry.contentRect.width);
 
 
 
         featureViewer.updateBoardConfig({ boardConfigData: boardConfig });
 
         featureViewer.updateBoardConfig({ boardConfigData: boardConfig });
 
     }
 
     }
 
@@ -76,6 +73,16 @@ export class TmFv1DElement extends HTMLElement {
 
 
 
     connectedCallback() {
 
     connectedCallback() {
 
         const root = createRoot(this);
 
         const root = createRoot(this);
 
+        setTimeout(() => this.render(root), 1000);
 
+    }
 
+
 
+    render(root: Root) {
 
+
 
+        let autoResize = true;
 
+        if (this.hasAttribute("autoResize")) {
 
+            const value = this.getAttribute("autoResize");
 
+            autoResize = (value == "true");
 
+        }
 
 
 
         const elementId = this.getAttribute("elementId")!;
 
         const elementId = this.getAttribute("elementId")!;
 
         const url = this.getAttribute("url")!;
 
         const url = this.getAttribute("url")!;
 
@@ -83,16 +90,12 @@ export class TmFv1DElement extends HTMLElement {
 
         const calculatedWidth = calculateViewerWidth(this.parentElement);
 
         const calculatedWidth = calculateViewerWidth(this.parentElement);
 
         const rowTitleWidth = parseInt(this.getAttribute("rowTitleWidth")!)
 
         const rowTitleWidth = parseInt(this.getAttribute("rowTitleWidth")!)
 
             || defaultRowTitleWidth;
 
             || defaultRowTitleWidth;
 
-        const trackWidth = (parseInt(this.getAttribute("trackWidth")!)
 
-            || calculatedWidth) - rowTitleWidth;
 
+        let trackWidth = !autoResize
 
+            ? parseInt(this.getAttribute("trackWidth")!) || (defaultViewerWidth - ULTIMATE_GAP_CONSTANT)
 
+            : calculatedWidth;
 
+        trackWidth -= rowTitleWidth;
 
         console.log('Widths:', [ rowTitleWidth, trackWidth ]);
 
         console.log('Widths:', [ rowTitleWidth, trackWidth ]);
 
 
 
-        let autoResize = true;
 
-        if (this.hasAttribute("autoResize")) {
 
-            const value = this.getAttribute("autoResize");
 
-            autoResize = (value == "true");
 
-        }
 
-
 
         root.render(
 
         root.render(
 
             <TmFv1D
 
             <TmFv1D
 
                 elementId={ elementId }
 
                 elementId={ elementId }
 
@@ -153,7 +156,7 @@ export async function createRcsbFeatureViewer(params: {
 
     return pfv;
 
     return pfv;
 
 }
 
 }
 
 
 
-function resizeBoardConfigTrackWidth(boardConfig: RcsbFvBoardConfigInterface, entry: ResizeObserverEntry) {
 
-    const fullWidth = entry.contentRect.width - ULTIMATE_GAP_CONSTANT;
 
+function resizeBoardConfigTrackWidth(boardConfig: RcsbFvBoardConfigInterface, width: number) {
 
+    const fullWidth = width - ULTIMATE_GAP_CONSTANT;
 
     boardConfig.trackWidth = fullWidth - boardConfig.rowTitleWidth!;
 
     boardConfig.trackWidth = fullWidth - boardConfig.rowTitleWidth!;
 
 }
 
 }