Fix plot issues

django-daiquiri · Sep 20, 2024 · 56adf08 · 56adf08
1 parent d1dafb7
commit 56adf08
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 56 deletions.
diff --git a/daiquiri/query/assets/js/query/components/job/JobDownload.js b/daiquiri/query/assets/js/query/components/job/JobDownload.js
@@ -53,7 +53,7 @@ const JobDownload = ({ job }) => {
     }
   }
 
-  return (
+  return job.phase == 'COMPLETED' ? (
     <div>
       <p>
         {gettext('For further processing of the data, you can download the results table' +
@@ -90,6 +90,8 @@ const JobDownload = ({ job }) => {
         )
       }
     </div>
+  ) : (
+    <p className="text-danger">The query job did not complete successfully.</p>
   )
 }
 

diff --git a/daiquiri/query/assets/js/query/components/job/JobPlot.js b/daiquiri/query/assets/js/query/components/job/JobPlot.js
@@ -12,27 +12,29 @@ import JobPlotType from './JobPlotType'
 
 const JobPlot = ({ job }) => {
 
-  const [type, setType] = useState('histogram')
+  const [type, setType] = useState('scatter')
   const [columns, setColumns] = useState([])
 
   useEffect(() => setColumns(job.columns.filter((column) => (
     validTypes.includes(column.datatype) &&
     !excludedUcds.some((ucd) => (!isNil(column.ucd) && column.ucd.split(';').includes(ucd)))
   ))), [job])
 
-  return (
+  return job.phase == 'COMPLETED' ? (
     <div>
       <JobPlotType type={type} setType={setType} />
       {
-        (type == 'scatter') && <Scatter jobId={job.id} columns={columns} />
+        (type == 'scatter') && <Scatter job={job} columns={columns} />
       }
       {
-        (type == 'colorScatter') && <ColorScatter jobId={job.id} columns={columns} />
+        (type == 'colorScatter') && <ColorScatter job={job} columns={columns} />
       }
       {
-        (type == 'histogram') && <Histogram jobId={job.id} columns={columns} />
+        (type == 'histogram') && <Histogram job={job} columns={columns} />
       }
     </div>
+  ) : (
+    <p className="text-danger">The query job did not complete successfully.</p>
   )
 }
 

diff --git a/daiquiri/query/assets/js/query/components/job/JobResults.js b/daiquiri/query/assets/js/query/components/job/JobResults.js
@@ -14,13 +14,15 @@ const JobResults = ({ job }) => {
   const { data: columns } = useJobColumnsQuery(job.id, params)
   const { data: rows } = useJobRowsQuery(job.id, params)
 
-  return (
+  return job.phase == 'COMPLETED' ? (
     <Table
       columns={columns}
       rows={rows}
       params={params}
       setParams={setParams}
     />
+  )  : (
+    <p className="text-danger">The query job did not complete successfully.</p>
   )
 }
 

diff --git a/daiquiri/query/assets/js/query/components/job/plots/ColorScatter.js b/daiquiri/query/assets/js/query/components/job/plots/ColorScatter.js
@@ -8,7 +8,7 @@ import { useJobPlotQuery } from '../../../hooks/queries'
 import ColorScatterForm from './ColorScatterForm'
 import ColorScatterPlot from './ColorScatterPlot'
 
-const ColorScatter = ({ jobId, columns }) => {
+const ColorScatter = ({ job, columns }) => {
 
   const [values, setValues] = useState({
     x: {
@@ -36,9 +36,9 @@ const ColorScatter = ({ jobId, columns }) => {
     }
   }), [columns])
 
-  const { data: x } = useJobPlotQuery(jobId, values.x.column)
-  const { data: y } = useJobPlotQuery(jobId, values.y.column)
-  const { data: z } = useJobPlotQuery(jobId, values.z.column)
+  const { data: x } = useJobPlotQuery(job, values.x.column)
+  const { data: y } = useJobPlotQuery(job, values.y.column)
+  const { data: z } = useJobPlotQuery(job, values.z.column)
 
   return (
     <div>
@@ -49,7 +49,7 @@ const ColorScatter = ({ jobId, columns }) => {
 }
 
 ColorScatter.propTypes = {
-  jobId: PropTypes.string.isRequired,
+  job: PropTypes.object.isRequired,
   columns: PropTypes.array.isRequired
 }
 

diff --git a/daiquiri/query/assets/js/query/components/job/plots/ColorScatterForm.js b/daiquiri/query/assets/js/query/components/job/plots/ColorScatterForm.js
@@ -17,7 +17,7 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
             <select className="form-select" id="scatter-plot-x-axis" value={values.x.column} onChange={(value) => {
               setValues({...values, x: {...values.x, column: value.target.value}})
             }}>
-              <option>---</option>
+              <option value="">---</option>
               {
                 columns.map((column, columnIndex) => <option key={columnIndex} value={column.name}>{column.name}</option>)
               }
@@ -34,7 +34,7 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
             <select className="form-select" id="scatter-plot-y-axis" value={values.y.column} onChange={(value) => {
               setValues({...values, y: {...values.y, column: value.target.value}})
             }}>
-              <option>---</option>
+              <option value="">---</option>
               {
                 columns.map((column, columnIndex) => <option key={columnIndex} value={column.name}>{column.name}</option>)
               }
@@ -51,7 +51,7 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
             <select className="form-select" id="scatter-plot-z-axis" value={values.z.column} onChange={(value) => {
               setValues({...values, z: {...values.z, column: value.target.value}})
             }}>
-              <option>---</option>
+              <option value="">---</option>
               {
                 columns.map((column, columnIndex) => <option key={columnIndex} value={column.name}>{column.name}</option>)
               }
@@ -66,7 +66,6 @@ const ColorScatterForm = ({ columns, values, setValues }) => {
             <select className="form-select" id="scatter-plot-cmap" value={values.z.cmap} onChange={(value) => {
               setValues({...values, z: {...values.z, cmap: value.target.value}})
             }}>
-              <option>---</option>
               {
                 cmaps.map((cmap, cmapIndex) => <option key={cmapIndex} value={cmap}>{cmap}</option>)
               }

diff --git a/daiquiri/query/assets/js/query/components/job/plots/ColorScatterPlot.js b/daiquiri/query/assets/js/query/components/job/plots/ColorScatterPlot.js
@@ -16,13 +16,13 @@ const ColorScatterPlot = ({ columns, values, x, y, z  }) => {
             <Plot
               data={[
                 {
-                  x: x.results,
-                  y: y.results,
+                  x: x,
+                  y: y,
                   type: 'scattergl',
                   mode: 'markers',
                   marker: {
                     showscale: true,
-                    color: z.results,
+                    color: z,
                     colorscale: values.z.cmap,
                     colorbar: {
                       title: {
@@ -74,9 +74,9 @@ const ColorScatterPlot = ({ columns, values, x, y, z  }) => {
 ColorScatterPlot.propTypes = {
   columns: PropTypes.array.isRequired,
   values: PropTypes.object.isRequired,
-  x: PropTypes.object,
-  y: PropTypes.object,
-  z: PropTypes.object
+  x: PropTypes.array,
+  y: PropTypes.array,
+  z: PropTypes.array
 }
 
 export default ColorScatterPlot
diff --git a/daiquiri/query/assets/js/query/components/job/plots/Histogram.js b/daiquiri/query/assets/js/query/components/job/plots/Histogram.js
@@ -8,7 +8,7 @@ import { useJobPlotQuery } from '../../../hooks/queries'
 import HistogramForm from './HistogramForm'
 import HistogramPlot from './HistogramPlot'
 
-const Histogram = ({ jobId, columns }) => {
+const Histogram = ({ job, columns }) => {
 
   const [values, setValues] = useState({
     x: {
@@ -29,8 +29,8 @@ const Histogram = ({ jobId, columns }) => {
     }
   }), [columns])
 
-  const { data: x } = useJobPlotQuery(jobId, values.x.column)
-  const { data: s } = useJobPlotQuery(jobId, values.s.column)
+  const { data: x } = useJobPlotQuery(job, values.x.column)
+  const { data: s } = useJobPlotQuery(job, values.s.column)
 
   return (
     <div>
@@ -41,7 +41,7 @@ const Histogram = ({ jobId, columns }) => {
 }
 
 Histogram.propTypes = {
-  jobId: PropTypes.string.isRequired,
+  job: PropTypes.object.isRequired,
   columns: PropTypes.array.isRequired
 }
 

diff --git a/daiquiri/query/assets/js/query/components/job/plots/HistogramForm.js b/daiquiri/query/assets/js/query/components/job/plots/HistogramForm.js
@@ -52,7 +52,7 @@ const HistogramForm = ({ columns, values, setValues }) => {
             <select className="form-select" id="scatter-plot-select" value={values.s.column} onChange={(event) => {
               setValues({...values, s: {...values.s, column: event.target.value}})
             }}>
-              <option>---</option>
+              <option value="">---</option>
               {
                 columns.map((column, columnIndex) => <option key={columnIndex} value={column.name}>{column.name}</option>)
               }
@@ -62,7 +62,6 @@ const HistogramForm = ({ columns, values, setValues }) => {
             <select className="form-select" value={values.s.operation} onChange={(event) => {
               setValues({...values, s: {...values.s, operation: event.target.value}})
             }}>
-              <option>---</option>
               {
                 operations.map((operation, operationIndex) => <option key={operationIndex} value={operation.name}>{operation.name}</option>)
               }

diff --git a/daiquiri/query/assets/js/query/components/job/plots/HistogramPlot.js b/daiquiri/query/assets/js/query/components/job/plots/HistogramPlot.js
@@ -12,7 +12,7 @@ const HistogramPlot = ({ columns, values, x, s }) => {
   } else {
     const data = [
       {
-        x: x.results,
+        x: x,
         type: 'histogram',
         nbinsx: values.bins
       }
@@ -22,7 +22,7 @@ const HistogramPlot = ({ columns, values, x, s }) => {
       const operation = operations.find(operation => operation.name == values.s.operation) || operations[0]
 
       data.push({
-        x: x.results.filter((value, index) => operation.operation(s.results[index], values.s.value)),
+        x: x.filter((value, index) => operation.operation(s[index], values.s.value)),
         type: 'histogram',
         nbinsx: values.bins
       })
@@ -76,8 +76,8 @@ const HistogramPlot = ({ columns, values, x, s }) => {
 HistogramPlot.propTypes = {
   columns: PropTypes.array.isRequired,
   values: PropTypes.object.isRequired,
-  x: PropTypes.object,
-  s: PropTypes.object,
+  x: PropTypes.array,
+  s: PropTypes.array,
 }
 
 export default HistogramPlot
diff --git a/daiquiri/query/assets/js/query/components/job/plots/Scatter.js b/daiquiri/query/assets/js/query/components/job/plots/Scatter.js
@@ -8,7 +8,7 @@ import { useJobPlotQuery } from '../../../hooks/queries'
 import ScatterForm from './ScatterForm'
 import ScatterPlot from './ScatterPlot'
 
-const Scatter = ({ jobId, columns }) => {
+const Scatter = ({ job, columns }) => {
 
   const [values, setValues] = useState({
     x: {
@@ -41,10 +41,10 @@ const Scatter = ({ jobId, columns }) => {
     }
   }), [columns])
 
-  const { data: x } = useJobPlotQuery(jobId, values.x.column)
-  const { data: y1 } = useJobPlotQuery(jobId, values.y1.column)
-  const { data: y2 } = useJobPlotQuery(jobId, values.y2.column)
-  const { data: y3 } = useJobPlotQuery(jobId, values.y3.column)
+  const { data: x } = useJobPlotQuery(job, values.x.column)
+  const { data: y1 } = useJobPlotQuery(job, values.y1.column)
+  const { data: y2 } = useJobPlotQuery(job, values.y2.column)
+  const { data: y3 } = useJobPlotQuery(job, values.y3.column)
 
   return (
     <div>
@@ -55,7 +55,7 @@ const Scatter = ({ jobId, columns }) => {
 }
 
 Scatter.propTypes = {
-  jobId: PropTypes.string.isRequired,
+  job: PropTypes.object.isRequired,
   columns: PropTypes.array.isRequired
 }
 

diff --git a/daiquiri/query/assets/js/query/components/job/plots/ScatterForm.js b/daiquiri/query/assets/js/query/components/job/plots/ScatterForm.js
@@ -31,7 +31,7 @@ const ScatterForm = ({ columns, values, setValues }) => {
             <select className="form-select" id="scatter-plot-x-axis" value={values.x.column} onChange={(value) => {
               setValues({...values, x: {...values.x, column: value.target.value}})
             }}>
-              <option>---</option>
+              <option value="">---</option>
               {
                 columns.map((column, columnIndex) => <option key={columnIndex} value={column.name}>{column.name}</option>)
               }
@@ -50,7 +50,7 @@ const ScatterForm = ({ columns, values, setValues }) => {
                 <select className="form-select" id={`scatter-plot-${y}-axis`} value={values[y].column} onChange={(value) => {
                   setValues({...values, [y]: {...values[y], column: value.target.value}})
                 }}>
-                  <option>---</option>
+                  <option value="">---</option>
                   {
                     columns.map((column, columnIndex) => <option key={columnIndex} value={column.name}>{column.name}</option>)
                   }

diff --git a/daiquiri/query/assets/js/query/components/job/plots/ScatterPlot.js b/daiquiri/query/assets/js/query/components/job/plots/ScatterPlot.js
@@ -14,8 +14,8 @@ const ScatterPlot = ({ columns, values, x, y1, y2, y3  }) => {
         return data
       } else {
         return [...data, {
-          x: x.results,
-          y: y.results,
+          x: x,
+          y: y,
           type: 'scattergl',
           mode: 'markers',
           marker: {
@@ -82,10 +82,10 @@ const ScatterPlot = ({ columns, values, x, y1, y2, y3  }) => {
 ScatterPlot.propTypes = {
   columns: PropTypes.array.isRequired,
   values: PropTypes.object.isRequired,
-  x: PropTypes.object,
-  y1: PropTypes.object,
-  y2: PropTypes.object,
-  y3: PropTypes.object
+  x: PropTypes.array,
+  y1: PropTypes.array,
+  y2: PropTypes.array,
+  y3: PropTypes.array
 }
 
 export default ScatterPlot
diff --git a/daiquiri/query/assets/js/query/hooks/queries.js b/daiquiri/query/assets/js/query/hooks/queries.js
@@ -114,16 +114,18 @@ export const useJobRowsQuery = (jobId, params) => {
   })
 }
 
-export const useJobPlotQuery = (jobId, column) => {
-  return useQuery({
-    queryKey: ['jobPlot', jobId, column],
-    queryFn: () => QueryApi.fetchJobRows(jobId, {column: column, page_size: 10000}).then((response) => {
-      response.min = Math.min.apply(null, response.results)
-      response.max = Math.max.apply(null, response.results)
-      return response
-    }),
-    placeholderData: keepPreviousData,
-    enabled: !isEmpty(column)
+export const useJobPlotQuery = (job, column) => {
+  return useQuery({
+    queryKey: ['jobPlot', job.id, column],
+    queryFn: () => {
+      if (job.columns.map(column => column.name).includes(column)) {
+        return QueryApi.fetchJobRows(job.id, {column: column, page_size: 10000})
+                             .then((response) => response.results)
+      } else {
+        return null
+      }
+    },
+    placeholderData: keepPreviousData
   })
 }