Issue #836: Responsive wrapper of Saguaro 1D [IN PROGRESS]

src/TmFv3DApp/index.ts

@@ -5,12 +5,16 @@ import { fetchDescriptor, registerRegionDescriptorData } from "./UniTmpHelper";
 import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
 import { RcsbFv } from "@rcsb/rcsb-saguaro";
 import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
+import { TmFv1DElement } from "./tmdet-viewer/TmFv1DComponent";
+
+customElements.define("tm-saguaro-1d", TmFv1DElement);
+
 
 function createRcsb3DViewer(configParams: any) {
     document.addEventListener("DOMContentLoaded", (event) => {
         (async function(event) {
 
-            updateSiteColors(configParams.side1 as any);
+            updateSiteColors(configParams.side1);
             DebugUtil.enableLog();
 
             const panel3dConfig = await createConfig(configParams);
@@ -67,7 +71,7 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
  * @param side1 side1 paramter to update site colors, if it is needed
  */
 async function createRcsbFeatureViewer(params: {
-    elementId: string, url: string, side1: string, trackWidth?: number, rowTitleWidth?: number }) {
+    elementId: string, url: string, side1: string, trackWidth?: number, rowTitleWidth?: number }): Promise<RcsbFv> {
 
     updateSiteColors(params.side1 as any);
 
@@ -85,7 +89,13 @@ async function createRcsbFeatureViewer(params: {
         rowConfigData: rowConfig,
         elementId: params.elementId
     });
-    return pfv;
+    (window as any).pfv = pfv;
+    console.log(pfv);
+    return new Promise<RcsbFv>((resolve) => { resolve(pfv); });
 }
 
-export { DebugUtil, createRcsb3DViewer, createRcsbFeatureViewer };
+export {
+    DebugUtil,
+    createRcsb3DViewer,
+    createRcsbFeatureViewer,
+};

src/TmFv3DApp/tmdet-viewer/TmFv1DComponent.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+export type TmFv1DParams = {
+    elementId: string,
+    url: string,
+    side1: string,
+    trackWidth?: number,
+    rowTitleWidth?: number
+};
+
+export class TmFv1D extends React.Component {
+
+    protected containerRef = React.createRef<HTMLDivElement>();
+
+    public constructor(props: TmFv1DParams) {
+        super(props);
+    }
+
+    public componentDidMount(): void {
+        new ResizeObserver(this.resize)
+            .observe(this.containerRef.current as Element);
+    }
+
+    resize() {
+        console.log('Observer works');
+    }
+
+    public render(): JSX.Element {
+        return (
+            <div ref={this.containerRef} style={{ borderWidth: "1px", borderStyle: "solid", borderBlockColor: "black" }}>
+                Hello
+            </div>
+        );
+    }
+
+}
+
+export class TmFv1DElement extends HTMLElement {
+
+    constructor() {
+        super();
+        const root = createRoot(this);
+        root.render(
+            <TmFv1D></TmFv1D>
+        );
+    }
+}