mapvis.tsx

import React from 'react';
import { MapPanel, LayerPanel } from './components';
import GraphModel from './graphModel';
import { GraphType, Layer } from './Types';
import { VISComponentType, VisualizationPropTypes } from '../../types';

export type MapProps = {};

export default function MapVis({ data, schema, settings }: VisualizationPropTypes) {
  const [layers, setLayers] = React.useState<Layer[]>([]);
  const [showFilter, setShowFilter] = React.useState<boolean>(false);

  let graph = React.useMemo(() => {
    try {
      const graphModel = new GraphModel();
      graphModel.consumeMessageFromBackend(data);
      return graphModel;
    } catch (e) {
      console.error(e);
      return null;
    }
  }, [data]);

  if (!graph) return <div>No data</div>;

  return (
    <div className="flex flex-row justify-between overflow-hidden h-full w-full font-sans">
      <MapPanel graph={graph} layers={layers} showFilter={showFilter} setShowFilter={setShowFilter} />
      {/* <LayerPanel layers={layers} setLayers={setLayers} graphInfo={graph.getGraphInfo()} setShowFilter={setShowFilter} /> */}
    </div>
  );
}

export const MapComponent: VISComponentType = {
  displayName: 'Map',
  VIS: MapVis,
  settings: {},
};