Skip to content

Commit

Permalink
Reattaching click listeners after zoom
Browse files Browse the repository at this point in the history
  • Loading branch information
@alopezo
alopezo committed Jan 22, 2025
1 parent 94c3e19 commit 682162f
Show file tree
Hide file tree
Showing 7 changed files with 276 additions and 253 deletions.
3 changes: 2 additions & 1 deletion angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"allowedCommonJsDependencies": [
"file-saver",
"bad-words",
"phaser"
"phaser",
"lodash/cloneDeep"
]
},
"configurations": {
Expand Down
93 changes: 48 additions & 45 deletions docs/assets/reports/detect_inactivations_by_reason.html
View file

Large diffs are not rendered by default.

89 changes: 46 additions & 43 deletions docs/assets/reports/fsn_changes_with_details.html
View file

Large diffs are not rendered by default.

81 changes: 43 additions & 38 deletions docs/assets/reports/new_concepts_by_semantic_tag.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,50 +96,52 @@ <h3 id="details-title">Details</h3>
"xaxis.type": "category",
"xaxis.range": [rangeMin, rangeMax], // 🔥 Wider range for full columns
"yaxis.range": [0, maxY * 1.1] // Add 10% padding for readability
});
}).then(() => attachPlotlyClickHandler());
}

var chart = document.getElementById('chart');
chart.on('plotly_click', function(evt) {
var detailsDiv = document.getElementById('details-content');
var titleDiv = document.getElementById('details-title');
var point = evt.points[0];
function attachPlotlyClickHandler() {
var chart = document.getElementById('chart');
chart.on('plotly_click', function(evt) {
var detailsDiv = document.getElementById('details-content');
var titleDiv = document.getElementById('details-title');
var point = evt.points[0];

var examples = point.customdata.Examples;
var examples = point.customdata.Examples;

if (point.y > point.customdata.heads_size) {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (first ${point.customdata.heads_size} rows of ${point.y})`;
} else {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (all ${point.y} rows)`;
}
if (point.y > point.customdata.heads_size) {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (first ${point.customdata.heads_size} rows of ${point.y})`;
} else {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (all ${point.y} rows)`;
}

if (examples && examples.length > 0) {
var detailsHtml = `
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="border: 1px solid #000; padding: 8px;">ConceptId</th>
<th style="border: 1px solid #000; padding: 8px;">FSN</th>
</tr>
</thead>
<tbody>
`;

examples.forEach(function(example) {
detailsHtml += `
<tr class="hover-row">
<td style="border: 1px solid #000; padding: 8px;">${example.conceptId}</td>
<td style="border: 1px solid #000; padding: 8px;">${example.FSN}</td>
</tr>
if (examples && examples.length > 0) {
var detailsHtml = `
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="border: 1px solid #000; padding: 8px;">ConceptId</th>
<th style="border: 1px solid #000; padding: 8px;">FSN</th>
</tr>
</thead>
<tbody>
`;
});

detailsHtml += `</tbody></table>`;
detailsDiv.innerHTML = detailsHtml;
} else {
detailsDiv.innerHTML = 'No examples available.';
}
});
examples.forEach(function(example) {
detailsHtml += `
<tr class="hover-row">
<td style="border: 1px solid #000; padding: 8px;">${example.conceptId}</td>
<td style="border: 1px solid #000; padding: 8px;">${example.FSN}</td>
</tr>
`;
});

detailsHtml += `</tbody></table>`;
detailsDiv.innerHTML = detailsHtml;
} else {
detailsDiv.innerHTML = 'No examples available.';
}
});
}

function generateYearButtons() {
if (!data || !data.data || !data.data[0] || !data.data[0].x) {
Expand Down Expand Up @@ -192,10 +194,13 @@ <h3 id="details-title">Details</h3>
"xaxis.autorange": true, // Reset x-axis zoom
"yaxis.autorange": true // Reset y-axis zoom
});
setTimeout(attachPlotlyClickHandler, 100);

}

// Run when the page loads
setTimeout(generateYearButtons, 1000); // Delay to ensure Plotly is loaded
setTimeout(generateYearButtons, 100); // Delay to ensure Plotly is loaded
setTimeout(attachPlotlyClickHandler, 100);

</script>
</body>
Expand Down
93 changes: 48 additions & 45 deletions src/assets/reports/detect_inactivations_by_reason.html
View file

Large diffs are not rendered by default.

89 changes: 46 additions & 43 deletions src/assets/reports/fsn_changes_with_details.html
View file

Large diffs are not rendered by default.

81 changes: 43 additions & 38 deletions src/assets/reports/new_concepts_by_semantic_tag.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,50 +96,52 @@ <h3 id="details-title">Details</h3>
"xaxis.type": "category",
"xaxis.range": [rangeMin, rangeMax], // 🔥 Wider range for full columns
"yaxis.range": [0, maxY * 1.1] // Add 10% padding for readability
});
}).then(() => attachPlotlyClickHandler());
}

var chart = document.getElementById('chart');
chart.on('plotly_click', function(evt) {
var detailsDiv = document.getElementById('details-content');
var titleDiv = document.getElementById('details-title');
var point = evt.points[0];
function attachPlotlyClickHandler() {
var chart = document.getElementById('chart');
chart.on('plotly_click', function(evt) {
var detailsDiv = document.getElementById('details-content');
var titleDiv = document.getElementById('details-title');
var point = evt.points[0];

var examples = point.customdata.Examples;
var examples = point.customdata.Examples;

if (point.y > point.customdata.heads_size) {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (first ${point.customdata.heads_size} rows of ${point.y})`;
} else {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (all ${point.y} rows)`;
}
if (point.y > point.customdata.heads_size) {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (first ${point.customdata.heads_size} rows of ${point.y})`;
} else {
titleDiv.textContent = `Details for ${point.customdata.SemanticTag} - ${point.x} (all ${point.y} rows)`;
}

if (examples && examples.length > 0) {
var detailsHtml = `
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="border: 1px solid #000; padding: 8px;">ConceptId</th>
<th style="border: 1px solid #000; padding: 8px;">FSN</th>
</tr>
</thead>
<tbody>
`;

examples.forEach(function(example) {
detailsHtml += `
<tr class="hover-row">
<td style="border: 1px solid #000; padding: 8px;">${example.conceptId}</td>
<td style="border: 1px solid #000; padding: 8px;">${example.FSN}</td>
</tr>
if (examples && examples.length > 0) {
var detailsHtml = `
<table style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="border: 1px solid #000; padding: 8px;">ConceptId</th>
<th style="border: 1px solid #000; padding: 8px;">FSN</th>
</tr>
</thead>
<tbody>
`;
});

detailsHtml += `</tbody></table>`;
detailsDiv.innerHTML = detailsHtml;
} else {
detailsDiv.innerHTML = 'No examples available.';
}
});
examples.forEach(function(example) {
detailsHtml += `
<tr class="hover-row">
<td style="border: 1px solid #000; padding: 8px;">${example.conceptId}</td>
<td style="border: 1px solid #000; padding: 8px;">${example.FSN}</td>
</tr>
`;
});

detailsHtml += `</tbody></table>`;
detailsDiv.innerHTML = detailsHtml;
} else {
detailsDiv.innerHTML = 'No examples available.';
}
});
}

function generateYearButtons() {
if (!data || !data.data || !data.data[0] || !data.data[0].x) {
Expand Down Expand Up @@ -192,10 +194,13 @@ <h3 id="details-title">Details</h3>
"xaxis.autorange": true, // Reset x-axis zoom
"yaxis.autorange": true // Reset y-axis zoom
});
setTimeout(attachPlotlyClickHandler, 100);

}

// Run when the page loads
setTimeout(generateYearButtons, 1000); // Delay to ensure Plotly is loaded
setTimeout(generateYearButtons, 100); // Delay to ensure Plotly is loaded
setTimeout(attachPlotlyClickHandler, 100);

</script>
</body>
Expand Down

0 comments on commit 682162f

Please sign in to comment.