From f0185fbe7f70de1ad40ccf14685cd3498dad02e1 Mon Sep 17 00:00:00 2001 From: Yogesh Mahajan Date: Wed, 17 Apr 2024 17:31:55 +0530 Subject: [PATCH] Fix issues reported while testing MUI5 library update. --- .../static/js/SchemaView/FieldSetView.jsx | 10 ++--- web/pgadmin/static/js/SchemaView/FormView.jsx | 10 ++--- web/pgadmin/static/js/Theme/index.jsx | 1 + .../overrides/pgadmin.classes.override.js | 7 +++- web/pgadmin/static/js/chartjs/index.jsx | 30 +++++++++++++-- .../static/js/helpers/Layout/index.jsx | 2 +- .../components/sections/GraphVisualiser.jsx | 38 +++++++++++++------ 7 files changed, 70 insertions(+), 28 deletions(-) diff --git a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx index 7ecaf4d75..ed60182cc 100644 --- a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx +++ b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx @@ -18,7 +18,7 @@ import CustomPropTypes from '../custom_prop_types'; import { DepListenerContext } from './DepListener'; import { getFieldMetaData } from './FormView'; import FieldSet from '../components/FieldSet'; -import { Box } from '@mui/material'; +import { Grid } from '@mui/material'; export default function FieldSetView({ value, schema={}, viewHelperProps, accessPath, dataDispatch, controlClassName, isDataGridForm=false, label, visible}) { @@ -101,9 +101,9 @@ export default function FieldSetView({ withContainer: false, controlGridBasis: 3 })); viewFields.push( - + {inlineComponents} - + ); inlineComponents = []; } else { @@ -113,9 +113,9 @@ export default function FieldSetView({ } if(inlineComponents?.length > 0) { viewFields.push( - + {inlineComponents} - + ); } diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx index bcd607fe0..5506bf07c 100644 --- a/web/pgadmin/static/js/SchemaView/FormView.jsx +++ b/web/pgadmin/static/js/SchemaView/FormView.jsx @@ -8,7 +8,7 @@ ////////////////////////////////////////////////////////////// import React, { useContext, useEffect, useRef, useState } from 'react'; -import { Box, Tab, Tabs } from '@mui/material'; +import { Box, Tab, Tabs, Grid } from '@mui/material'; import { makeStyles } from '@mui/styles'; import _ from 'lodash'; import PropTypes from 'prop-types'; @@ -381,9 +381,9 @@ export default function FormView({ withContainer: false, controlGridBasis: 3 })); tabs[group].push( - + {inlineComponents} - + ); inlineComponents = []; inlineCompGroup = null; @@ -396,9 +396,9 @@ export default function FormView({ if(inlineComponents?.length > 0) { tabs[inlineCompGroup].push( - + {inlineComponents} - + ); } diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index e830f5196..422366108 100644 --- a/web/pgadmin/static/js/Theme/index.jsx +++ b/web/pgadmin/static/js/Theme/index.jsx @@ -499,6 +499,7 @@ function getFinalTheme(baseTheme) { '&[readonly], &.Mui-disabled': { color: baseTheme.palette.text.muted, backgroundColor: baseTheme.otherVars.inputDisabledBg, + WebkitTextFillColor: baseTheme.palette.text.muted }, '&:focus': { outline: '0 !important', diff --git a/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js b/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js index ddd703c5a..c9d4d9412 100644 --- a/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js +++ b/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js @@ -1,6 +1,10 @@ export default function pgadminOverride(theme) { return { - + '.dialog-node-icon': { + marginRight: '2px !important', + padding: '0px 10px', + backgroundPosition: '50%' + }, '.icon-server-connecting': { backgroundImage: theme.otherVars.iconLoaderUrl, backgroundRepeat: 'no-repeat', @@ -9,7 +13,6 @@ export default function pgadminOverride(theme) { verticalAlign: 'middle', height: '1.3em', }, - '.dashboard-pg-doc': { backgroundImage: theme.otherVars.dashboardPgDoc, display: 'inline-block', diff --git a/web/pgadmin/static/js/chartjs/index.jsx b/web/pgadmin/static/js/chartjs/index.jsx index f316aafbc..68312584f 100644 --- a/web/pgadmin/static/js/chartjs/index.jsx +++ b/web/pgadmin/static/js/chartjs/index.jsx @@ -11,6 +11,7 @@ import { Chart, registerables } from 'chart.js'; import zoomPlugin from 'chartjs-plugin-zoom'; import PropTypes from 'prop-types'; import _ from 'lodash'; +import { useTheme } from '@mui/material'; export const DATA_POINT_STYLE = ['circle', 'cross', 'crossRot', 'rect', 'rectRounded', 'rectRot', 'star', 'triangle']; @@ -59,7 +60,6 @@ const defaultOptions = { }, ticks: { display: false, - color: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'), }, }, y: { @@ -69,12 +69,9 @@ const defaultOptions = { return label; } }, - color: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'), }, grid: { drawBorder: false, - zeroLineColor: getComputedStyle(document.documentElement).getPropertyValue('--border-color'), - color: getComputedStyle(document.documentElement).getPropertyValue('--border-color'), }, }, }, @@ -101,6 +98,7 @@ const defaultOptions = { export default function BaseChart({type='line', id, options, data, redraw=false, plugins={}, ...props}) { const chartRef = React.useRef(); const chartObj = React.useRef(); + const theme = useTheme(); const initChart = function() { Chart.register(...registerables); @@ -126,6 +124,30 @@ export default function BaseChart({type='line', id, options, data, redraw=false, return destroyChart; }, []); + useEffect(()=>{ + let theme1 = { + scales: { + x: { + ticks: { + color: theme.palette.text.primary, + }, + }, + y: { + ticks: { + color: theme.palette.text.primary, + }, + grid: { + zeroLineColor: theme.otherVars.borderColor, + color: theme.otherVars.borderColor + }, + }, + }, + }; + let merged = _.merge(options, theme1); + chartObj.current.options = merged; + chartObj.current.update(props.updateOptions || {}); + },[theme]); + useEffect(()=>{ if(typeof(chartObj.current) != 'undefined') { chartObj.current.data = data; diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx index 3efbafc19..fce4cb2c3 100644 --- a/web/pgadmin/static/js/helpers/Layout/index.jsx +++ b/web/pgadmin/static/js/helpers/Layout/index.jsx @@ -49,7 +49,7 @@ function TabTitle({id, closable, defaultInternal}) { return ( - {attrs.icon && } + {attrs.icon && } {attrs.title} {closable && } size="xs" noBorder onClick={()=>{ layoutDocker.close(id); diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx index 7529e5a81..1951dafad 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx @@ -26,6 +26,7 @@ import { LineChart, BarChart, PieChart, DATA_POINT_STYLE, DATA_POINT_SIZE, CHART_THEME_COLORS, CHART_THEME_COLORS_LENGTH, LightenDarkenColor} from 'sources/chartjs'; import { QueryToolEventsContext, QueryToolContext } from '../QueryToolComponent'; import { QUERY_TOOL_EVENTS, PANELS } from '../QueryToolConstants'; +import { useTheme } from '@mui/material'; // Numeric data type used to separate out the options for Y axis. const NUMERIC_TYPES = ['oid', 'smallint', 'integer', 'bigint', 'decimal', 'numeric', @@ -202,7 +203,7 @@ function getPieChartData(rows, colName, colPosition, queryToolCtx) { } // This function is used to get the graph data set for the X axis and Y axis -function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx) { +function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx, graphColors) { // Function is used to the find the position of the column function getColumnPosition(colName) { return _.find(columns, (c)=>(c.name==colName))?.pos; @@ -227,7 +228,7 @@ function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx) { } colorIndex = colorIndex + 1; - let color = CHART_THEME_COLORS[queryToolCtx.preferences.misc.theme][colorIndex]; + let color = graphColors[colorIndex]; let colPosition = getColumnPosition(colName); // Loop is used to set the index for DATA_POINT_STYLE array @@ -262,6 +263,8 @@ export function GraphVisualiser({initColumns}) { const [columns, setColumns] = useState(initColumns); const [graphHeight, setGraphHeight] = useState(); const [expandedState, setExpandedState] = useState(true); + const [graphColor, setGraphColor] = useState([]); + const theme = useTheme(); // Create X axis options for drop down. @@ -339,7 +342,25 @@ export function GraphVisualiser({initColumns}) { if (graphType === 'P') { setYAxis(''); } - }, [graphType]); + }, [graphType, theme]); + + useEffect(()=>{ + setGraphColor(CHART_THEME_COLORS[queryToolCtx.preferences.misc.theme]); + }, [queryToolCtx.preferences.misc.theme, theme]); + + const graphBackgroundColor = useMemo(() => { + return theme.palette.background.default; + },[theme]); + + + const beforeDrawFunc = (chart) => { + const ctx = chart.canvas.getContext('2d'); + ctx.save(); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = graphBackgroundColor; + ctx.fillRect(0, 0, chart.width, chart.height); + ctx.restore(); + }; // Generate button callback const onGenerate = async ()=>{ @@ -359,7 +380,7 @@ export function GraphVisualiser({initColumns}) { setLoaderText(gettext('Rendering data points...')); // Set the Graph Data setGraphData( - (prev)=> [getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx), prev[1] + 1] + (prev)=> [getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx, graphColor), prev[1] + 1] ); setLoaderText(''); @@ -382,12 +403,7 @@ export function GraphVisualiser({initColumns}) { // when downloading the graph. const plugin = { beforeDraw: (chart) => { - const ctx = chart.canvas.getContext('2d'); - ctx.save(); - ctx.globalCompositeOperation = 'destination-over'; - ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--color-bg'); - ctx.fillRect(0, 0, chart.width, chart.height); - ctx.restore(); + beforeDrawFunc(chart); } }; @@ -444,7 +460,7 @@ export function GraphVisualiser({initColumns}) { {useMemo(()=> { chartObjRef.current = chartObj; - }} plugins={plugin}/>, [graphDataKey])} + }} plugins={[plugin]}/>, [graphDataKey])}