Skip to content

Add query for the selected region in the scatter plot #285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kimakan merged 7 commits into from
Jun 4, 2025
Merged

Add query for the selected region in the scatter plot #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3d5c036
Add prototype for data selection in the plot
kimakan May 26, 2025
28114b0
Change posgis functions to native postgres functions
kimakan May 27, 2025
8d8de43
Set postgres as default for plot selection
kimakan May 27, 2025
df3a39a
Fix messages for plot and minor refactor
kimakan May 28, 2025
1167f6f
Minor clean up of the plotting code
kimakan Jun 2, 2025
35352a5
Fix message width underneath the plot
kimakan Jun 2, 2025
a4e4859
Fix error message for the query in the plot selection
kimakan Jun 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion daiquiri/query/assets/js/components/Submit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const Submit = ({ formKey, jobId, query, queryLanguage, loadForm, loadJob, loadJ
</div>
<div className="col-lg-9 order-1 order-lg-2">
{
jobId && <Job jobId={jobId} loadForm={loadForm} />
jobId && <Job jobId={jobId} loadForm={loadForm} loadJob={loadJob} />
}
{
formKey && getForm()
Expand Down
7 changes: 4 additions & 3 deletions daiquiri/query/assets/js/components/submit/job/Job.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import JobResults from './JobResults'
import JobPlot from './JobPlot'
import JobDownload from './JobDownload'

const Job = ({ jobId, loadForm }) => {
const Job = ({ jobId, loadForm, loadJob }) => {
const { data: job } = useJobQuery(jobId)

const [activeTab, setActiveTab] = useLsState('daiquiri.query.job.activeTab', 'overview')
Expand Down Expand Up @@ -71,7 +71,7 @@ const Job = ({ jobId, loadForm }) => {
activeTab === 'results' && <JobResults job={job} />
}
{
activeTab === 'plot' && <JobPlot job={job} />
activeTab === 'plot' && <JobPlot job={job} loadJob={loadJob}/>
}
{
activeTab === 'download' && <JobDownload job={job} />
Expand All @@ -84,7 +84,8 @@ const Job = ({ jobId, loadForm }) => {

Job.propTypes = {
jobId: PropTypes.string.isRequired,
loadForm: PropTypes.func.isRequired
loadForm: PropTypes.func.isRequired,
loadJob: PropTypes.func.isRequired,
}

export default Job
17 changes: 14 additions & 3 deletions daiquiri/query/assets/js/components/submit/job/JobPlot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Scatter from './plots/Scatter'

import JobPlotType from './JobPlotType'

const JobPlot = ({ job }) => {
const JobPlot = ({ job, loadJob }) => {

const [type, setType] = useState('scatter')
const [columns, setColumns] = useState([])
Expand All @@ -22,10 +22,19 @@ const JobPlot = ({ job }) => {
))), [job])

return job.phase == 'COMPLETED' ? (
job.nrows > 1000000 ? (
<div className="card text-center">
<div className="card-body d-flex justify-content-center align-items-center" style={{ height: '200px'}}>
<h4 className="card-title">
The plotting tool is available only for query results with fewer than 1 million rows.
</h4>
</div>
</div>
): (
<div>
<JobPlotType type={type} setType={setType} />
{
(type == 'scatter') && <Scatter job={job} columns={columns} />
(type == 'scatter') && <Scatter job={job} columns={columns} loadJob={loadJob} />
}
{
(type == 'colorScatter') && <ColorScatter job={job} columns={columns} />
Expand All @@ -34,13 +43,15 @@ const JobPlot = ({ job }) => {
(type == 'histogram') && <Histogram job={job} columns={columns} />
}
</div>
)
) : (
<p className={jobPhaseClass[job.phase]}>{jobPhaseMessage[job.phase]}</p>
)
}

JobPlot.propTypes = {
job: PropTypes.object.isRequired
job: PropTypes.object.isRequired,
loadJob: PropTypes.func.isRequired,
}

export default JobPlot
22 changes: 11 additions & 11 deletions daiquiri/query/assets/js/components/submit/job/plots/ColorScatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import ColorScatterPlot from './ColorScatterPlot'

const ColorScatter = ({ job, columns }) => {

const [values, setValues] = useState({
const [plotValues, setPlotValues] = useState({
x: {
column: ''
},
Expand All @@ -23,27 +23,27 @@ const ColorScatter = ({ job, columns }) => {
}
})

useEffect(() => setValues({
...values,
useEffect(() => setPlotValues({
...plotValues,
x: {
...values.x, column: isNil(columns[0]) ? '' : columns[0].name
...plotValues.x, column: isNil(columns[0]) ? '' : columns[0].name
},
y: {
...values.y, column: isNil(columns[1]) ? '' : columns[1].name
...plotValues.y, column: isNil(columns[1]) ? '' : columns[1].name
},
z: {
...values.z, column: isNil(columns[2]) ? '' : columns[2].name
...plotValues.z, column: isNil(columns[2]) ? '' : columns[2].name
}
}), [columns])

const { data: x } = useJobPlotQuery(job, values.x.column)
const { data: y } = useJobPlotQuery(job, values.y.column)
const { data: z } = useJobPlotQuery(job, values.z.column)
const { data: x } = useJobPlotQuery(job, plotValues.x.column)
const { data: y } = useJobPlotQuery(job, plotValues.y.column)
const { data: z } = useJobPlotQuery(job, plotValues.z.column)

return (
<div>
<ColorScatterForm columns={columns} values={values} setValues={setValues} />
<ColorScatterPlot columns={columns} values={values} x={x} y={y} z={z} />
<ColorScatterForm columns={columns} plotValues={plotValues} setPlotValues={setPlotValues} />
<ColorScatterPlot columns={columns} plotValues={plotValues} x={x} y={y} z={z} />
</div>
)
}
Expand Down
22 changes: 11 additions & 11 deletions daiquiri/query/assets/js/components/submit/job/plots/ColorScatterForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'

import { cmaps } from 'daiquiri/query/assets/js/constants/plot'

const ColorScatterForm = ({ columns, values, setValues }) => {
const ColorScatterForm = ({ columns, plotValues, setPlotValues }) => {
return (
<div className="card mb-2">
<div className="card-body">
Expand All @@ -14,8 +14,8 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<select className="form-select" id="scatter-plot-x-axis" value={values.x.column} onChange={(value) => {
setValues({...values, x: {...values.x, column: value.target.value}})
<select className="form-select" id="scatter-plot-x-axis" value={plotValues.x.column} onChange={(value) => {
setPlotValues({ ...plotValues, x: { ...plotValues.x, column: value.target.value } })
}}>
<option value="">---</option>
{
Expand All @@ -31,8 +31,8 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<select className="form-select" id="scatter-plot-y-axis" value={values.y.column} onChange={(value) => {
setValues({...values, y: {...values.y, column: value.target.value}})
<select className="form-select" id="scatter-plot-y-axis" value={plotValues.y.column} onChange={(value) => {
setPlotValues({ ...plotValues, y: { ...plotValues.y, column: value.target.value } })
}}>
<option value="">---</option>
{
Expand All @@ -48,8 +48,8 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<select className="form-select" id="scatter-plot-z-axis" value={values.z.column} onChange={(value) => {
setValues({...values, z: {...values.z, column: value.target.value}})
<select className="form-select" id="scatter-plot-z-axis" value={plotValues.z.column} onChange={(value) => {
setPlotValues({ ...plotValues, z: { ...plotValues.z, column: value.target.value } })
}}>
<option value="">---</option>
{
Expand All @@ -63,8 +63,8 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<select className="form-select" id="scatter-plot-cmap" value={values.z.cmap} onChange={(value) => {
setValues({...values, z: {...values.z, cmap: value.target.value}})
<select className="form-select" id="scatter-plot-cmap" value={plotValues.z.cmap} onChange={(value) => {
setPlotValues({ ...plotValues, z: { ...plotValues.z, cmap: value.target.value } })
}}>
{
cmaps.map((cmap, cmapIndex) => <option key={cmapIndex} value={cmap}>{cmap}</option>)
Expand All @@ -79,8 +79,8 @@ const ColorScatterForm = ({ columns, values, setValues }) => {

ColorScatterForm.propTypes = {
columns: PropTypes.array.isRequired,
values: PropTypes.object.isRequired,
setValues: PropTypes.func.isRequired
plotValues: PropTypes.object.isRequired,
setPlotValues: PropTypes.func.isRequired
}

export default ColorScatterForm
15 changes: 8 additions & 7 deletions daiquiri/query/assets/js/components/submit/job/plots/ColorScatterPlot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { isNil } from 'lodash'
import { config, layout } from 'daiquiri/query/assets/js/constants/plot'
import { getColumnLabel } from 'daiquiri/query/assets/js/utils/plot'

const ColorScatterPlot = ({ columns, values, x, y, z }) => {
const ColorScatterPlot = ({ columns, plotValues, x, y, z }) => {
if (isNil(x) || isNil(y) || isNil(z)) {
return null
} else {
Expand All @@ -24,30 +24,31 @@ const ColorScatterPlot = ({ columns, values, x, y, z }) => {
marker: {
showscale: true,
color: z,
colorscale: values.z.cmap,
colorscale: plotValues.z.cmap,
colorbar: {
title: {
text: getColumnLabel(columns, values.z.column),
text: getColumnLabel(columns, plotValues.z.column),
side: 'right'
}
}
},
hoverinfo: 'skip'
}
]}
layout={{
...layout,
xaxis: {
title: {
text: getColumnLabel(columns, values.x.column),
text: getColumnLabel(columns, plotValues.x.column),
},
},
yaxis: {
title: {
text: getColumnLabel(columns, values.y.column),
text: getColumnLabel(columns, plotValues.y.column),
}
}
}}
style={{width: '100%'}}
style={{ width: '100%' }}
useResizeHandler={true}
config={config}
/>
Expand All @@ -60,7 +61,7 @@ const ColorScatterPlot = ({ columns, values, x, y, z }) => {

ColorScatterPlot.propTypes = {
columns: PropTypes.array.isRequired,
values: PropTypes.object.isRequired,
plotValues: PropTypes.object.isRequired,
x: PropTypes.array,
y: PropTypes.array,
z: PropTypes.array
Expand Down
16 changes: 8 additions & 8 deletions daiquiri/query/assets/js/components/submit/job/plots/Histogram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import HistogramPlot from './HistogramPlot'

const Histogram = ({ job, columns }) => {

const [values, setValues] = useState({
const [plotValues, setPlotValues] = useState({
x: {
column: ''
},
Expand All @@ -22,20 +22,20 @@ const Histogram = ({ job, columns }) => {
bins: 20,
})

useEffect(() => setValues({
...values,
useEffect(() => setPlotValues({
...plotValues,
x: {
...values.x, column: isNil(columns[0]) ? '' : columns[0].name
...plotValues.x, column: isNil(columns[0]) ? '' : columns[0].name
}
}), [columns])

const { data: x } = useJobPlotQuery(job, values.x.column)
const { data: s } = useJobPlotQuery(job, values.s.column)
const { data: x } = useJobPlotQuery(job, plotValues.x.column)
const { data: s } = useJobPlotQuery(job, plotValues.s.column)

return (
<div>
<HistogramForm columns={columns} values={values} setValues={setValues} />
<HistogramPlot columns={columns} values={values} x={x} s={s} />
<HistogramForm columns={columns} plotValues={plotValues} setPlotValues={setPlotValues} />
<HistogramPlot columns={columns} plotValues={plotValues} x={x} s={s} />
</div>
)
}
Expand Down
30 changes: 15 additions & 15 deletions daiquiri/query/assets/js/components/submit/job/plots/HistogramForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import { useDebouncedCallback } from 'use-debounce'

import { operations } from 'daiquiri/query/assets/js/constants/plot'

const HistogramForm = ({ columns, values, setValues }) => {
const setBins = useDebouncedCallback((event) => setValues({
...values, bins: event.target.value
const HistogramForm = ({ columns, plotValues, setPlotValues }) => {
const setBins = useDebouncedCallback((event) => setPlotValues({
...plotValues, bins: event.target.value
}), 500)
const setSelectValue = useDebouncedCallback((event) => setValues({
...values, s: {...values.s, value: event.target.value}
const setSelectValue = useDebouncedCallback((event) => setPlotValues({
...plotValues, s: { ...plotValues.s, value: event.target.value }
}), 500)

return (
Expand All @@ -22,8 +22,8 @@ const HistogramForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<select className="form-select" id="scatter-plot-column" value={values.x.column} onChange={(event) => {
setValues({...values, x: {...values.x, column: event.target.value}})
<select className="form-select" id="scatter-plot-column" value={plotValues.x.column} onChange={(event) => {
setPlotValues({ ...plotValues, x: { ...plotValues.x, column: event.target.value } })
}}>
<option>---</option>
{
Expand All @@ -39,7 +39,7 @@ const HistogramForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<input type="number" className="form-control" defaultValue={values.bins} onChange={setBins} />
<input type="number" className="form-control" defaultValue={plotValues.bins} onChange={setBins} />
</div>
</div>
<div className="row mt-1 align-items-center">
Expand All @@ -49,8 +49,8 @@ const HistogramForm = ({ columns, values, setValues }) => {
</label>
</div>
<div className="col-4">
<select className="form-select" id="scatter-plot-select" value={values.s.column} onChange={(event) => {
setValues({...values, s: {...values.s, column: event.target.value}})
<select className="form-select" id="scatter-plot-select" value={plotValues.s.column} onChange={(event) => {
setPlotValues({ ...plotValues, s: { ...plotValues.s, column: event.target.value } })
}}>
<option value="">---</option>
{
Expand All @@ -59,16 +59,16 @@ const HistogramForm = ({ columns, values, setValues }) => {
</select>
</div>
<div className="col-2">
<select className="form-select" value={values.s.operation} onChange={(event) => {
setValues({...values, s: {...values.s, operation: event.target.value}})
<select className="form-select" value={plotValues.s.operation} onChange={(event) => {
setPlotValues({ ...plotValues, s: { ...plotValues.s, operation: event.target.value } })
}}>
{
operations.map((operation, operationIndex) => <option key={operationIndex} value={operation.name}>{operation.name}</option>)
}
</select>
</div>
<div className="col-4">
<input type="number" className="form-control" defaultValue={values.s.value} onChange={setSelectValue} />
<input type="number" className="form-control" defaultValue={plotValues.s.value} onChange={setSelectValue} />
</div>
</div>
</div>
Expand All @@ -78,8 +78,8 @@ const HistogramForm = ({ columns, values, setValues }) => {

HistogramForm.propTypes = {
columns: PropTypes.array.isRequired,
values: PropTypes.object.isRequired,
setValues: PropTypes.func.isRequired
plotValues: PropTypes.object.isRequired,
setPlotValues: PropTypes.func.isRequired
}

export default HistogramForm
Loading