Skip to content
Permalink
Browse files

updated flag to wasteful components, bug re components not logging 0 …

…for no wasted time, and allowed for persistant use through page refresh
  • Loading branch information
johnnycoyle committed Jun 16, 2017
1 parent 1ffa2ac commit ac68a250fa3900c4bd754e307f35cb229217722e
@@ -142,3 +142,15 @@ html, body {
box-shadow: 0px 5px 10px 0px rgba(15,15,15,.76);
animation:slideDown 1s ease-out;
}

#efficientMessage{
position:absolute;
width:100%;
text-align:center;
top:300px;
color:white;
font-family:'karla';
font-weight:thin;
font-size:18px;
letter-spacing:2px;
}
@@ -9,6 +9,6 @@ export const colors = {
}

export const graphColors = [
'#ffdc00','#E8780C', '#FF0000', '#9768d1', '#0D53FF', '#abc8e2','#45bf55', '#fffefc', 'brown'
'#ffdc00','#E8780C', '#FF0000', '#9768d1', '#0D53FF', '#abc8e2','#45bf55', '#45fffd'
];

@@ -1,17 +1,9 @@
/*$slate: #262626;
$grey: #3f3f3f;
$white: #ffffff;
$lightGrey: #f4f4f4;
$reactBlue: #00d8ff;
*/

#plotWrapper{
position:relative;
display:block;
margin-right:auto;
margin-left:auto;
padding-top:20px;
/*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);*/
width:fit-content;
height:320px;
z-index:0;
@@ -30,11 +22,11 @@ $reactBlue: #00d8ff;
#mainContainer.componentOnScreen{
left:0;
opacity:1;
transition: left 500ms, opacity 500ms ease-in;
transition: all 500ms ease-in;
}

#mainContainer.componentOffScreen{
opacity:0;
left:200%;
transition: left 500ms, opacity 500ms ease-in;
transition: all 500ms ease-in;
}
@@ -92,23 +92,16 @@

}

/*#graph_reflection{
position:absolute;
display:block;
margin-right:auto;
margin-left:auto;
height:50px;
width:530px;
margin-top:-20px;
background:linear-gradient(#302a39, transparent);
opacity:.5;
border-radius:5px;
}*/

#comparisonGraphContainer{
width:fit-content;
height:fit-content;
margin-top:20px;
padding-right:40px;
background:transparent;
}

.tooltip{
background:red;
width:1000px;
}
@@ -41,11 +41,11 @@ td {
#mainContainer.profileOnScreen{
opacity: 1;
left:10%;
transition: left 500ms, opacity 500ms ease-in-out;
transition: all 500ms ease-in-out;
}

#mainContainer.profileOffScreen{
opacity:0;
left:200%;
transition: left 500ms, opacity 500ms ease-in-out;
left:-200%;
transition: all 500ms ease-in-out;
}
@@ -12,6 +12,7 @@
}
@keyframes componentEnter {
0% {
transform:translateX(+100%);
}
20%{
transform:translateX(+100%);
@@ -42,7 +43,7 @@
}
.enter.enterActive {
animation-name:componentEnter;
animation-duration:800ms;
animation-duration:1000ms;
animation-timing-function: ease-out;
}
.leave.leaveActive {
@@ -16,19 +16,18 @@
}

.componentOffScreen{
left:-200%;
left:-100%;
background:red;
opacity:0;
/*transition: left 1s, opacity 1s ease-in-out;*/
}

.profileOnScreen{
left:0;
opacity:0;
/*transition: left 1s ease-in-out;*/
opacity:1;
transition: all .5s ease-in-out;
}

.profileOffScreen{
opacity:0;
left:+200%;
/*transition: left 1s ease-in-out;*/
transition: all .5s ease-in-out;
}
@@ -25,7 +25,7 @@ const DisplayedGraphs = (props) => {
tabArray.push(
<div>
<div
key={i}
key={tabArray.length}
className={styles.tab}>
<div className={styles.colorCircle} style={{'background':component.colorTheme}}/>
<span> {'Name: '+component.name}</span>
@@ -21,8 +21,6 @@ class GraphPicker extends Component {
this.displayNameMetrics = {
'timeWasted': 'Time Wasted',
'averageRenderTime': 'Avg. Render Time',
'instanceCount': 'Instance Count',
'renderCount': 'Render Count',
'totalLifeCycleTime': 'Total Lifecycle Time',
'totalRenderTime': 'Total Render Time',
'totalTime': 'Total Time',
@@ -33,17 +31,14 @@ class GraphPicker extends Component {
this.componentOptions = this.loadComponentOptions(this.props.allComponents);
this.metricOptions = this.loadOptions(metrics);
this.renderButtonsActive = false;
// this.graphOptions = this.loadOptions(this.graphsLabels);
// this.colorOptions = this.loadOptions(colors);

this.state = {
selectComponentValue: undefined,
selectMetricValue: undefined,
selectMetricValue: 'timeWasted',
selectGraphValue: undefined,
selectColorValue: undefined,
showColorOptions: true
}
console.log(graphColors);
this.colorButtons = graphColors.map(color =>
<button
className={styles.colorButton}
@@ -58,8 +53,9 @@ class GraphPicker extends Component {
}

componentWillReceiveProps(props) {
if (this.props.allComponents)
if (this.props.allComponents){
this.componentOptions = this.loadComponentOptions(this.props.allComponents)
}
this.forceUpdate();
}

@@ -82,14 +78,12 @@ class GraphPicker extends Component {
}

updateColorValue(newValue) {
console.log('New Color',newValue);
this.setState(
{selectColorValue: newValue}
);
}

toggleColorPanel = () => {
console.log('fired');
this.setState(
{showColorOptions: !this.state.showColorOptions}
)
@@ -105,7 +99,7 @@ class GraphPicker extends Component {

let labelName = options[0] === 'timeWasted' ? this.displayNameMetrics[option] : option
arr.push(
{ value: option, label: labelName }
{ value: option, label: labelName}
)
})
return arr;
@@ -114,24 +108,34 @@ class GraphPicker extends Component {
loadComponentOptions(options) {
const arr = [];
const sorted = options.sort( (a,b) => {
return a.getMetricTotal(this.state.selectMetricValue)< b.getMetricTotal(this.state.selectMetricValue)
return a.getMetricTotal(this.state.selectMetricValue) < b.getMetricTotal(this.state.selectMetricValue)
})

console.log('sorted:',sorted);

sorted.forEach(option =>
arr.push({value: option.name, label: option.name })
sorted.forEach(option => {
let wastedColor = 'grey';
if (this.state.selectMetricValue === 'timeWasted'){
if (option.getMetricTotal('timeWasted') != 0) {
if (option.getLastValue('timeWasted')){
wastedColor = '#ff5757';
}else {
wastedColor = '#57ff9e'
}
}
}
arr.push(
{
value: option.name, label: option.name, style: {background:wastedColor, color:'white'}
})
}
)
return arr;
}

handleClick = (whichGraph) => {
console.log('whichGraph',whichGraph)
this.props.allComponents.forEach(component => {
if (component.name === this.state.selectComponentValue) {
component.toggleActiveMetric('RENDER', this.state.selectMetricValue, whichGraph, this.state.selectGraphValue, this.state.selectColorValue);
if (whichGraph === 1) {
console.log('two graph toggler called...');
this.props.twoGraphToggler(true);
}
this.props.updateGraph();
@@ -150,7 +154,6 @@ canRenderToGraph = () => {
}

render() {
console.log('canRenderToGraph:',this.canRenderToGraph())
return (

<div id={styles.graph_picker}>
@@ -195,8 +198,8 @@ canRenderToGraph = () => {
: `Component`
}
autofocus={false}
simpleValue
options={this.componentOptions}
simpleValue
clearable={true}
name="selected-state"
disabled={false}
@@ -36,7 +36,6 @@ export default class PerfComponent {
toggleActiveMetric(category, metric, graph, graphStyle, color) {
this[category][metric].graphDisplay = graphStyle
this[category][metric].colorTheme = color;
console.log('\n\n\nCreating on graph #',graph,'\n\n\n');
this[category][metric].activeGraphs[graph] = !this[category][metric].activeGraphs[graph];
}

@@ -75,6 +74,17 @@ export default class PerfComponent {
this[category][metric].data.push(value);
}

getLastValue(metric) {
return this.RENDER[metric].data[this.RENDER[metric].data.length-1];
}

replaceLastValue(value, category, metric) {
if(this[category][metric].data.length === 0)
this[category][metric].data[0] = value;
else
this[category][metric].data[this[category][metric].data.length-1] = value;
}

getValue(category, metric) {
return this[category][metric].data;
}
@@ -53,7 +53,7 @@ const Plot = (props) => {

Object.keys(metric.activeGraphs).forEach(graph_code => {
if (metric.activeGraphs[graph_code]) {
currData = data[graph_code];
currData = data[graph_code] || 0;

metric.data.forEach((value, j) => {
if (currData.length - 1 < j || !currData.length) {
@@ -171,7 +171,6 @@ const Plot = (props) => {
<YAxis label={"ms"}/>
<Tooltip
cursor={{fill: 'rgba(255,255,255,.05)'}}
backgroundColor={'rgba(255,255,255.5)'}
/>
{graph.graphRenders}
{graph.brushComponent}
@@ -196,12 +195,11 @@ const Plot = (props) => {
<ReactTransition
transitionName={viewEnterTransitions}
transitionAppear={true}
transitionAppearTimeout={2000} transitionEnterTimeout={800} transitionLeaveTimeout={500}>
transitionAppearTimeout={2000} transitionEnterTimeout={100} transitionLeaveTimeout={500}>
<div id={styles.graphContainer}>
{graphOutput}
{graphPlaceholder}
</div>
<div id={styles.graph_reflection}></div>
</ReactTransition>
</div>
)
@@ -113,14 +113,14 @@ const ProfileChart = (props) => {

return (
<div>
<ReactTransition
{/*<ReactTransition
transitionName={viewEnterTransitions}
transitionAppear={true}
transitionAppearTimeout={1000} transitionEnterTimeout={800} transitionLeaveTimeout={800}>
transitionAppearTimeout={1000} transitionEnterTimeout={800} transitionLeaveTimeout={800}>*/}
<div className={styles.chartContainer}>
{chart}
</div>
</ReactTransition>
{/*</ReactTransition>*/}
</div>
);
};

0 comments on commit ac68a25

Please sign in to comment.
You can’t perform that action at this time.