I want to create a page which has many elements with connectors. now, how can I draw these elements on a page with react?
Is there any package for this purpose?
This is a useful package for drawing elements and their connectors.
https://reactflow.dev
Related
I'm working on a web app with Nextjs, Mapbox and react-map-gl. On the client side I would add some controls to show/hide specific POIs, for example restaurants, museums and landmarks.
I tried various ways and found multiple examples that were not specific to my problem. Nevertheless I'll note them down here, so you can see what I tried and why it failed.
Change the categories in Mapbox studio
There is a possibility to show/hide the POI categories in Mapbox studio, however this is static and I want to make this sort of changes on the client side.
Two examples from from Mapbox
"Filter symbols by toggling a list"
"show and hide layers"
Those examples show very well what I want to achieve. Simple UI buttons where I can show/hide certain POI categories, for example Theatre, Museum, Bar, Bicycle.
The downside is that the data is added manually - after that map is loaded. I'm looking for a way to show/hide the POI categories on the existing map data I receive from Mapbox.
Copy POI layer
I found a third option that suggest to copy the POI layers "Hide mapbox POI in runtime". It doesn't seem like a proper solution, but I'll give it a try and share my feedback afterwards.
Do you guys know how I can properly show/hide categories at runtime from the POI-Layer in Mapbox?
I'm thankful for any help.
You can use the same approach shown in the "show and hide layers" example you linked to. Once you have a layer on the map for each POI group you want to control, use map.setLayoutProperty(layername, 'visibility', 'none') to hide, and map.setLayoutProperty(layername, 'visibility', 'visible') to show.
Layers added after the map loads are no different than the layers that are included with the main style. The "show and hide layers" example shows sources and layers added after the map loads, they are just coming from mapbox-hosted vector tiles, not geojson files.
Thanks chriswhong. For anyone working with react-map-gl, there is one more thing to consider.
The setLayoutProperty is at the time of my writing not available on mapRef and on the useMap hook.
According to the create-ref.ts file from react-map-gl the setLayoutProperty is part of the methods that may break the react binding if called directly.
According to the official react-map-gl documentation you can you can still access the hidden members via getMap(), as it can be seen in the following example via console log.
codesandbox.io/s/zealous-poincare-ti5qx9
Lightning web Components to display list of Objects in a drown list. and display fields of selected objects
this is possible using getGlobalDescribe in Apex side and then getObjectInfo on the javascript side.
If you need something already working, you can have a look at the AppExchange market and try to find a solution there.
If you need a development, I suggest to find a developer or hope that someone will have time to give you that for free but this website is more about questions/issues that we try to solve.
I am not able to automate google map screen which is present on my application web page.
I have web page where google map is present in square in half of screen. I want to click on the road present in map or a restaurant logo which is present on the google map.
When i tried to find the locators for the map then in the DOM it is present as an image and no other html properties or locators are associated with it.
Also i tried an option using moveToElement() function of action class but this solution is not reliable as most of the time it is not working.
Please suggest me any solution for this automation issue if someone faced this issue of Google maps automation before ?
Sounds like HTML5 issue over a google maps issue. This is tricky for Selenium, see these articles:
https://www.linkedin.com/pulse/html-canvas-testing-selenium-opencv-maciej-kusz/
https://chariotsolutions.com/blog/post/automated-testing-of-html5-canvas/
which recommend using action chains to move to and click certain x,y coordinates.
Also, check out the canvas javascript api; you may be able to use javascript_executor to manipulate the canvas.
Please provide any examples or links which clearly explaining to create simple image gallery in Drupal 7.
Actually the image gallery should be in Thumb Nail Image with 4 images per row.
It should be categorized with simple menu.
If there is sub category, then there should be drop down menus.
Finally the gallery should be with pagination links.
I've tried with taxamony, but it not clear display as expected in front end.
Please provide the better way either thru code or any modules available.
There are different ways to do an image gallery. If something like galleria is what you are looking for you can do it very easily just by using an image field and drupal galleria module.
But in your case, you will have to use views. In that pull out the images you want, choose the
display as grid. Set the no. of columns to 4. Link to the original image. Then you can use the
Lightbox module to open them in a lightbox, if you want one.
For pagination you can use the default views pagination settings.
This might help you. Check out.
Is there some way to find out the list of images associated with an example? When i double click some example then the images are coming perfect but while implementing it in my project, I am having lots of image problems. e.g. In the Grid cell-editing example demo, when I implement it in my project then the Sort Ascending, Sort Descending and Columns images are not getting displayed. I tried running this in Chrome and FIrefox but not getting any missing image error/exception/warning as well.
Please let me know about this.
Regards,
If you just need a couple of images, you can right-click the images in the working example and click "Inspect Element". For the grid cell-editing demo, the images are '/resources/themes/images/default/grid/sort_asc.gif', '/resources/themes/images/default/grid/sort_desc.gif', and '/resources/themes/images/default/grid/grid3-hd-btn.gif'. They are referenced in the ext-all.css file, so if the images are missing in your version and you aren't seeing any console errors, your version of the css file might not reference those background images.