Function AddChart

client/src/containers/AddChart/AddChart.jsx:81–620

()

  Container used for setting up a new chart
*/
function AddChart() {
  const [newChart, setNewChart] = useState(defaultChart);
  const [editingTitle, setEditingTitle] = useState(false);
  const [chartName, setChartName] = useState("");
  const [toastOpen, setToastOpen] = useState(false);
  const [saveRequired, setSaveRequired] = useState(true);
  const [loading, setLoading] = useState(false);
  const [conditions, setConditions] = useState([]);
  const [useCache, setUseCache] = useState(true);
  const [creatingDatasetId, setCreatingDatasetId] = useState(null);
  const [creatingNewDataset, setCreatingNewDataset] = useState(false);

  const charts = useSelector(selectCharts);
  const datasets = useSelector(selectDatasetsNoDrafts);
  const datasetLoading = useSelector((state) => state.dataset.loading);
  const team = useSelector(selectTeam);
  const user = useSelector(selectUser);

  const params = useParams();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const projectId = parseInt(params.projectId, 10);

  const currentUserRole = team?.TeamRoles?.find((teamRole) => teamRole.user_id === user?.id);
  const isProjectScopedEditor = ["projectAdmin", "projectEditor"].includes(currentUserRole?.role)
    && currentUserRole?.projects?.includes(projectId);
  const missingChartDatasets = _.uniqBy(
    (newChart.ChartDatasetConfigs || []).filter((cdc) => (
      cdc?.dataset_id && !datasets.some((dataset) => dataset.id === parseInt(cdc.dataset_id, 10))
    )),
    "dataset_id"
  );
  // Do not key this on local state that flips with datasetLoading — that remounted ChartDatasets
  // (two branches) and reset its fetch ref, re-dispatching getDatasets in a loop.
  const showMissingDatasetAlert = isProjectScopedEditor
    && !datasetLoading
    && missingChartDatasets.length > 0;
  const missingSeriesLabels = missingChartDatasets
    .map((cdc) => cdc.legend)
    .filter(Boolean);
  const missingDatasetDescription = "This chart uses datasets "
    + "that your project role cannot access because "
    + "they are not tagged with this dashboard. "
    + "Ask a team owner or team admin to tag the dataset with this dashboard, then reload the editor."
    + `${missingSeriesLabels.length > 0
      ? ` Affected series: ${missingSeriesLabels.slice(0, 3).join(", ")}${missingSeriesLabels.length > 3 ? ", ..." : ""}.`
      : ""}`;

  useEffect(() => {
    dispatch(clearAlerts());

    if (params.chartId) {
      // also fetch the chart's datasets and alerts
      dispatch(getChartAlerts({
        project_id: params.projectId,
        chart_id: params.chartId
      }));
    }