cc-backend/web/frontend/src/analysis/PlotSelection.svelte

<!--
    @component Analysis-View subcomponent; allows selection for normalized histograms and scatterplots

    Properties:
    - `availableMetrics [String]`: Available metrics in selected cluster
    - `metricsInHistograms [String]`: The currently selected metrics to display as histogram
    - `metricsInScatterplots [[String, String]]`: The currently selected metrics to display as scatterplot
 -->

<script>
  import {
    Modal,
    ModalBody,
    ModalHeader,
    ModalFooter,
    InputGroup,
    Button,
    ListGroup,
    ListGroupItem,
    Icon,
  } from "@sveltestrap/sveltestrap";
  import { gql, getContextClient, mutationStore } from "@urql/svelte";

  /* Svelte 5 Props */
  let {
    availableMetrics,
    metricsInHistograms = $bindable(),
    metricsInScatterplots = $bindable(),
  } = $props();

  /* Const Init */
  const client = getContextClient();
  const updateConfigurationMutation = ({ name, value }) => {
    return mutationStore({
      client: client,
      query: gql`
        mutation ($name: String!, $value: String!) {
          updateConfiguration(name: $name, value: $value)
        }
      `,
      variables: { name, value },
    });
  };

  /* State Init */
  let isHistogramConfigOpen = $state(false);
  let isScatterPlotConfigOpen = $state(false);
  let selectedMetric1 = $state(null);
  let selectedMetric2 = $state(null);

  /* Functions */
  function updateConfiguration(data) {
    updateConfigurationMutation({
      name: data.name,
      value: JSON.stringify(data.value),
    }).subscribe((res) => {
      if (res.fetching === false && res.error) {
        throw res.error;
      }
    });
  }
</script>

<Button outline onclick={() => (isHistogramConfigOpen = true)}>
  <Icon name="" />
  Select Plots for Histograms
</Button>

<Button outline onclick={() => (isScatterPlotConfigOpen = true)}>
  <Icon name="" />
  Select Plots in Scatter Plots
</Button>

<Modal
  isOpen={isHistogramConfigOpen}
  toggle={() => (isHistogramConfigOpen = !isHistogramConfigOpen)}
>
  <ModalHeader>Select metrics presented in histograms</ModalHeader>
  <ModalBody>
    <ListGroup>
      {#each availableMetrics as metric (metric)}
        <ListGroupItem>
          <input
            type="checkbox"
            bind:group={metricsInHistograms}
            value={metric}
            onchange={() =>
              updateConfiguration({
                name: "analysis_view_histogramMetrics",
                value: metricsInHistograms,
              })}
          />

          {metric}
        </ListGroupItem>
      {/each}
    </ListGroup>
  </ModalBody>
  <ModalFooter>
    <Button color="primary" onclick={() => (isHistogramConfigOpen = false)}>
      Close
    </Button>
  </ModalFooter>
</Modal>

<Modal
  isOpen={isScatterPlotConfigOpen}
  toggle={() => (isScatterPlotConfigOpen = !isScatterPlotConfigOpen)}
>
  <ModalHeader>Select metric pairs presented in scatter plots</ModalHeader>
  <ModalBody>
    <ListGroup>
      {#each metricsInScatterplots as pair}
        <ListGroupItem>
          <b>{pair[0]}</b> / <b>{pair[1]}</b>

          <Button
            style="float: right;"
            outline
            color="danger"
            onclick={() => {
              metricsInScatterplots = metricsInScatterplots.filter(
                (p) => pair != p,
              );
              updateConfiguration({
                name: "analysis_view_scatterPlotMetrics",
                value: metricsInScatterplots,
              });
            }}
          >
            <Icon name="x" />
          </Button>
        </ListGroupItem>
      {/each}
    </ListGroup>

    <br />

    <InputGroup>
      <select bind:value={selectedMetric1} class="form-group form-select">
        <option value={null}>Choose Metric for X Axis</option>
        {#each availableMetrics as metric}
          <option value={metric}>{metric}</option>
        {/each}
      </select>
      <select bind:value={selectedMetric2} class="form-group form-select">
        <option value={null}>Choose Metric for Y Axis</option>
        {#each availableMetrics as metric}
          <option value={metric}>{metric}</option>
        {/each}
      </select>
      <Button
        outline
        disabled={selectedMetric1 == null || selectedMetric2 == null}
        onclick={() => {
          metricsInScatterplots = [
            ...metricsInScatterplots,
            [selectedMetric1, selectedMetric2],
          ];
          selectedMetric1 = null;
          selectedMetric2 = null;
          updateConfiguration({
            name: "analysis_view_scatterPlotMetrics",
            value: metricsInScatterplots,
          });
        }}
      >
        Add Plot
      </Button>
    </InputGroup>
  </ModalBody>
  <ModalFooter>
    <Button color="primary" onclick={() => (isScatterPlotConfigOpen = false)}>
      Close
    </Button>
  </ModalFooter>
</Modal>