interestingness | Visual Memorability for Robotic Interestingness | Robotics library

I am trying to display photo's obtained from a flickr image search API, and the display the images in a grid, so that they all fill the screen.

I have tried many different CSS layouts, such as this:

https://travishorn.com/responsive-grid-in-2-minutes-with-css-grid-layout-4842a41420fe

and this https://www.youtube.com/watch?v=wmeJMOxyD-w&list=LL&index=2&ab_channel=Programster

However, the images always appear in a single file column.

How could I edit the below code, so that the images are displayed in a grid?

I have a dataset of images, which are sorted with respect to their interestingness. I want to create a diverse subset by computing the pairwise similarities between a candidate element and all current members of the subset.

My code is below. It looks like working correctly; however, as you can guess it is very slow (takes 6-7 hours).

I wonder if there is another way to create this subset faster than this implementation.

Is possible to display outputs in the side panel?

I'm working on text mining and the main text body is in the main panel. I would like to add some outputs on the side such as Number of paragraphs = 5, Word count = 1000.

Im struggling to achieve infinite scroll with my test React/Redux application.

Here how it works in simple words:

1) On componentDidMount I dispatch an action which sets the Redux state after getting 100 photos from the API. So I got photos array in Redux state.

2) I implemented react-waypoint, so when you scroll to the bottom of those photos it fires a method which dispatches another action that get more photos and "appends" them to the photos array and...

as I understand - the state changed, so redux is firing the setState and the component redraws completely, so I need to start scrolling again but its 200 photos now. When I reach waypoint again everything happens again, component fully rerenders and I need to scroll from top through 300 photos now.

This is not how I wanted it to work of course.

The simple example on react-waypoint without Redux works like this:

1) you fetch first photos and set the components initial state 2) after you scroll to the waypoint it fires a method which makes another request to the api, constructs new photos array(appending newly fetched photos) and (!) call setState with the new photos array.

And it works. No full re-renders of the component. Scroll position stays the same, and the new items appear below waypoint.

So the question is — is the problem I experience the problem with Redux state management or am I implementing my redux reducers/actions not correctly or...???

Why is setting component state in React Waypoint Infinite Scroll example (no Redux) works the way I want (no redrawing the whole component)?

I appreciate any help! Thank you!

The reducers