Skip to content

Commit

Permalink
Display tileable properties on web (mars-project#2525)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RandomY-2 @wjsi
RandomY-2 authored and wjsi committed Oct 22, 2021
1 parent 28ba925 commit 051d2fb
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 14 deletions.
8 changes: 5 additions & 3 deletions mars/services/task/supervisor/processor.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,9 +599,11 @@ def get_tileable_details(self):
else:
status = SubtaskStatus.running

props = {slot: getattr(tileable, slot, None) for slot in tileable.__slots__}
props = {k: v for k, v in props.get('_FIELD_VALUES').items()
if k != 'key' and isinstance(v, (int, float, str))}
props = {
k: v
for k, v in getattr(tileable.op, "_FIELD_VALUES").items()
if k != "key" and isinstance(v, (int, float, str))
}

tileable_infos[tileable.key] = {
'progress': progress,
Expand Down
6 changes: 6 additions & 0 deletions mars/services/web/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
<title>Mars UI</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<script type="text/javascript">
if (!window.location.pathname.endsWith("/")) {
window.location.assign(window.location.origin + window.location.pathname
+ "/" + window.location.hash);
}
</script>
</head>
<body>
<script async src="static/bundle.js"></script>
Expand Down
50 changes: 44 additions & 6 deletions mars/services/web/ui/src/task_info/TileableDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,12 @@

import React, { lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import { Tabs, Tab } from '@material-ui/core';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
const SubtaskGraph = lazy(() => {
return import('./SubtaskGraph');
});
Expand Down Expand Up @@ -51,22 +56,52 @@ class TileableDetail extends React.Component {
<Tab label='Tileable Info' />
<Tab label='Subtask Info' />
</Tabs><br />

<div>
{
this.state.displayedTileableDetail === 0
?
<React.Fragment>
<h2>Tileable Graph Info:</h2>
<div>Tileable ID: <br/>{this.props.tileable.id}</div><br/>
<div>Tileable Name: <br/>{this.props.tileable.name}</div><br/><br />
<Table size="small" style={{ height: '100%' }}>
<TableBody>
<TableRow>
<TableCell variant='head'>
<b>Tileable ID</b>
</TableCell>
<TableCell>
{this.props.tileable.id}
</TableCell>
</TableRow>
<TableRow>
<TableCell variant='head'>
<b>Tileable Name</b>
</TableCell>
<TableCell>
{this.props.tileable.name}
</TableCell>
</TableRow>
{
Object.keys(this.props.tileable.properties).map((key) => {
return (
<TableRow key={key}>
<TableCell variant='head'>
<b>{key}</b>
</TableCell>
<TableCell>
{this.props.tileable.properties[key]}
</TableCell>
</TableRow>
);
})
}
</TableBody>
</Table>
</React.Fragment>
:
<Suspense fallback={<div>Loading...</div>}>
<SubtaskGraph
sessionId={this.props.sessionId}
taskId={this.props.taskId}
tileableId={this.props.tileable.id}
id={this.props.tileable.id}
/>
</Suspense>
}
Expand All @@ -84,6 +119,9 @@ TileableDetail.propTypes = {
tileable: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
properties: PropTypes.shape({
id: PropTypes.string,
}),
}),
sessionId: PropTypes.string.isRequired,
taskId: PropTypes.string.isRequired,
Expand Down
36 changes: 31 additions & 5 deletions mars/services/web/ui/src/task_info/charts/DAGChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default class DAGChart extends React.Component {
inputNodeColor: '#3281a8',
outputNodeColor: '#c334eb',
};
this.lastSelectedId = null;
}

componentDidMount() {
Expand All @@ -73,6 +74,14 @@ export default class DAGChart extends React.Component {
clearInterval(this.interval);
}

getNodeStyle(nodeId) {
if (nodeId !== this.lastSelectedId) {
return 'cursor: pointer; stroke: #333; fill: url(#progress-' + nodeId + ')';
} else {
return 'cursor: pointer; stroke: #ff5252; stroke-width: 3; fill: url(#progress-' + nodeId + ')';
}
}

/* eslint no-unused-vars: ["error", { "args": "none" }] */
componentDidUpdate(prevProps, prevStates, snapshot) {
if (this.props === undefined || this.props.nodes === undefined || this.props.nodes.length === 0) {
Expand All @@ -96,8 +105,8 @@ export default class DAGChart extends React.Component {

// Add the nodes to DAG
this.props.nodes.forEach((node) => {
const value = { node };
const nodeDetail = this.props.nodesStatus[node.id];
const value = { node };

if (this.props.graphName === 'tileableGraph') {
const nameEndIndex = node.name.indexOf('key') - 1;
Expand Down Expand Up @@ -156,7 +165,7 @@ export default class DAGChart extends React.Component {
.attr('offset', '0');

dagNode.shape = this.props.nodeShape;
dagNode.style = 'cursor: pointer; stroke: #333; fill: url(#progress-' + node.id + ')';
dagNode.style = this.getNodeStyle(node.id);
dagNode.labelStyle = 'cursor: pointer';
});

Expand Down Expand Up @@ -201,11 +210,25 @@ export default class DAGChart extends React.Component {
}

// onClick function for the tileable
const handleClick = (e, dagNode) => {
const handleClick = (e, dagNodeId) => {
if (this.props.onNodeClick) {
const selectedNode = this.props.nodes.filter(
(node) => node.id === dagNode
(node) => node.id === dagNodeId
)[0];
const nodeDetail = this.props.nodesStatus[selectedNode.id];
selectedNode['properties'] = nodeDetail['properties'];

if (dagNodeId !== this.lastSelectedId) {
const lastSelectedId = this.lastSelectedId;
this.lastSelectedId = dagNodeId;

if (lastSelectedId !== null) {
this.g.node(lastSelectedId).style = this.getNodeStyle(lastSelectedId);
}
this.g.node(dagNodeId).style = this.getNodeStyle(dagNodeId);
render(inner, this.g);
}

this.props.onNodeClick(e, selectedNode);
}
};
Expand All @@ -221,7 +244,10 @@ export default class DAGChart extends React.Component {
fullHeight = parent.clientHeight;
const initialScale = fullHeight >= height ? 1 : fullHeight / height;

d3Select('#' + this.props.graphName).select('.output').attr('transform', 'translate(' + (fullWidth - width * initialScale) / 2 + ', ' + (fullHeight - height * initialScale) / 2 + ')');
d3Select('#' + this.props.graphName).select('.output').attr(
'transform',
'translate(' + (fullWidth - width * initialScale) / 2 + ', ' + (fullHeight - height * initialScale) / 2 + ')'
);

// Set up zoom support
const zoom = d3Zoom().on('zoom', function (e) {
Expand Down
3 changes: 3 additions & 0 deletions mars/services/web/ui/src/task_info/charts/DAGPropTypes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export const nodesStatusType = PropTypes.shape({
status: PropTypes.number.isRequired,
progress: PropTypes.number.isRequired,
subtaskCount: PropTypes.number,
properties: PropTypes.shape({
id: PropTypes.string,
}),
})
});

Expand Down

0 comments on commit 051d2fb

Please sign in to comment.