Issue #957: fixed build errors after upgrade to latest saguaro 1D and 3D

package.json

@@ -73,6 +73,7 @@
     "html-webpack-plugin": "^5.6.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.9.1",
+    "mkdirp": "^3.0.1",
     "ncp": "^2.0.0",
     "path-browserify": "^1.0.1",
     "raw-loader": "^4.0.2",

src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager.ts

@@ -28,7 +28,7 @@ import {
     StructureRepresentationPresetProvider
 } from "molstar/lib/mol-plugin-state/builder/structure/representation-preset";
 // import { TmDetDescriptorCache } from "@rcsb/rcsb-molstar/build/src/tmdet-extension/prop";
-import { DebugUtil } from "../../../TmFv3DApp/tmdet-extension/debug-utils";
+// import { DebugUtil } from "../../../TmFv3DApp/tmdet-extension/debug-utils";
 
 export enum LoadMethod {
     loadPdbId = "loadPdbId",

src/Tm3DStandaloneApp/index.tsx

@@ -1,15 +1,15 @@
 import { DebugUtil } from "../TmFv3DApp/tmdet-extension/debug-utils";
 import { TmViewerStandalone } from "./tmdet-viewer/TmViewerStandalone";
 import { ViewerProps } from "@rcsb/rcsb-molstar/build/src/viewer";
-import { TMDETMembraneOrientation } from "../TmFv3DApp/tmdet-extension/behavior";
-import { PluginSpec } from "molstar/lib/mol-plugin/spec";
+// import { TMDETMembraneOrientation } from "../TmFv3DApp/tmdet-extension/behavior";
+// import { PluginSpec } from "molstar/lib/mol-plugin/spec";
 import { PluginLayoutControlsDisplay } from "molstar/lib/mol-plugin/layout";
 import { PluginConfig } from "molstar/lib/mol-plugin/config";
 import { PluginContext } from "molstar/lib/mol-plugin/context";
 
-const Extensions = {
-    'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
-};
+// const Extensions = {
+//     'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
+// };
 
 const viewerParams: Partial<ViewerProps> = {
         layoutIsExpanded: false,

src/Tm3DStandaloneApp/tmdet-viewer/TmViewerStandalone.ts

@@ -17,7 +17,7 @@
 
 import { Viewer, ViewerProps } from '@rcsb/rcsb-molstar/build/src/viewer';
 import { TmDetColorThemeProvider, updateSiteColors } from '../../TmFv3DApp/tmdet-extension/tmdet-color-theme';
-import { MembraneOrientationPreset } from '../../TmFv3DApp/tmdet-extension/behavior';
+// import { MembraneOrientationPreset } from '../../TmFv3DApp/tmdet-extension/behavior';
 import { TmDetLabelProvider } from '../../TmFv3DApp/tmdet-extension/labeling';
 import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
 import { PresetProps } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';

src/TmFv3DApp/FeatureViewConfig.ts

@@ -2,11 +2,6 @@ import {
     CustomViewInterface,
     FeatureViewInterface
 } from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import {
-    RcsbFv,
-    RcsbFvRowConfigInterface,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
 import { RegionSelectionInterface } from "../RcsbFvState/RcsbFvSelectorManager";
 import {
     StructureViewerPublicInterface, SaguaroRegionList
@@ -23,6 +18,9 @@ import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import { getStyleColorString, updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
 import { TmDetRcsbPreset } from "./TmTrajectoryHierarchyPreset";
 import { TmRowTitleComponent } from "./tmdet-viewer/TmRowTitleComponent";
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import { RcsbFvTrackDataElementInterface } from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import { RcsbFv } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
 
 export type TmFvConfigParams = {
     pdbEntry: string,
@@ -105,7 +103,7 @@ function setFvConfigCallbacks(fvConfig: FeatureViewInterface<LoadMolstarInterfac
             plugin.resetCamera();
         }
     };
-    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus(modelId, labelAsymId, d.begin, d.end ?? d.begin);
     };
@@ -113,7 +111,6 @@ function setFvConfigCallbacks(fvConfig: FeatureViewInterface<LoadMolstarInterfac
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else {
-            const e = elements[0];
             plugin.select(elements.map(e=>({
                 modelId: modelId,
                 labelAsymId: labelAsymId,
@@ -144,7 +141,7 @@ function setFvConfigCallbacks(fvConfig: FeatureViewInterface<LoadMolstarInterfac
 function emptyFvConfigCallbacks(fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>) {
     fvConfig.sequenceSelectionChangeCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
     };
-    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    fvConfig.sequenceElementClickCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
     };
     fvConfig.sequenceHoverCallback = (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
     };
@@ -167,9 +164,9 @@ export function setExternalRowTitleComponent(rows: RcsbFvRowConfigInterface[], t
     });
 }
 
-function structureRowClickHandler(e: React.MouseEvent) {
-    console.warn('TODO: implement structureRowClickHandler()');
-}
+// function structureRowClickHandler(e: React.MouseEvent) {
+//     console.warn('TODO: implement structureRowClickHandler()');
+// }
 
 /**
  * Set region colors based on values read from CSS rules (ult_* classes) and
@@ -178,7 +175,7 @@ function structureRowClickHandler(e: React.MouseEvent) {
  */
 export function setRegionColors(rows: RcsbFvRowConfigInterface[]) {
     rows.forEach((track: RcsbFvRowConfigInterface) => {
-        track.displayConfig?.forEach(region => {
+        track.displayConfig?.forEach((region: any) => {
             const css = (region as any).css;
             if (css) {
                 region.displayColor = getStyleColorString(css);

src/TmFv3DApp/UniTmpHelper.ts

@@ -10,11 +10,8 @@ import { PDBTMDescriptor } from "./tmdet-extension/types";
 import { setMembraneOrientation, TmDetDescriptorCache } from "./tmdet-extension/prop";
 import { createMembraneOrientation } from "./tmdet-extension/transformation";
 import { DebugUtil } from "./tmdet-extension/debug-utils";
-import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
-import { TmViewerStandalone } from "../Tm3DStandaloneApp/tmdet-viewer/TmViewerStandalone";
-import { TmDetRcsbPreset } from "../Tm3DStandaloneApp/TmTrajectoryHierarchyPreset";
 
-export async function fetchDescriptor(url: string) {
+export async function fetchDescriptor(url: string): Promise<any> {
     const response = await fetch(url);
     const descriptor = await response.json().catch((e) => {
         console.error(`fetchDescriptor: JSON parsing of ${url} failed`, e);

src/TmFv3DApp/index.tsx

@@ -7,7 +7,7 @@ import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
 import { createRcsbFeatureViewer, TmFv1DElement } from "./tmdet-viewer/TmFv1DComponent";
 import { RcsbFvDOMConstants } from "../RcsbFvConstants/RcsbFvConstants";
 import { BlockSelectorManager, FeatureBlockInterface } from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import * as React from "react";
+// import * as React from "react";
 import { LoadMolstarInterface, LoadMolstarReturnType } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import { PluginContext } from "molstar/lib/mol-plugin/context";
 import { TmViewerStandalone } from "../Tm3DStandaloneApp/tmdet-viewer/TmViewerStandalone";

src/TmFv3DApp/tmdet-viewer/TmFv1DComponent.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Root, createRoot } from 'react-dom/client';
 import { updateSiteColors } from '../tmdet-extension/tmdet-color-theme';
-import { RcsbFv, RcsbFvBoardConfigInterface } from '@rcsb/rcsb-saguaro';
 import { fetchDescriptor } from '../UniTmpHelper';
 import { setExternalRowTitleComponent, setRegionColors } from '../FeatureViewConfig';
+import { RcsbFv } from '@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv';
+import { RcsbFvBoardConfigInterface } from '@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface';
 
 const defaultViewerWidth = 600;
 const defaultRowTitleWidth = 100;

src/TmFv3DApp/tmdet-viewer/TmRowTitleComponent.tsx

@@ -7,12 +7,15 @@
  */
 
 import * as React from "react";
-import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
-import { RcsbFvRowTitleInterface } from "@rcsb/rcsb-saguaro/build/RcsbFv/RcsbFvRow/RcsbFvRowTitle";
+import { RcsbFvRowTitleInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvRow/RcsbFvRowTitle";
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
 
 interface TmRowTitleInterface extends RcsbFvRowTitleInterface {
     color?: string;
     titleClick?: (e: React.MouseEvent) => void;
+    data: any;
+    isGlowing: boolean;
+    rowTitleHeight: number;
 }
 
 interface TmRowTitleState {

webpack.tm-saguaro.config.js

@@ -3,8 +3,17 @@ const path = require('path');
 const commonConfig = {
     mode: "production",
     module: {
-      rules: [
-          {
+      rules: [{
+              test: /\.svg$/,
+              issuer: /\.[jt]sx?$/,
+              use: [{
+                  loader:'@svgr/webpack',
+                  options: {
+                      expandProps: "end",
+                      svgoConfig: {}
+                  }
+              }]
+          },{
               test: /\.(html|ico)$/,
               use: [{
                   loader: 'file-loader',