Skip to content

Commit

Permalink
Refactors
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Dec 13, 2023
1 parent 0f5850d commit 8e1da47
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 128 deletions.
6 changes: 6 additions & 0 deletions plugins/spreadsheet-view/src/SpreadsheetView/models/SpreadsheetView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ function stateModelFactory() {
width: 400,
}))
.views(self => ({
/**
* #getter
*/
get assemblyName() {
return self.spreadsheet.assemblyName
},
/**
* #getter
*/
Expand Down
56 changes: 32 additions & 24 deletions plugins/sv-inspector/src/SvInspectorView/components/SvInspectorView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className={classes.container}>
Expand All @@ -59,27 +57,23 @@ const SvInspectorView = observer(function ({
<SpreadsheetViewReactComponent model={spreadsheetView} />
</div>

{showCircularView ? (
<>
<ResizeHandle
onDrag={(_, total) => {
circularView.resizeWidth(initialCircWidth - total)
spreadsheetView.resizeWidth(initialSpreadsheetWidth + total)
}}
onMouseDown={() => {
setInitialSpreadsheetWidth(spreadsheetView.width)
setInitialCircWidth(circularView.width)
}}
vertical
flexbox
className={classes.resizeHandleVert}
/>
<div style={{ width: circularView.width }}>
<CircularViewOptions svInspector={model} />
<CircularViewReactComponent model={circularView} />
</div>
</>
) : null}
<ResizeHandle
onDrag={(_, total) => {
circularView.setWidth(initialCircWidth + total)
spreadsheetView.setWidth(initialSpreadsheetWidth - total)
}}
onMouseDown={() => {
setInitialSpreadsheetWidth(spreadsheetView.width)
setInitialCircWidth(circularView.width)
}}
vertical
flexbox
className={classes.resizeHandleVert}
/>
<div style={{ width: circularView.width }}>
<CircularViewOptions svInspector={model} />
<CircularViewReactComponent model={circularView} />
</div>
</div>
<ResizeHandle
onDrag={model.resizeHeight}
Expand All @@ -89,4 +83,18 @@ const SvInspectorView = observer(function ({
)
})

export default SvInspectorView
const SvInspectorViewContainer = observer(function ({
model,
}: {
model: SvInspectorViewModel
}) {
const { SpreadsheetViewReactComponent, initialized, spreadsheetView } = model

return !initialized ? (
<SpreadsheetViewReactComponent model={spreadsheetView} />
) : (
<SvInspectorView model={model} />
)
})

export default SvInspectorViewContainer
155 changes: 59 additions & 96 deletions plugins/sv-inspector/src/SvInspectorView/models/SvInspectorView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ function SvInspectorViewF(pluginManager: PluginManager) {

const minHeight = 400
const defaultHeight = 550
const headerHeight = 52
const circularViewOptionsBarHeight = 52
return types
.compose(
Expand All @@ -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
*/
Expand All @@ -96,6 +87,12 @@ function SvInspectorViewF(pluginManager: PluginManager) {
width: 800,
}))
.views(self => ({
/**
* #getter
*/
get initialized() {
return self.spreadsheetView.initialized
},
/**
* #getter
*/
Expand All @@ -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
Expand Down Expand Up @@ -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
*/
Expand All @@ -210,7 +194,7 @@ function SvInspectorViewF(pluginManager: PluginManager) {
* #action
*/
setOnlyDisplayRelevantRegionsInCircularView(val: boolean) {
self.onlyDisplayRelevantRegionsInCircularView = Boolean(val)
self.onlyDisplayRelevantRegionsInCircularView = val
},
}))
.views(self => ({
Expand All @@ -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,
},
]
Expand All @@ -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(() => {
Expand Down
Loading

0 comments on commit 8e1da47

Please sign in to comment.