Get all Data from Hypercube in nebula / Pagination

[BjoJo]

Hi,

currently I'm writing my first vizualisation in nebula (a customized table).
Now I have the problem, that I can only get the initial 10.000 Cells of the hypercube.
Can you please show me, how I can get the additional DataPages from the hypercube and add them to my table (best with pagination)?
I found a few codesnippets for qlik api, etc. But I don't get them adapted to nebula...

Thank you in advance

[alex_colombo]

Hey @BjoJo below an example of looping over hypercube data. The logic is to check max num of rows, and loop over it using pagination and get 10.000 rows per page. This number can be changed in the code.

let lastrow = 0
function getMoreData() {
	return new Promise(resolve => {
		if (self.backendApi.getRowCount() > lastrow + 1 && lastrow <= layout.maxRecord) {
			//we havent got all the rows yet, so get some more, 1000 rows
			var requestPage = [{
				qTop: lastrow + 1,
				qLeft: 0,
				qWidth: 5, //should be # of columns
				qHeight: Math.min(2000, self.backendApi.getRowCount() - lastrow)
			}];
			self.backendApi.getData(requestPage).then(function (dataPages) {
				//console.log(" Page  lastrow........... "  + lastrow);
				//when we get the result trigger paint again
				addtoArray();
				resolve(getMoreData());
			});
		} else {
			resolve();
		}
	});
}

[BjoJo]

Hi Alex,

thank you very much for your answer.
Sorry, but I think I don't get behind the logic of hypercube and promises.

In my vizualisation I'm trying to build a simple table -> in one column I need a checkbox, so I can't use the standard table.

To hold it simple I have a code snippet for the creation of the table:

export default function supernova(galaxy) {
  return {
    qae: {
      properties,
      data,
    },
    ext: ext(galaxy),
    component() {
      const element = useElement();
      const layout = useLayout();
    
      useEffect(() => {
        if (layout.qSelectionInfo.qInSelections) {
          // skip rendering when in selection mode
          return;
        }
        
        const hc = layout.qHyperCube;

        // headers
        const columns = [...hc.qDimensionInfo, ...hc.qMeasureInfo].map((f) => f.qFallbackTitle);
        const header = `<thead><tr>${columns.map((c) => `<th>${c}</th>`).join('')}</tr></thead>`;

        // rows
        const rows = hc.qDataPages[0].qMatrix
          .map((row) => `<tr>${row.map((cell) => `<td>${cell.qText}</td>`).join('')}</tr>`)
          .join('');

        // table
        const table = `<table>${header}<tbody>${rows}</tbody></table>`;
    
        // output
        element.innerHTML = table;
    
      }, [element, layout])
    }

  };
}

So the variable hc holds the initial hypercube from layout.
Now I don't understand, how I can add the missing rows from the following datapages.
Perfect would be, if the missing rows are loaded as the user scrolls down the table.

Maybe you can give me an example for this or a link where I can learn about promises and hypercubes.

Thanks,

BjoJo

[alex_colombo]

Hey @BjoJo in this page you can find some info on Hypercubes and an example of getting more data with nebula.js