Skip to content

Commit

Permalink
fix: add hint for no cooked data cases.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ObservedObserver
ObservedObserver committed Mar 9, 2020
1 parent 1f76270 commit 51809e9
Showing 1 changed file with 122 additions and 115 deletions.
237 changes: 122 additions & 115 deletions packages/frontend/src/pages/dev/index.tsx
View file
Expand Up @@ -82,11 +82,6 @@ const DevPage: React.FC = props => {
cookedMeasures
} = state;
const { dimScores } = getters;
console.log({
cookedDataSource,
cookedDimensions,
cookedMeasures
}, getters)
const viewSpaceList = useMemo(() => {
return insightViewSpace.filter(s => s.significance >= sigThreshold);
}, [insightViewSpace, sigThreshold])
Expand Down Expand Up @@ -122,7 +117,7 @@ const DevPage: React.FC = props => {
}
return []
}, [insightViewSpace, dataView])
console.log(relatedViews)

useEffect(() => {
if (dataView === null) return;
const { schema } = dataView;
Expand Down Expand Up @@ -163,121 +158,133 @@ const DevPage: React.FC = props => {
});
}}
/>
<div className="card">
<PrimaryButton
text="Get Insights"
onClick={() => {
setLoading(true);
getInsightViewSpace(
cookedDataSource,
cookedDimensions,
cookedMeasures
).then(res => {
setInsightViewSpace(res);
setLoading(false);
});
}}
/>
{loading && <ProgressIndicator description="generating dashboard" />}
{
cookedDataSource.length > 0 && <div className="card">
<PrimaryButton
text="Get Insights"
onClick={() => {
setLoading(true);
getInsightViewSpace(
cookedDataSource,
cookedDimensions,
cookedMeasures
).then(res => {
setInsightViewSpace(res);
setLoading(false);
});
}}
/>
{loading && <ProgressIndicator description="generating dashboard" />}

<DashBoard>
<div className="left">
<SimpleTick
x="type"
y="significance"
dataSource={insightViewSpace}
threshold={sigThreshold}
/>
<Slider
label="significance threshold"
max={100}
value={sigThreshold * 100}
valueFormat={(value: number) => `${value}%`}
showValue={true}
onChange={(value: number) => {
setSigThreshold(value / 100);
setChartIndex(0);
}}
/>
<p className="state-description">
There are {viewSpaceList.length} of views of which insight
significance is no less than {(sigThreshold * 100).toFixed(2)} %
</p>
</div>
<div className="right">
<div style={{ width: "280px" }}>
<SpinButton
label={"Current Index"}
value={(chartIndex + 1).toString()}
min={0}
max={viewSpaceList.length}
step={1}
iconProps={{ iconName: "Search" }}
labelPosition={Position.start}
// tslint:disable:jsx-no-lambda
onValidate={(value: string) => {
setChartIndex((Number(value) - 1) % viewSpaceList.length);
}}
onIncrement={() => {
setChartIndex((chartIndex + 1) % viewSpaceList.length);
}}
onDecrement={() => {
setChartIndex(
(chartIndex - 1 + viewSpaceList.length) %
viewSpaceList.length
);
<DashBoard>
<div className="left">
<SimpleTick
x="type"
y="significance"
dataSource={insightViewSpace}
threshold={sigThreshold}
/>
<Slider
label="significance threshold"
max={100}
value={sigThreshold * 100}
valueFormat={(value: number) => `${value}%`}
showValue={true}
onChange={(value: number) => {
setSigThreshold(value / 100);
setChartIndex(0);
}}
incrementButtonAriaLabel={"Increase value by 1"}
decrementButtonAriaLabel={"Decrease value by 1"}
/>
<p className="state-description">
There are {viewSpaceList.length} of views of which insight
significance is no less than {(sigThreshold * 100).toFixed(2)} %
</p>
</div>
<div style={{ display: "flex", padding: "1em" }}>
<RadarChart
dataSource={relatedViews}
threshold={sigThreshold}
keyField="type"
valueField="significance"
/>
<div>
{
relatedViews.length > 0 && relatedViews.filter(view => view.significance >= sigThreshold).map(view => (
<Tag color={ColorMap[view.type]}>
{view.type}
</Tag>
))
}
{
viewSpaceList[chartIndex] && <p className="state-description">
Dimensions are {viewSpaceList[chartIndex].dimensions}, and
measures are {viewSpaceList[chartIndex].measures}. <br />
There is a significance of
{(viewSpaceList[chartIndex].significance * 100).toFixed(2)}%
that there exits a {viewSpaceList[chartIndex].type} in the
graph. <br />
{JSON.stringify(viewSpaceList[chartIndex].description)}
</p>
}
<div className="right">
<div style={{ width: "280px" }}>
<SpinButton
label={"Current Index"}
value={(chartIndex + 1).toString()}
min={0}
max={viewSpaceList.length}
step={1}
iconProps={{ iconName: "Search" }}
labelPosition={Position.start}
// tslint:disable:jsx-no-lambda
onValidate={(value: string) => {
setChartIndex((Number(value) - 1) % viewSpaceList.length);
}}
onIncrement={() => {
setChartIndex((chartIndex + 1) % viewSpaceList.length);
}}
onDecrement={() => {
setChartIndex(
(chartIndex - 1 + viewSpaceList.length) %
viewSpaceList.length
);
}}
incrementButtonAriaLabel={"Increase value by 1"}
decrementButtonAriaLabel={"Decrease value by 1"}
/>
</div>
<div style={{ display: "flex", padding: "1em" }}>
<RadarChart
dataSource={relatedViews}
threshold={sigThreshold}
keyField="type"
valueField="significance"
/>
<div>
{
relatedViews.length > 0 && relatedViews.filter(view => view.significance >= sigThreshold).map(view => (
<Tag color={ColorMap[view.type]}>
{view.type}
</Tag>
))
}
{
viewSpaceList[chartIndex] && <p className="state-description">
Dimensions are {viewSpaceList[chartIndex].dimensions}, and
measures are {viewSpaceList[chartIndex].measures}. <br />
There is a significance of
{(viewSpaceList[chartIndex].significance * 100).toFixed(2)}%
that there exits a {viewSpaceList[chartIndex].type} in the
graph. <br />
{JSON.stringify(viewSpaceList[chartIndex].description)}
</p>
}
</div>
</div>
</div>

<div></div>
</div>
</DashBoard>
{viewSpaceList.length > 0 && dataView !== null && (
<div>
<BaseChart
aggregator={visualConfig.aggregator}
defaultAggregated={visualConfig.defaultAggregated}
defaultStack={visualConfig.defaultStack}
dimensions={dataView.dimensions}
measures={dataView.measures}
dataSource={cookedDataSource}
schema={dataView.schema}
fieldFeatures={dataView.fieldFeatures}
/>
</div>
)}
</div>
<div></div>
</div>
</DashBoard>
{viewSpaceList.length > 0 && dataView !== null && (
<div>
<BaseChart
aggregator={visualConfig.aggregator}
defaultAggregated={visualConfig.defaultAggregated}
defaultStack={visualConfig.defaultStack}
dimensions={dataView.dimensions}
measures={dataView.measures}
dataSource={cookedDataSource}
schema={dataView.schema}
fieldFeatures={dataView.fieldFeatures}
/>
</div>
)}
</div>
}
{
cookedDataSource.length === 0 && <div className="card">
<p>
Dev Page now is testing for different types of insight worker.
<br />
If you see this hint, it means you have not upload dataSource or not click the 'extract insights' button
in dataSource page which will produce a cooked dataSource for dev page.
</p>
</div>
}
</div>
);
}
Expand Down

0 comments on commit 51809e9

Please sign in to comment.