diff --git a/plugins/spreadsheet-view/src/SpreadsheetView/models/SpreadsheetView.ts b/plugins/spreadsheet-view/src/SpreadsheetView/models/SpreadsheetView.ts index 6e3faa0efe..14f85a5746 100644 --- a/plugins/spreadsheet-view/src/SpreadsheetView/models/SpreadsheetView.ts +++ b/plugins/spreadsheet-view/src/SpreadsheetView/models/SpreadsheetView.ts @@ -53,6 +53,12 @@ function stateModelFactory() { width: 400, })) .views(self => ({ + /** + * #getter + */ + get assemblyName() { + return self.spreadsheet.assemblyName + }, /** * #getter */ diff --git a/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx b/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx index 34f0423fa3..f31e0339dd 100644 --- a/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx +++ b/plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx @@ -43,11 +43,9 @@ const SvInspectorView = observer(function ({ CircularViewReactComponent, spreadsheetView, circularView, - showCircularView, } = model const [initialCircWidth, setInitialCircWidth] = useState(0) const [initialSpreadsheetWidth, setInitialSpreadsheetWidth] = useState(0) - console.log({ showCircularView }) return (
@@ -59,27 +57,23 @@ const SvInspectorView = observer(function ({
- {showCircularView ? ( - <> - { - circularView.resizeWidth(initialCircWidth - total) - spreadsheetView.resizeWidth(initialSpreadsheetWidth + total) - }} - onMouseDown={() => { - setInitialSpreadsheetWidth(spreadsheetView.width) - setInitialCircWidth(circularView.width) - }} - vertical - flexbox - className={classes.resizeHandleVert} - /> -
- - -
- - ) : null} + { + circularView.setWidth(initialCircWidth + total) + spreadsheetView.setWidth(initialSpreadsheetWidth - total) + }} + onMouseDown={() => { + setInitialSpreadsheetWidth(spreadsheetView.width) + setInitialCircWidth(circularView.width) + }} + vertical + flexbox + className={classes.resizeHandleVert} + /> +
+ + +
+ ) : ( + + ) +}) + +export default SvInspectorViewContainer diff --git a/plugins/sv-inspector/src/SvInspectorView/models/SvInspectorView.ts b/plugins/sv-inspector/src/SvInspectorView/models/SvInspectorView.ts index 4b85249685..3ca18e1473 100644 --- a/plugins/sv-inspector/src/SvInspectorView/models/SvInspectorView.ts +++ b/plugins/sv-inspector/src/SvInspectorView/models/SvInspectorView.ts @@ -41,7 +41,6 @@ function SvInspectorViewF(pluginManager: PluginManager) { const minHeight = 400 const defaultHeight = 550 - const headerHeight = 52 const circularViewOptionsBarHeight = 52 return types .compose( @@ -65,15 +64,7 @@ function SvInspectorViewF(pluginManager: PluginManager) { * #property */ onlyDisplayRelevantRegionsInCircularView: false, - /** - * #property - * switch specifying whether we are showing the import wizard or the - * spreadsheet in our viewing area - */ - mode: types.optional( - types.enumeration('SvInspectorViewMode', ['import', 'display']), - 'import', - ), + /** * #property */ @@ -96,6 +87,12 @@ function SvInspectorViewF(pluginManager: PluginManager) { width: 800, })) .views(self => ({ + /** + * #getter + */ + get initialized() { + return self.spreadsheetView.initialized + }, /** * #getter */ @@ -107,8 +104,7 @@ function SvInspectorViewF(pluginManager: PluginManager) { * #getter */ get assemblyName() { - const { assembly } = self.spreadsheetView - return assembly ? getConf(assembly, 'name') : undefined + return self.spreadsheetView.assemblyName }, /** * #getter @@ -181,18 +177,6 @@ function SvInspectorViewF(pluginManager: PluginManager) { self.height = newHeight > minHeight ? newHeight : minHeight return self.height }, - /** - * #action - */ - setImportMode() { - // self.spreadsheetView.setImportMode() - }, - /** - * #action - */ - setDisplayMode() { - // self.spreadsheetView.setDisplayMode() - }, /** * #action */ @@ -210,7 +194,7 @@ function SvInspectorViewF(pluginManager: PluginManager) { * #action */ setOnlyDisplayRelevantRegionsInCircularView(val: boolean) { - self.onlyDisplayRelevantRegionsInCircularView = Boolean(val) + self.onlyDisplayRelevantRegionsInCircularView = val }, })) .views(self => ({ @@ -221,7 +205,9 @@ function SvInspectorViewF(pluginManager: PluginManager) { return [ { label: 'Return to import form', - onClick: () => self.setImportMode(), + onClick: () => { + self.spreadsheetView.speadsheet.setData(undefined) + }, icon: FolderOpenIcon, }, ] @@ -240,116 +226,93 @@ function SvInspectorViewF(pluginManager: PluginManager) { // synchronize subview widths addDisposer( self, - autorun( - () => { - const borderWidth = 1 - if (self.showCircularView) { - const spreadsheetWidth = Math.round(self.width * 0.66) - const circularViewWidth = self.width - spreadsheetWidth - self.spreadsheetView.setWidth(spreadsheetWidth - borderWidth) - self.circularView.setWidth(circularViewWidth) - } else { - self.spreadsheetView.setWidth(self.width) - } - }, - { name: 'SvInspectorView width binding' }, - ), + autorun(() => { + const borderWidth = 1 + if (self.showCircularView) { + const spreadsheetWidth = Math.round(self.width * 0.66) + const circularViewWidth = self.width - spreadsheetWidth + self.spreadsheetView.setWidth(spreadsheetWidth - borderWidth) + self.circularView.setWidth(circularViewWidth) + } else { + self.spreadsheetView.setWidth(self.width) + } + }), ) // synchronize subview heights addDisposer( self, - autorun( - () => { - self.spreadsheetView.setHeight(self.height - headerHeight) - self.circularView.setHeight( - self.height - headerHeight - circularViewOptionsBarHeight, - ) - }, - { name: 'SvInspectorView height binding' }, - ), + autorun(() => { + const { height } = self + self.spreadsheetView.setHeight(height) + self.circularView.setHeight(height - circularViewOptionsBarHeight) + }), ) - // bind circularview displayedRegions to spreadsheet assembly, mediated // by the onlyRelevantRegions toggle addDisposer( self, - autorun( - async () => { - const { - assemblyName, - onlyDisplayRelevantRegionsInCircularView, - circularView, - featureRefNames, - } = self + autorun(async () => { + const { + assemblyName, + onlyDisplayRelevantRegionsInCircularView, + circularView, + featureRefNames, + } = self + try { + if (!circularView.initialized) { + return + } const { tracks } = circularView const { assemblyManager } = getSession(self) if (!assemblyName) { return } - const asm = await assemblyManager.waitForAssembly(assemblyName) + const asm = assemblyManager.get(assemblyName) if (!asm) { return } - - const { getCanonicalRefName, regions = [] } = asm + const { regions = [] } = asm if (onlyDisplayRelevantRegionsInCircularView) { if (tracks.length === 1) { - try { - // canonicalize the store's ref names if necessary - const refSet = new Set( - featureRefNames.map(r => getCanonicalRefName(r) || r), - ) - - circularView.setDisplayedRegions( - clone(regions.filter(r => refSet.has(r.refName))), - ) - } catch (e) { - circularView.setError(e) - } + // canonicalize the store's ref names if necessary + const refSet = new Set( + featureRefNames.map(r => asm.getCanonicalRefName(r) || r), + ) + circularView.setDisplayedRegions( + clone(regions.filter(r => refSet.has(r.refName))), + ) } } else { circularView.setDisplayedRegions(regions) } - }, - { name: 'SvInspectorView displayed regions bind' }, - ), + } catch (e) { + console.error(e) + circularView.setError(e) + } + }), ) - // bind circularview tracks to our track snapshot view addDisposer( self, - reaction( - () => ({ - generatedTrackConf: self?.featuresCircularTrackConfiguration, - assemblyName: self?.assemblyName, - }), - data => { - if (!data) { - return - } - const { assemblyName, generatedTrackConf } = data + autorun( + () => { + const { assemblyName, featuresCircularTrackConfiguration } = self const { circularView } = self // hide any visible tracks circularView.tracks.forEach(t => circularView.hideTrack(t.configuration.trackId), ) - // put our track in as the only track - if (assemblyName && generatedTrackConf) { - // @ts-expect-error - circularView.addTrackConf(generatedTrackConf, { - assemblyName, - }) + if (assemblyName && featuresCircularTrackConfiguration) { + circularView.addTrackConf(featuresCircularTrackConfiguration) } }, { - name: 'SvInspectorView track configuration binding', fireImmediately: true, }, ), ) - - // bind spreadsheetView row menu actions to us + // // bind spreadsheetView row menu actions to us addDisposer( self, autorun(() => { diff --git a/yarn.lock b/yarn.lock index cd55173979..b0ccf81a24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1045,13 +1045,20 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.6", "@babel/runtime@^7.23.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db" integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w== dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.23.5": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d" + integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.22.15", "@babel/template@^7.3.3": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" @@ -2122,6 +2129,15 @@ "@mui/utils" "^5.14.19" prop-types "^15.8.1" +"@mui/private-theming@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.0.tgz#96de66ce097ba417e1b6b769cd67cbf516bd8876" + integrity sha512-7WxtIhXxNek0JjtsYy+ut2LtFSLpsUW5JSDehQO+jF7itJ8ehy7Bd9bSt2yIllbwGjCFowLfYpPk2Ykgvqm1tA== + dependencies: + "@babel/runtime" "^7.23.5" + "@mui/utils" "^5.15.0" + prop-types "^15.8.1" + "@mui/styled-engine@^5.14.19": version "5.14.19" resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.14.19.tgz#dee1d16044a5ef3a783b742381ea4348c159b013" @@ -2132,6 +2148,16 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/styled-engine@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.0.tgz#44e068dbb855699053b9e6e4e6d3ed5efe98b7d9" + integrity sha512-6NysIsHkuUS2lF+Lzv1jiK3UjBJk854/vKVcJQVGKlPiqNEVZJNlwaSpsaU5xYXxWEZYfbVFSAomLOS/LV/ovQ== + dependencies: + "@babel/runtime" "^7.23.5" + "@emotion/cache" "^11.11.0" + csstype "^3.1.2" + prop-types "^15.8.1" + "@mui/system@^5.14.19", "@mui/system@^5.14.4": version "5.14.19" resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.14.19.tgz#f13387c60af129e4d61dfbf168fcee348ebe952a" @@ -2146,12 +2172,31 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/system@^5.14.20": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.0.tgz#d4f6fd65ad8e404d4d7c7b56d755d2a63b0edddb" + integrity sha512-8TPjfTlYBNB7/zBJRL4QOD9kImwdZObbiYNh0+hxvhXr2koezGx8USwPXj8y/JynbzGCkIybkUztCdWlMZe6OQ== + dependencies: + "@babel/runtime" "^7.23.5" + "@mui/private-theming" "^5.15.0" + "@mui/styled-engine" "^5.15.0" + "@mui/types" "^7.2.11" + "@mui/utils" "^5.15.0" + clsx "^2.0.0" + csstype "^3.1.2" + prop-types "^15.8.1" + "@mui/types@^7.2.10": version "7.2.10" resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.10.tgz#13e3e9aa07ee6d593cfacd538e02e8e896d7a12f" integrity sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ== -"@mui/utils@^5.14.16", "@mui/utils@^5.14.19": +"@mui/types@^7.2.11": + version "7.2.11" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.11.tgz#36b99a88f8010dc716128e568dc05681a69dc7ae" + integrity sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w== + +"@mui/utils@^5.14.19": version "5.14.19" resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.14.19.tgz#39a5846a74ba199f1a2b067ea197dc6b9c8f442f" integrity sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ== @@ -2161,13 +2206,24 @@ prop-types "^15.8.1" react-is "^18.2.0" -"@mui/x-data-grid@^6.0.1": - version "6.18.2" - resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-6.18.2.tgz#7bfa0ee48adee39f4ad4af96f8bc187152a064ef" - integrity sha512-XsVX8OCcYRbSoDVfjoX6gi+KfBitTkUvlMZnI/YkWOyms+pEValJQousvwjhGN1coWp15Yoz9YTGmSGCBxo2HA== +"@mui/utils@^5.14.20", "@mui/utils@^5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.0.tgz#87b4db92dd2ddf3e2676377427f50662124013b4" + integrity sha512-XSmTKStpKYamewxyJ256+srwEnsT3/6eNo6G7+WC1tj2Iq9GfUJ/6yUoB7YXjOD2jTZ3XobToZm4pVz1LBt6GA== + dependencies: + "@babel/runtime" "^7.23.5" + "@types/prop-types" "^15.7.11" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/x-data-grid@next": + version "7.0.0-alpha.4" + resolved "https://registry.yarnpkg.com/@mui/x-data-grid/-/x-data-grid-7.0.0-alpha.4.tgz#544c4121944acd7b51b321107a143e25cd81bc66" + integrity sha512-XjAWX7maT9tgNLR+bT55NULCfYDnsNuk8kb15eMuGUzd2mRmZorKGrHvZgtgyOjeklS8tJ80IaIRW325qhQ+jQ== dependencies: - "@babel/runtime" "^7.23.2" - "@mui/utils" "^5.14.16" + "@babel/runtime" "^7.23.5" + "@mui/system" "^5.14.20" + "@mui/utils" "^5.14.20" clsx "^2.0.0" prop-types "^15.8.1" reselect "^4.1.8"