{"html_url": "https://github.com/simonw/datasette/issues/1540#issuecomment-984801331", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1540", "id": 984801331, "node_id": "IC_kwDOBm6k_c46suAz", "user": {"value": 9599, "label": "simonw"}, "created_at": "2021-12-02T16:42:02Z", "updated_at": "2021-12-09T23:38:39Z", "author_association": "OWNER", "body": "I'm going to wrap this up in a plugin for the moment - I want it in Datasette core but I'd like to improve the implementation first with things like support for `base_url` which will likely depend on #1533 or similar.\r\n\r\nHere's the plugin: https://github.com/simonw/datasette-hovercards", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1068791148, "label": "Idea: hover to reveal details of linked row"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1540#issuecomment-984053760", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1540", "id": 984053760, "node_id": "IC_kwDOBm6k_c46p3gA", "user": {"value": 9599, "label": "simonw"}, "created_at": "2021-12-01T21:05:20Z", "updated_at": "2021-12-01T21:05:20Z", "author_association": "OWNER", "body": "I realized you couldn't click the links any more because the hovercard overlapped them, so I changed it to this instead. Need to reconsider the when-to-hide logic though.\r\n\r\n```javascript\r\nhovercard.style.top = (ev.pageY + 15) + 'px';\r\n```", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1068791148, "label": "Idea: hover to reveal details of linked row"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1540#issuecomment-984051925", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1540", "id": 984051925, "node_id": "IC_kwDOBm6k_c46p3DV", "user": {"value": 9599, "label": "simonw"}, "created_at": "2021-12-01T21:03:16Z", "updated_at": "2021-12-01T21:03:16Z", "author_association": "OWNER", "body": "Needs `pageX` not `clientX` because otherwise it doesn't work when you scroll down the page.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1068791148, "label": "Idea: hover to reveal details of linked row"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1540#issuecomment-984048965", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1540", "id": 984048965, "node_id": "IC_kwDOBm6k_c46p2VF", "user": {"value": 9599, "label": "simonw"}, "created_at": "2021-12-01T20:59:26Z", "updated_at": "2021-12-01T21:02:58Z", "author_association": "OWNER", "body": "This is a bit of a mess but it does keep the hovercard around for a moment and then fade it away when you mouse out of it:\r\n\r\n```html+jinja\r\n{% extends \"base.html\" %}\r\n\r\n{% block content %}\r\n\r\n<h1>Hovercards demo</h1>\r\n\r\nHere is a <a href=\"/fixtures/facetable/1\">link to a row</a>\r\n\r\n<script>\r\nlet hovercardOuterAnimation = null;\r\nlet hovercardInnerAnimation = null;\r\nlet hovercard = document.createElement(\"div\");\r\nhovercard.setAttribute(\"id\", \"datasette-hovercard\")\r\nhovercard.style.width = '300px';\r\nhovercard.style.height = '200px';\r\nhovercard.style.overflow = 'auto';\r\nhovercard.style.backgroundColor = 'white';\r\nhovercard.style.border = '1px solid #ccc';\r\nhovercard.style.padding = '10px';\r\nhovercard.style.position = 'absolute';\r\nhovercard.style.whiteSpace = 'pre';\r\nhovercard.style.display = 'none';\r\nhovercard.style.boxShadow = '1px 2px 8px 2px rgba(0,0,0,0.08)';\r\ndocument.body.appendChild(hovercard);\r\n\r\ndocument.addEventListener(\"mouseover\", async (ev) => {\r\n  const a = ev.target;\r\n  if (a.nodeName != 'A') {\r\n    return;\r\n  }\r\n  // TODO: Respect base_url and suchlike\r\n  if (a.pathname.split(\"/\").length != 4) {\r\n    return; // Definitely not a row\r\n  }\r\n  // OK, it might be a row! Try a fetch\r\n  let row;\r\n  if (a.hovercardRowData) {\r\n    row = a.hovercardRowData;\r\n  } else {\r\n    const response = await fetch(a.pathname + \".json?_shape=array\");\r\n    if (response.status == 200) {\r\n      const data = await response.json();\r\n      row = data[0];\r\n      a.hovercardRowData = row;\r\n    }\r\n  }\r\n  if (row) {\r\n    // Cancel any existing animations\r\n    if (hovercardOuterAnimation) {\r\n      clearTimeout(hovercardOuterAnimation);\r\n    }\r\n    if (hovercardInnerAnimation) {\r\n      clearTimeout(hovercardInnerAnimation);\r\n    }\r\n    // -15 so mouse pointer starts in the box\r\n    hovercard.style.top = (ev.pageY - 15) + 'px';\r\n    hovercard.style.left = (ev.pageX - 15) + 'px';\r\n    hovercard.innerText = JSON.stringify(row, null, 4);\r\n    hovercard.style.display = 'block';\r\n    hovercard.style.opacity = 100;\r\n    hovercard.style.transition = 'none';\r\n  }\r\n});\r\n\r\ndocument.addEventListener(\"mouseout\", (ev) => {\r\n  if (ev.target.id != \"datasette-hovercard\") {\r\n    return;\r\n  }\r\n  hovercardOuterAnimation = setTimeout(() => {\r\n    hovercard.style.transition = 'opacity 0.4s ease-in-out';\r\n    hovercard.style.opacity = 0;\r\n    hovercardInnerAnimation = setTimeout(() => {\r\n      hovercard.style.transition = 'none';\r\n      hovercard.style.display = \"none\";\r\n      hovercard.style.opacity = 100;\r\n    }, 800)\r\n  }, 400);\r\n})\r\n</script>\r\n\r\n{% endblock %}\r\n```", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1068791148, "label": "Idea: hover to reveal details of linked row"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1540#issuecomment-984037711", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1540", "id": 984037711, "node_id": "IC_kwDOBm6k_c46pzlP", "user": {"value": 9599, "label": "simonw"}, "created_at": "2021-12-01T20:42:17Z", "updated_at": "2021-12-01T20:43:14Z", "author_association": "OWNER", "body": "A first prototype (saved as `templates/pages/hovercard.html` and run with `datasette fixtures.db --template-dir=templates`):\r\n\r\n```html+jinja\r\n{% extends \"base.html\" %}\r\n\r\n{% block content %}\r\n\r\n<h1>Hovercards demo</h1>\r\n\r\nHere is a <a href=\"/fixtures/facetable/1\">link to a row</a>\r\n\r\n<script>\r\ndocument.addEventListener(\"mouseover\", async (ev) => {\r\n  const a = ev.target;\r\n  if (a.nodeName != 'A') {\r\n    return;\r\n  }\r\n  window.A = a;\r\n  // TODO: Respect base_url and suchlike\r\n  if (A.pathname.split(\"/\").length != 4) {\r\n    return; // Definitely not a row\r\n  }\r\n  // OK, it might be a row! Try a fetch\r\n  const response = await fetch(A.pathname + \".json?_shape=array\");\r\n  if (response.status == 200) {\r\n    const data = await response.json();\r\n    const row = data[0];\r\n    if (!a.hovercard) {\r\n      a.hovercard = document.createElement(\"div\");\r\n      a.hovercard.style.width = '300px';\r\n      a.hovercard.style.height = '200px';\r\n      a.hovercard.style.overflow = 'auto';\r\n      a.hovercard.style.backgroundColor = 'white';\r\n      a.hovercard.style.border = '1px solid #ccc';\r\n      a.hovercard.style.padding = '10px';\r\n      a.hovercard.style.position = 'absolute';\r\n      a.hovercard.style.whiteSpace = 'pre';\r\n      a.hovercard.style.top = ev.clientY + 'px';\r\n      a.hovercard.style.left = ev.clientX + 'px';\r\n      a.hovercard.style.boxShadow = '1px 2px 8px 2px rgba(0,0,0,0.08)';\r\n      document.body.appendChild(a.hovercard);\r\n    }\r\n    a.hovercard.innerText = JSON.stringify(row, null, 4);\r\n    a.hovercard.style.display = 'block';\r\n  }\r\n});\r\n</script>\r\n\r\n{% endblock %}\r\n```\r\n\r\n![hovercard](https://user-images.githubusercontent.com/9599/144310888-6db71bad-b6f6-4d8a-a737-81a618022bbe.gif)\r\n\r\nLots of decisions to make here. Most importantly, when should it be hidden again?", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1068791148, "label": "Idea: hover to reveal details of linked row"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1540#issuecomment-983985330", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1540", "id": 983985330, "node_id": "IC_kwDOBm6k_c46pmyy", "user": {"value": 9599, "label": "simonw"}, "created_at": "2021-12-01T19:29:05Z", "updated_at": "2021-12-01T19:29:05Z", "author_association": "OWNER", "body": "The layout of the hover card could be similar to the one used by `datasette-cluster-map`:\r\n\r\n<img width=\"387\" alt=\"global-power-plants__global-power-plants__33_643_rows\" src=\"https://user-images.githubusercontent.com/9599/144300723-2c733a0f-9daf-430d-a247-6c87f138e728.png\">\r\n\r\n\r\n", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1068791148, "label": "Idea: hover to reveal details of linked row"}, "performed_via_github_app": null}