const d3 = Object.assign({}, require("d3-dsv"));

import React from "react";
import DataTransform from "@nteract/transform-dataresource";

import "react-virtualized/styles.css";

import { infer } from "jsontableschema";

const SAMPLE_SIZE = 10;

function getSampleRows(data, sampleSize) {
  return Array.from({ length: Math.min(sampleSize, data.length) }, () => {
    const index = Math.floor(Math.random() * data.length);
    return data[index];
  });
}

function inferSchema(data) {
  const sampleRows = getSampleRows(data, SAMPLE_SIZE);
  const headers = Array.from(
    sampleRows.reduce(
      (result, row) => new Set([...result, ...Object.keys(row)]),
      new Set()
    )
  );
  const values = sampleRows.map(row => Object.values(row));
  return infer(headers, values);
}

export default class CSVView extends React.Component {
  shouldComponentUpdate() {
    return false;
  }

  render() {
    const data = d3.csvParse(this.props.entry.content);
    const schema = inferSchema(data);
    return (
      <div>
        <DataTransform data={{ data, schema }} theme="light" />
      </div>
    );
  }
}

@@ -136,651 +136,8 @@
 %22;%0A%0A
-import %22react-virtualized/styles.css%22;%0A%0Aimport %7B infer %7D from %22jsontableschema%22;%0A%0Aconst SAMPLE_SIZE = 10;%0A%0Afunction getSampleRows(data, sampleSize) %7B%0A  return Array.from(%7B length: Math.min(sampleSize, data.length) %7D, () =%3E %7B%0A    const index = Math.floor(Math.random() * data.length);%0A    return data%5Bindex%5D;%0A  %7D);%0A%7D%0A%0Afunction inferSchema(data) %7B%0A  const sampleRows = getSampleRows(data, SAMPLE_SIZE);%0A  const headers = Array.from(%0A    sampleRows.reduce(%0A      (result, row) =%3E new Set(%5B...result, ...Object.keys(row)%5D),%0A      new Set()%0A    )%0A  );%0A  const values = sampleRows.map(row =%3E Object.values(row));%0A  return infer(headers, values);%0A%7D%0A%0A
 expo
@@ -311,46 +311,8 @@
 t);%0A
-    const schema = inferSchema(data);%0A
     
@@ -371,16 +371,8 @@
 data
-, schema
  %7D%7D 

simplify table setup