Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); Issue 710 - Markdown link click by Marc-Andre-Rivet · Pull Request #787 · plotly/dash-table · GitHub
Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 710 - Markdown link click - #787

Merged
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click
Jun 1, 2020
Merged

Issue 710 - Markdown link click#787
Marc-Andre-Rivet merged 12 commits into
devfrom
710-md-click

Conversation

@Marc-Andre-Rivet

@Marc-Andre-RivetMarc-Andre-Rivet commented May 29, 2020

Copy link
Copy Markdown
Contributor

Closes#710

  • Changes the behavior of markdown cells so that clicking on the cell both selects the cell and click through to the underlying element

  • Changes the default markdown link target to target=_blank to open a new tab

  • New cell_selectable prop (default: True) that turns on/off the ability to select and navigate cells in the table (also overrides value of active_cell and selected_cells during the sanitation phase)

  • Single click on markdown link opens it

  • "No selection" table mode


private memoizedCreateEdges = memoizeOne((
active_cell: ICellCoordinates,
active_cell: ICellCoordinates | undefined,

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typing information was inaccurate.

tooltip_conditional: ConditionalTooltip[];

active_cell?: ICellCoordinates;
cell_selectable?: boolean;

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New optional prop. If false, user can't select cells and active_cell and selected_cells will always be treated as null/empty.

Comment threadsrc/dash-table/dash/Sanitizer.ts Outdated

const selected_cells = props.cell_selectable ?
props.selected_cells :
defaultProps.selected_cells

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure active_cell and selected_cells have default values if not selectable.

const column = visibleColumns[col];
if (column.presentation !== Presentation.Markdown) {
e.preventDefault();
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allow click-through to the most nested target element for Markdown cells.


if (!cell_selectable) {
return;
}

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opt out of selection processing if the table doesn't have selectable cells.

import LazyLoader from 'dash-table/LazyLoader';

export default class MarkdownHighlighter {
export default class Markdown {

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed as this helper doesn't only cover highlights now.

@Marc-Andre-RivetMarc-Andre-Rivet changed the title [WIP] Issue 710 - Markdown link clickIssue 710 - Markdown link clickMay 29, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet marked this pull request as ready for review May 29, 2020 23:32

assert len(test.driver.window_handles) == 1
target.cell(0, "a").get().find_element_by_css_selector("a").click()
assert len(test.driver.window_handles) == 2

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only thing I might add here is (1) verify that the new window actually went to google, and (2) switch back to the first window and verify that the cell is selected iff cell_selectable.

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnsonalexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💃 Nice simple API addition and implementation, I like it! Just a small test addition, nonblocking if it turns out to be a pain.

Marc-André Rivet added 3 commits June 1, 2020 15:49
- make sure the cell is selected iif cell_selectable before and after switching tabs
@Marc-Andre-Rivet
Marc-Andre-Rivet merged commit b510ffa into devJun 1, 2020
@Marc-Andre-Rivet
Marc-Andre-Rivet deleted the 710-md-click branch June 1, 2020 20:36
@ghost

ghost commented Jun 3, 2020

Copy link
Copy Markdown

Nice feature, which I was looking for, but it is not working. My app crashes with the following error:
The dash_table.DataTablecomponent (version 4.7.0) with the ID "table" received an unexpected keyword argument:cell_selectableAllowed arguments: active_cell,...

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@FlorianRahe this feature has been merged but not yet released. It will be bundled with the next Dash release in a couple of weeks, or you can follow the steps in CONTRIBUTING.md to install in developer mode if you want to try it today.

@rpkylerpkyle mentioned this pull request Jun 17, 2020
@bcliang

Copy link
Copy Markdown

@Marc-Andre-Rivet How does one override the new default 'linkTarget': '_blank' to go back to the previous behavior ('_self')?

Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clicking on a markdown link should open the link rather than selecting the cell

3 participants

@Marc-Andre-Rivet@alexcjohnson@bcliang