How to use the lib.connectToContainer function in lib

plotProps.customOpt = 's';
    }
  },
});

export const ShowInLegend = connectToContainer(UnconnectedVisibilitySelect, {
  modifyPlotProps: (props, context, plotProps) => {
    if (context.container.type && context.container.type !== 'sunburst') {
      plotProps.isVisible = context.fullLayout.showlegend;
    }

    return plotProps;
  },
});

export const HistogramInfoVertical = connectToContainer(Info, {
  modifyPlotProps: (props, context, plotProps) => {
    plotProps.isVisible =
      context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'v';
    return plotProps;
  },
});

export const HistogramInfoHorizontal = connectToContainer(Info, {
  modifyPlotProps: (props, context, plotProps) => {
    plotProps.isVisible =
      context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'h';
    return plotProps;
  },
});

export const Histogram2d = connectToContainer(Info, {

} else if (
      context.container.type === 'scattergeo' ||
      context.container.type === 'scattermapbox'
    ) {
      options = [
        {label: _('None'), value: 'none'},
        {label: _('To Self'), value: 'toself'},
      ];
    }

    plotProps.options = options;
    plotProps.clearable = false;
  },
});

export const MapboxSourceArray = connectToContainer(Text, {
  modifyPlotProps: (props, context, plotProps) => {
    const {fullValue, updatePlot} = plotProps;
    if (plotProps.fullValue && plotProps.fullValue.length > 0) {
      plotProps.fullValue = fullValue[0];
    }

    plotProps.updatePlot = v => {
      if (v.length) {
        updatePlot([v]);
      } else {
        updatePlot([]);
      }
    };
  },
});

});

function computeAxesRefOptions(axes, propsAttr) {
  const options = [];
  for (let i = 0; i < axes.length; i++) {
    const ax = axes[i];
    if (ax._id.charAt(0) === propsAttr.charAt(0) || ax._id.charAt(0) === propsAttr.charAt(1)) {
      const label = getAxisTitle(ax);
      options.push({label, value: ax._id});
    }
  }

  return options;
}

export const TextInfo = connectToContainer(UnconnectedFlaglist, {
  modifyPlotProps: (props, context, plotProps) => {
    const {localize: _, container} = context;

    let options = [
      {label: _('Label'), value: 'label'},
      {label: _('Value'), value: 'value'},
      {label: _('%'), value: 'percent'},
    ];

    if (container.type === 'funnel') {
      options = [
        {label: _('Label'), value: 'label'},
        {label: _('Value'), value: 'value'},
        {label: _('% initial'), value: 'percent initial'},
        {label: _('% previous'), value: 'percent previous'},
        {label: _('% total'), value: 'percent total'},

}
}

UnconnectedFilterValue.propTypes = {
  defaultValue: PropTypes.string,
  fullValue: PropTypes.any,
  updatePlot: PropTypes.func,
  ...Field.propTypes,
};
UnconnectedFilterValue.contextTypes = {
  localize: PropTypes.func,
  container: PropTypes.object,
};

export const FilterOperation = connectToContainer(UnconnectedFilterOperation);
export const FilterValue = connectToContainer(UnconnectedFilterValue);

);
  }
}

Color.propTypes = {
  fullValue: PropTypes.any,
  updatePlot: PropTypes.func,
  ...Field.propTypes,
};

export default connectToContainer(Color);

);
  }
}

UnconnectedLocation.propTypes = {
  attr: PropTypes.string,
  ...Field.propTypes,
};

UnconnectedLocation.contextTypes = {
  localize: PropTypes.func,
  updateContainer: PropTypes.func,
};

const Location = connectToContainer(UnconnectedLocation);

class UnconnectedLocationSelector extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      mode: props.container.locations ? 'location' : 'latlon',
    };

    this.setMode = this.setMode.bind(this);
  }

  componentWillMount() {
    this.setState({
      mode: this.props.container.locations ? 'location' : 'latlon',
    });

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connectToContainer} from 'lib';
import Field from './Field';
import Radio from './Radio';
import {UnconnectedDropdown} from './Dropdown';
import DataSelector from './DataSelector';

const LocationmodeVisible = connectToContainer(UnconnectedDropdown, {
  modifyPlotProps: (props, context, plotProps) => {
    if (!plotProps.fullValue) {
      plotProps.isVisible = true;
      plotProps.fullValue = plotProps.container.locationmode;
      return;
    }
  },
});

class UnconnectedLocation extends Component {
  render() {
    const {localize: _} = this.context;

    return (
      <>

layoutAttr: PropTypes.string,
  label: PropTypes.string,
  options: PropTypes.array,
  container: PropTypes.object,
  fullContainer: PropTypes.object,
  updateContainer: PropTypes.func,
};

UnconnectedSingleSubplotCreator.contextTypes = {
  fullLayout: PropTypes.object,
  data: PropTypes.array,
  fullData: PropTypes.array,
  onUpdate: PropTypes.func,
};

const SingleSubplotCreator = connectToContainer(UnconnectedSingleSubplotCreator);

class UnconnectedSubplotCreator extends Component {
  render() {
    const subplotType = traceTypeToAxisType(this.props.container.type);
    if (!['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(t => t === subplotType)) {
      return null;
    }

    const isFirstTraceOfAxisType =
      this.context.data.filter(d => traceTypeToAxisType(d.type) === subplotType).length === 1;
    if (isFirstTraceOfAxisType) {
      return null;
    }

    const {fullLayout, localize: _} = this.context;

import ColorPicker from './ColorPicker';
import {UnconnectedColorscalePicker} from './ColorscalePicker';
import Field from './Field';
import Info from './Info';
import PropTypes from 'prop-types';
import RadioBlocks from '../widgets/RadioBlocks';
import React, {Component} from 'react';
import nestedProperty from 'plotly.js/src/lib/nested_property';
import {adjustColorscale, connectToContainer} from 'lib';

const CustomColorscalePicker = connectToContainer(UnconnectedColorscalePicker, {
  modifyPlotProps: (props, context, plotProps) => {
    if (
      props.attr === 'marker.color' &&
      context.fullData
        .filter(t => context.traceIndexes.includes(t.index))
        .every(t => t.marker && t.marker.color) &&
      plotProps.fullValue &&
      typeof plotProps.fullValue === 'string'
    ) {
      plotProps.fullValue =
        context.fullData &&
        context.fullData
          .filter(t => context.traceIndexes.includes(t.index))
          .map(t => [0, t.marker.color]);
    }
  },

attr: PropTypes.string,
  label: PropTypes.string,
  options: PropTypes.array,
  container: PropTypes.object,
  fullContainer: PropTypes.object,
  updateContainer: PropTypes.func,
};

UnconnectedAxisCreator.contextTypes = {
  fullLayout: PropTypes.object,
  data: PropTypes.array,
  fullData: PropTypes.array,
  onUpdate: PropTypes.func,
};

const AxisCreator = connectToContainer(UnconnectedAxisCreator);

class UnconnectedAxesCreator extends Component {
  render() {
    const axisType = traceTypeToAxisType(this.props.container.type);
    const isFirstTraceOfAxisType =
      this.context.data.filter(d => traceTypeToAxisType(d.type) === axisType).length === 1;

    if (isFirstTraceOfAxisType) {
      return null;
    }

    const {fullLayout, localize: _} = this.context;
    const controls = [];

    function getOptions(axisType) {
      return fullLayout._subplots[axisType].map(axisId => ({