Skip to content

Commit

Permalink
fix(eda): fixed endless loop and UI issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@eutialia
eutialia committed Apr 23, 2021
1 parent c5706ab commit 69779cd
Show file tree
Hide file tree
Showing 9 changed files with 124 additions and 109 deletions.
5 changes: 4 additions & 1 deletion dataprep/eda/container.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,10 @@ def __init__(self, to_render: Dict[str, Any], visual_type: str, cfg: Config) ->
if visual_type in GRID_VISUAL_TYPES:
self.template_base = ENV_LOADER.get_template("grid_base.html")
elif visual_type in TAB_VISUAL_TYPES:
setattr(self.context, "highlight", cfg.insight.enable)
if visual_type == "missing_impact":
setattr(self.context, "highlight", False)
else:
setattr(self.context, "highlight", cfg.insight.enable)
if to_render.get("tabledata"):
self.context.meta.insert(0, "Stats") # type: ignore
if to_render.get("value_table"):
Expand Down
7 changes: 1 addition & 6 deletions dataprep/eda/create_report/formatter.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,12 +229,7 @@ def format_basic(df: dd.DataFrame, cfg: Config) -> Dict[str, Any]:
rndrd = render_missing(itmdt, cfg)
figs_missing: List[Figure] = []
for fig in rndrd["layout"]:
fig.sizing_mode = "stretch_width"
# fig.title = Title(
# text=rndrd["meta"][rndrd["layout"].index(fig)],
# align="center",
# text_font_size="20px",
# )
fig.sizing_mode = "stretch_both"
figs_missing.append(fig)
res["missing"] = components(figs_missing)
res["missing_tabs"] = ["Bar Chart", "Spectrum", "Heat Map", "Dendogram"]
Expand Down
68 changes: 33 additions & 35 deletions dataprep/eda/create_report/templates/overview.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<div class="ov-container">
<div class="ov-stats-container">
<div class="tb-container">
<h3 class="tb-title">Dataset Statistics</h3>
<div class="tb-container">
<h3 class="tb-title">Dataset Statistics</h3>
<div>
<table class="rp-table">
{% for h, d in context.components.overview[0].items() %}
<tr>
<th>{{ h }}</th>
<td>{{ d }}</td>
</tr>
{% endfor %}
<tr>
<tr style="height: 62px;">
<th style="vertical-align: top;">Variable Types</th>
<td>
<ul style="list-style: none;padding-left: 0;">
<td style="padding: 0 0.5em;">
<ul style="list-style: none;padding-left: 0;margin: 0;">
{% for tp, num in context.components.overview[1].items() %}
<li>{{ tp }}: {{ num }}</li>
{% endfor %}
Expand All @@ -23,35 +23,33 @@ <h3 class="tb-title">Dataset Statistics</h3>
</div>
</div>
{% if context.components.overview_insights %}
<div class="insights">
<h3>Dataset Insights</h3>
{% for page, content in context.components.overview_insights.items() %}
<div class="page-box" id="page-{{ loop.index }}">
<table>
{% for entry in content %}
{% for ins_type, insight in entry.items() %}
<tr>
<th id="des">
{{ insight|escape|replace('/*start*/', '<span class="col-name">')|replace('/*end*/', '</span>') }}
</th>
<td><span class="ins-type">{{ ins_type }}</span></td>
</tr>
{% endfor %}
{% endfor %}
</table>
</div>
{% endfor %}
<div class="page-switch-box">
<ul class="page-switch">
{% for _ in context.components.overview_insights %}
{% if loop.length > 1 %}
<li id="switch-{{ loop.index }}" onclick="switchPage(this)">{{ loop.index }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="tb-container">
<h3 class="tb-title">Dataset Insights</h3>
{% for page, content in context.components.overview_insights.items() %}
<div class="page-box" id="page-{{ loop.index }}">
<table>
{% for entry in content %}
{% for ins_type, insight in entry.items() %}
<tr>
<th id="des">
{{ insight|escape|replace('/*start*/', '<span class="col-name">')|replace('/*end*/', '</span>') }}
</th>
<td><span class="ins-type">{{ ins_type }}</span></td>
</tr>
{% endfor %}
{% endfor %}
</table>
</div>
{% endfor %}
<div class="page-switch-box">
<ul class="page-switch">
{% for _ in context.components.overview_insights %}
{% if loop.length > 1 %}
<li id="switch-{{ loop.index }}" onclick="switchPage(this)">{{ loop.index }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>

{% endif %}
</div>
43 changes: 28 additions & 15 deletions dataprep/eda/create_report/templates/styles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
table-layout: auto;
width: 100%;
color: #212f3c;
font-weight: 600;
}

.rp-table tr {
background: none !important;
height: 31px;
}

.rp-table th {
Expand Down Expand Up @@ -190,11 +192,6 @@
justify-content: space-around;
}

.ov-stats-container{
display: inline;
flex: 1 1 50%;
}

.page-box{
display: none;
}
Expand Down Expand Up @@ -251,6 +248,7 @@

.ov-container .tb-container {
margin: 10px;
flex: 1 1 50%;
}

.var-container {
Expand Down Expand Up @@ -283,10 +281,7 @@
margin-bottom: 10px;
animation: slide-down .3s ease-out;
}
.insights {
flex: 1 1 50%;
text-align: center;
}

.ins-type {
font-weight: 700;
font-size: 85%;
Expand All @@ -297,11 +292,33 @@
padding: 2px 4px;
}

.page-switch-box {
max-width: 13em;
margin-left: auto;
margin-right: auto;
}

.page-switch::-webkit-scrollbar {
width: 5px;
}

.page-switch::-webkit-scrollbar-thumb {
background-color: #5DADE2;
border-radius: 5px;
}

.page-switch::-webkit-scrollbar-track {
background: #b5d6ea;
}

.page-switch {
list-style: none;
display: flex;
justify-content: center;
justify-content: flex-start;
overflow: auto;
padding: 0 !important;
}

.page-switch li {
flex: 0 1 auto;
text-align: center;
Expand Down Expand Up @@ -383,7 +400,7 @@
}

.insight-container-column {
width: 255;
width: 255px;
height: 0;
position: relative;
top: 10px;
Expand Down Expand Up @@ -565,13 +582,9 @@
.corr-tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

.missing-tabcontent {
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
display: none;
}
Expand Down
32 changes: 6 additions & 26 deletions dataprep/eda/missing/render.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
ColumnDataSource,
CustomJSHover,
FactorRange,
FuncTickFormatter,
HoverTool,
LinearColorMapper,
NumeralTickFormatter,
Expand Down Expand Up @@ -60,20 +59,6 @@ def tweak_figure(fig: Figure) -> Figure:
fig.axis.major_label_text_font_size = "9pt"
fig.axis.major_label_standoff = 0
fig.xaxis.major_label_orientation = np.pi / 3
# truncate axis tick values
format_js = """
if (tick.toString().length > 15) {
if (typeof tick === 'string') {
return tick.toString().substring(0, 13) + '...';
} else {
return tick.toPrecision(1);
}
} else {
return tick;
}
"""
fig.xaxis.formatter = FuncTickFormatter(code=format_js)
fig.yaxis.formatter = FuncTickFormatter(code=format_js)

return fig

Expand Down Expand Up @@ -314,8 +299,8 @@ def render_missing_impact(itmdt: Intermediate, cfg: Config) -> Dict[str, Any]:
"""
Render correlation heatmaps in to tabs
"""
plot_width = cfg.plot.width if cfg.plot.width is not None else 400
plot_height = cfg.plot.height if cfg.plot.height is not None else 400
plot_width = cfg.plot.width if cfg.plot.width is not None else 500
plot_height = cfg.plot.height if cfg.plot.height is not None else 500

tabs: List[Panel] = []
htgs: Dict[str, List[Tuple[str, str]]] = {}
Expand Down Expand Up @@ -350,7 +335,7 @@ def render_missing_impact(itmdt: Intermediate, cfg: Config) -> Dict[str, Any]:
"tabledata": {"Missing Statistics": stat_dict} if cfg.stats.enable else {},
"layout": [panel.child.children[0] for panel in tabs],
"meta": [panel.title for panel in tabs],
"container_width": plot_width + 160,
"container_width": max([panel.child.children[0].plot_width for panel in tabs]),
"how_to_guide": htgs,
}

Expand Down Expand Up @@ -430,7 +415,6 @@ def empty_figure() -> Figure:
fig.grid.grid_line_color = None
fig.axis.axis_line_color = None
fig.add_layout(color_bar, "left")
fig.frame_width = plot_width
return fig


Expand All @@ -444,6 +428,7 @@ def render_bar_chart(
Render a bar chart for the missing and present values
"""
pres_cnts, null_cnts, cols = data
cols = [f"{col[:13]}...{col[len(col)-3:]}" if len(col) > 18 else col for col in cols]
df = pd.DataFrame({"Present": pres_cnts, "Missing": null_cnts}, index=cols)

if len(df) > 20:
Expand All @@ -468,7 +453,6 @@ def render_bar_chart(
source=df,
legend_label=list(df.columns),
)

# hover tool with count and percent
formatter = CustomJSHover(
args=dict(source=ColumnDataSource(df)),
Expand Down Expand Up @@ -500,7 +484,6 @@ def render_bar_chart(
fig.yaxis.axis_label = "Row Count"
tweak_figure(fig)
relocate_legend(fig, "left")
fig.frame_width = plot_width

return fig

Expand Down Expand Up @@ -567,7 +550,6 @@ def render_missing_spectrum(
line_color=None,
)
fig.add_layout(color_bar, "left")
fig.frame_width = plot_width
return fig


Expand Down Expand Up @@ -617,7 +599,6 @@ def render_dendrogram(dend: Dict["str", Any], plot_width: int, plot_height: int)
fig.xaxis.major_label_orientation = np.pi / 3
fig.yaxis.axis_label = "Average Distance Between Clusters"
fig.grid.visible = False
fig.frame_width = plot_width
return fig


Expand Down Expand Up @@ -693,12 +674,11 @@ def render_missing_impact_1v1(itmdt: Intermediate, cfg: Config) -> Dict[str, Any
return {
"layout": [panel.child for panel in panels],
"meta": [panel.title for panel in panels],
"container_width": plot_width + 240,
"container_width": max([panel.child.plot_width for panel in panels]),
"how_to_guide": htgs,
}
else:
fig = render_hist(itmdt["hist"], y, meta, plot_width, plot_height, True)
fig.frame_width = plot_width
shown, total = meta["shown"], meta["total"]
if shown != total:
_title = f"Missing impact of {x} by ({shown} out of {total}) {y}"
Expand All @@ -708,6 +688,6 @@ def render_missing_impact_1v1(itmdt: Intermediate, cfg: Config) -> Dict[str, Any
return {
"layout": [fig],
"meta": [_title],
"container_width": plot_width + 240,
"container_width": fig.plot_width,
"how_to_guide": htgs,
}
20 changes: 9 additions & 11 deletions dataprep/eda/templates/grid_base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,20 +93,18 @@
</table>
</div>
{% endfor %}
<div class="page-switch-box-{{ context.rnd }}">
<ul class="page-switch-{{ context.rnd }}">
{% for _ in context.overview_insights %}
{% if loop.length > 1 %}
<li id="switch-{{ context.rnd }}-{{ loop.index }}" onclick="switchPage{{ context.rnd }}(this)">{{ loop.index }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
{% if context.overview_insights %}
<div class="page-switch-box-{{ context.rnd }}">
<ul class="page-switch-{{ context.rnd }}">
{% for _ in context.overview_insights %}
{% if loop.length > 1 %}
<li id="switch-{{ context.rnd }}-{{ loop.index }}" onclick="switchPage{{ context.rnd }}(this)">{{ loop.index }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
{% endif %}
{% if context.legend_labels %}
Expand Down

0 comments on commit 69779cd

Please sign in to comment.