search

public-accountability / oligrapher

JavaScript app for displaying annotated network graphs based on data from LittleSis
https://littlesis.org/oligrapher
GNU General Public License v3.0
101 stars 22 forks source link

Oligrapher does not work with touch devices #143

Open betsydupuis opened 1 month ago

betsydupuis commented 1 month ago

Devices:

Oligrapher does not allow interaction on touch based devices.

josephlacey commented 1 month ago

This is a known issue for creating and editing maps. Given the complications even on large screens and with a pointing device, defining how this would work on a smaller screen is daunting.

Viewing maps does work, though again smaller screens aren't ideal for it. Any maps with Annotations do seem to have rendering issues that should be addressed at some point.

I wonder if we should have a message that renders at the top of the page when a small screen is detected and we recommend larger screens for better viewing.

betsydupuis commented 1 month ago

Is there an update or library for D3 that handles this?

I'm not too familiar with D3. Never used before, but it looks like there's a few libs that aren't being used by oligrapher that support touch.

Is it possible that the interactions are custom to Oligrapher or predate changes to D3?

https://www.npmjs.com/package/d3-brush https://d3js.org/d3-drag https://d3js.org/d3-zoom

betsydupuis commented 1 month ago

I wonder if we should have a message that renders at the top of the page when a small screen is detected and we recommend larger screens for better viewing.

Sounds like a good temporary fix.

There's still a lot of basic browsing that doesn't work with mobile. That's probably higher priority.

I can't imagine someone wanting to use a phone to make a map, but I at least have tried to use an iPad.

aepyornis commented 1 month ago

We don't use d3 (an early version many years ago did, so let's remove references to it in the documentation)

But react-draggable the library we use for dragging supports touch event so with some effort (start with app/components/DraggableComponent) we might be able to get this touch screen workings.

but agreed that in general there are lots of issues with small screen sizes and non-standard ratios

betsydupuis commented 1 month ago

We don't use d3 (an early version many years ago did, so let's remove references to it in the documentation)

It's in the node dependencies, so that's a good place to start.

I think remember years ago that Littlesis was featured on the D3 examples page.

aepyornis commented 1 month ago

We don't use d3 (an early version many years ago did, so let's remove references to it in the documentation)

It's in the node dependencies, so that's a good place to start.

ah that's right, we do have one d3 dependency, d3-force, which is used to create force-directed graph layouts (sadly I think this stopped working and has been disabled but it would be fun to get that working again)

I think remember years ago that Littlesis was featured on the D3 examples page.

cool! I didn't know that. The overview page is D3 - https://littlesis.org/oligrapher