Skip to content
This repository was archived by the owner on Aug 23, 2025. It is now read-only.

Move vis modal into sidebar #869

Merged
rickbergfalk merged 11 commits into from
Oct 30, 2020
Merged

Move vis modal into sidebar #869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
efcdfde
Use components to isolate splitter logic
rickbergfalk Oct 30, 2020
946308e
Use editor store for vis form visible state
rickbergfalk Oct 30, 2020
fa4a0e6
Move EditorPaneVis to new component
rickbergfalk Oct 30, 2020
1f23e9b
Move debouned function to util
rickbergfalk Oct 30, 2020
900a934
EditorPaneSchemaSidebar
rickbergfalk Oct 30, 2020
56a97ab
Add EditorPaneVisProperties
rickbergfalk Oct 30, 2020
4714cc5
Remove ChartInputsContainer
rickbergfalk Oct 30, 2020
cc39377
Display inputs in single column
rickbergfalk Oct 30, 2020
ae9f003
Fix field inputs
rickbergfalk Oct 30, 2020
a4e1d89
Add warning
rickbergfalk Oct 30, 2020
2997853
cleanup
rickbergfalk Oct 30, 2020
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
4 changes: 4 additions & 0 deletions client/src/common/tauChartRef.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import debounce from 'lodash/debounce';

const chartRefs: { [key: string]: any } = {};

export function setFakeChartRef(queryId: string, chart: any) {
Expand All @@ -21,3 +23,5 @@ export function resizeChart(queryId: string) {
chart.resize();
}
}

export const debouncedResizeChart = debounce(resizeChart, 700);
216 changes: 103 additions & 113 deletions client/src/queryEditor/ChartInputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,50 @@
import React, { CSSProperties } from 'react';
import React, { ChangeEvent, CSSProperties } from 'react';
import Input from '../common/Input';
import Select from '../common/Select';
import { handleChartConfigurationFieldsChange } from '../stores/editor-actions';
import {
useLastStatementId,
useSessionChartFields,
useSessionChartType,
useStatementColumns,
} from '../stores/editor-store';
import chartDefinitions from '../utilities/chartDefinitions';

function cleanBoolean(value: any) {
function cleanBoolean(value: string | boolean) {
if (typeof value === 'boolean') {
return value;
}
if (typeof value === 'string') {
if (value.toLowerCase() === 'true') {
value = true;
return true;
} else if (value.toLowerCase() === 'false') {
value = false;
return false;
}
}
return value;

// If unexpected value return false
return false;
}

const inputStyle: CSSProperties = {
marginBottom: 16,
boxSizing: 'border-box',
width: `calc(1/2*100% - 8px)`,
};

type OwnProps = {
chartType?: string;
onChartConfigurationFieldsChange: (...args: any[]) => any;
queryChartConfigurationFields?: any;
queryResult?: any;
width: '100%',
};

type Props = OwnProps & typeof ChartInputs.defaultProps;
function ChartInputs() {
const chartType = useSessionChartType();
const chartFields = useSessionChartFields();
const lastStatementId = useLastStatementId();
const columns = useStatementColumns(lastStatementId);

function ChartInputs({
onChartConfigurationFieldsChange,
queryChartConfigurationFields,
queryResult,
chartType,
}: Props) {
const changeChartConfigurationField = (
chartFieldId: any,
queryResultField: any
chartFieldId: string,
queryResultField: string | boolean | number
) => {
onChartConfigurationFieldsChange(chartFieldId, queryResultField);
handleChartConfigurationFieldsChange(chartFieldId, queryResultField);
};

const renderFormGroup = (inputDefinitionFields: any) => {
let resultColumnNames: string[] = [];
if (queryResult && queryResult.columns) {
resultColumnNames = queryResult.columns.map((c: any) => c.name);
}

return inputDefinitionFields.map((field: any) => {
if (field.inputType === 'field-dropdown') {
const optionNodes = resultColumnNames.map((qrfield) => {
return (
<option key={qrfield} value={qrfield}>
{qrfield}
</option>
);
});
const selectedQueryResultField =
queryChartConfigurationFields[field.fieldId];
if (
selectedQueryResultField &&
resultColumnNames.indexOf(selectedQueryResultField) === -1
) {
optionNodes.push(
<option
key={'selectedQueryResultField'}
value={selectedQueryResultField}
>
{selectedQueryResultField}
</option>
);
}
return (
<div style={inputStyle} key={field.fieldId}>
<label>{field.label}</label>
<Select
className="w-100"
value={selectedQueryResultField}
onChange={(event: any) =>
changeChartConfigurationField(field.fieldId, event.target.value)
}
>
<option value="" />
{optionNodes}
</Select>
</div>
);
} else if (field.inputType === 'checkbox') {
const checked =
cleanBoolean(queryChartConfigurationFields[field.fieldId]) || false;
return (
<div style={inputStyle} key={field.fieldId}>
<input
type="checkbox"
checked={checked}
id={field.fieldId}
name={field.fieldId}
onChange={(e) =>
changeChartConfigurationField(field.fieldId, e.target.checked)
}
/>
<label htmlFor={field.fieldId} style={{ marginLeft: 8 }}>
{field.label}
</label>
</div>
);
} else if (field.inputType === 'textbox') {
const value = queryChartConfigurationFields[field.fieldId] || '';
return (
<div style={inputStyle} key={field.fieldId}>
<label>{field.label}</label>
<Input
value={value}
onChange={(e: any) =>
changeChartConfigurationField(field.fieldId, e.target.value)
}
className="w-100"
/>
</div>
);
} else {
throw Error(`field.inputType ${field.inputType} not supported`);
}
});
};
const columnNames = (columns || []).map((c) => c.name);

const chartDefinition = chartDefinitions.find(
(def) => def.chartType === chartType
Expand All @@ -134,6 +54,81 @@ function ChartInputs({
return null;
}

const content = chartDefinition.fields.map((field) => {
if (field.inputType === 'field-dropdown') {
const optionNodes = columnNames.map((qrfield) => {
return (
<option key={qrfield} value={qrfield}>
{qrfield}
</option>
);
});
const selectedQueryResultField = chartFields[field.fieldId];
if (
selectedQueryResultField &&
columnNames.indexOf(selectedQueryResultField) === -1
) {
optionNodes.push(
<option
key={'selectedQueryResultField'}
value={selectedQueryResultField}
>
{selectedQueryResultField}
</option>
);
}
return (
<div style={inputStyle} key={field.fieldId}>
<label>{field.label}</label>
<Select
className="w-100"
value={selectedQueryResultField}
onChange={(event: ChangeEvent<HTMLSelectElement>) =>
changeChartConfigurationField(field.fieldId, event.target.value)
}
>
<option value="" />
{optionNodes}
</Select>
</div>
);
} else if (field.inputType === 'checkbox') {
const checked = cleanBoolean(chartFields[field.fieldId]);
return (
<div style={inputStyle} key={field.fieldId}>
<input
type="checkbox"
checked={checked}
id={field.fieldId}
name={field.fieldId}
onChange={(e) =>
changeChartConfigurationField(field.fieldId, e.target.checked)
}
/>
<label htmlFor={field.fieldId} style={{ marginLeft: 8 }}>
{field.label}
</label>
</div>
);
} else if (field.inputType === 'textbox') {
const value = chartFields[field.fieldId] || '';
return (
<div style={inputStyle} key={field.fieldId}>
<label>{field.label}</label>
<Input
value={value}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
changeChartConfigurationField(field.fieldId, e.target.value)
}
className="w-100"
/>
</div>
);
} else {
throw Error(`field.inputType ${field.inputType} not supported`);
}
});

return (
<div
style={{
Expand All @@ -146,14 +141,9 @@ function ChartInputs({
justifyContent: 'space-between',
}}
>
{renderFormGroup(chartDefinition.fields)}
{content}
</div>
);
}

ChartInputs.defaultProps = {
queryChartConfigurationFields: {},
queryResult: {},
};

export default ChartInputs;
25 changes: 0 additions & 25 deletions client/src/queryEditor/ChartInputsContainer.tsx
View file
Open in desktop

This file was deleted.

39 changes: 20 additions & 19 deletions client/src/queryEditor/ChartTypeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
import React from 'react';
import React, { ChangeEvent } from 'react';
import Select from '../common/Select';
import { handleChartTypeChange } from '../stores/editor-actions';
import { useSessionChartType } from '../stores/editor-store';
import chartDefinitions from '../utilities/chartDefinitions';

function ChartTypeSelect({ className, style }: any) {
function ChartTypeSelect() {
const chartType = useSessionChartType();

const chartOptions = chartDefinitions.map((d) => {
return (
<option key={d.chartType} value={d.chartType}>
{d.chartLabel}
</option>
);
});

return (
<Select
className={className}
onChange={(event: any) => handleChartTypeChange(event.target.value)}
style={style}
value={chartType}
>
<option value="">No visualization</option>
{chartOptions}
</Select>
<>
<label>Visualization</label>
<Select
onChange={(event: ChangeEvent<HTMLSelectElement>) =>
handleChartTypeChange(event.target.value)
}
value={chartType}
>
<option value="">No visualization</option>
{chartDefinitions.map((d) => {
return (
<option key={d.chartType} value={d.chartType}>
{d.chartLabel}
</option>
);
})}
</Select>
</>
);
}

Expand Down
36 changes: 36 additions & 0 deletions client/src/queryEditor/EditorPaneSchemaSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React, { FunctionComponent, ReactElement } from 'react';
import SplitPane from 'react-split-pane';
import { debouncedResizeChart } from '../common/tauChartRef';
import SchemaSidebar from '../schema/SchemaSidebar';
import { useSessionShowSchema } from '../stores/editor-store';

interface EditorPaneSchemaSidebarProps {
queryId: string;
children: ReactElement;
}

const EditorPaneSchemaSidebar: FunctionComponent<EditorPaneSchemaSidebarProps> = ({
children,
queryId,
}: EditorPaneSchemaSidebarProps) => {
const showSchema = useSessionShowSchema();

if (!showSchema) {
return children;
}

return (
<SplitPane
split="vertical"
minSize={150}
defaultSize={260}
maxSize={-100}
onChange={() => debouncedResizeChart(queryId)}
>
<SchemaSidebar />
{children}
</SplitPane>
);
};

export default EditorPaneSchemaSidebar;
Loading