Browser Hangs Waiting For Data

[timtutt]

After I got past the issue with #84 in the general sense I started running into a bigger problem. The maps component queries just seem to hang rather than returning data. I've tried messing with the zoom levels and even with a smaller set with no luck.

The general dataset is only about 33K records. Not particularly large, though the records are in the same city. I'm pretty much at a loss for what to try at this point. If I remove the maps component all of the rest of the components work just fine so the data in theory is good. It's just the maps component that seems to be the problem....

Any guidance?

[metagrover]

Can you check the networks tab to see which request is taking too long?

[timtutt]

Yep. It’s just the maps component msearch query which is a match_all with a size of 10 (which I specify in the component.

…

On Jul 5, 2018, at 2:21 AM, Deepak Grover ***@***.***> wrote: Can you check the networks tab to see which request is taking too long? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[metagrover]

So you're getting the late response from the server for sure?

[timtutt]

The request just shows pending and the browser tab freezes. Usually have to kill the tab. Request never finishes with data. Again this only happens with the maps component, when it is removed all other components fetch data and render fine.

…

On Thu, Jul 5, 2018 at 5:26 AM Deepak Grover ***@***.***> wrote: So you're getting the late response from the server for sure? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#85 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABcntM7yXFFWQpqsxIikvr11E0WTdWoMks5uDdu-gaJpZM4VDLGs> .

[metagrover]

Can you try making the same request via postman or curl and see if your server returns the results? I can test it on my end if you can replicate this with codesandbox.

[timtutt]

Yep. Tried that and it returns just fine with curl. There’s no logical reason that I can see that it’s happening. This happens even with the bare bones map component. The data is in a local ES instance.

…

On Thu, Jul 5, 2018 at 5:32 AM Deepak Grover ***@***.***> wrote: Can you try making the same request via postman or curl and see if your server returns the results? I can test it on my end if you can replicate this with codesandbox. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#85 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABcntNRwLBPx1Z5v4RLuBp95e8fglAwDks5uDd0YgaJpZM4VDLGs> .

[metagrover]

Can you replicate this on a codesandbox, please?

[timtutt]

So this is a weird catch-22 now...

Got my data imported to appbase.io and copied the creds over to code sandbox using the base example. Only imported 19 records... Now the codesandbox thing freezes when it gets launched... There is something about my data that it does not like. My app works using the earthquake example.

Here's the link.

https://codesandbox.io/s/lyk81yl8nm

[timtutt]

In case you can't get it loaded, here's the raw code:

import React from "react";
import ReactDOM from "react-dom";
import {
  ReactiveBase,
  ReactiveComponent,
  DataSearch,
  MultiDropdownList,
  MultiList,
  SingleDropdownRange,
  SingleList,
  DateRange,
  SelectedFilters,
  ReactiveList
} from "@appbaseio/reactivesearch";
import { ReactiveMap } from "@appbaseio/reactivemaps";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <ReactiveBase
        app="cyviltestb"
        credentials="x7WlNq467:d18a4291-8bf3-48ed-a390-9ea8f24bf7ea"
        type="doc"
        mapKey="AIzaSyBQdVcKCe0q_vOBDUvJYpzwGpt_d_uTj4Q"
      >
        <div className="row">
          <div className="col">
            <SingleList
              title="Places"
              componentId="places"
              dataField="BID.raw"
              size={50}
              showSearch
            />
          </div>
          <div className="col">
            <SelectedFilters />
            <ReactiveMap
              componentId="map"
              dataField="GeoPoint"
              react={{
                and: "places"
              }}
            />
          </div>
        </div>
      </ReactiveBase>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[timtutt]

Any thoughts on this?

[timtutt]

Hi - Just wanted to follow up on this and see if there were any thoughts as to why I might be experiencing this. May have to resort to building a custom component around this

[metagrover]

I'm not too sure what's wrong here but I'm able to replicate this. It only seems to happen in case of ReactiveMap component. If I replace it with a ReactiveList, everything works. I will keep you posted as I debug this.

[metagrover]

Found the issue and fixed here. Will roll this out shortly.

It was related to the parsing of location-fields when we add noise - We add a little noise to the location fields in case of clashing to support the clusters rendering properly - Refer issue #50 for more info on noising.

This should also fix #84 imo. Thanks for pointing this out! 😸

[timtutt]

@metagrover - Thanks much for digging into this. Will look forward to the roll out. Will it be in the reactivesearch package or just an updated version of reactivemaps?

[metagrover]

It will be a reactivemaps release, but we will also be releasing a new version of reactivesearch since there has been some enhancements and bug fixes in the search components library as well. Best to keep both up to date!