Skip to content

Commit d9749d1

Browse files
xile611xile611
authored
Merge branch 'feat/vchart_editor' into feat/vchart_editor_merge_spec
2 parents 0746b4f + 8db1843 commit d9749d1

File tree

1 file changed

+122
-31
lines changed
  • packages/vmind/__tests__/experiment/src/pages/ChartDialogueQA

1 file changed

+122
-31
lines changed

‎packages/vmind/__tests__/experiment/src/pages/ChartDialogueQA/qaPairRag.tsx

Lines changed: 122 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { isArray } from '@visactor/vutils';
1919
import { VChartSpec } from '../../../../../src';
2020

2121
const { Option } = Select;
22+
const TextArea = Input.TextArea;
2223
const FormItem = Form.Item;
2324
const globalVariables = (import.meta as any).env;
2425
const url = globalVariables.VITE_VCHART_EDITOR_URL || 'http://localhost/';
@@ -60,6 +61,89 @@ const baseSpec = {
6061
position: 'start'
6162
}
6263
};
64+
const topKeys = [
65+
'type',
66+
'series',
67+
'axes',
68+
'crosshair',
69+
'data',
70+
'width',
71+
'height',
72+
'autoFit',
73+
'color',
74+
'seriesStyle',
75+
'animationThreshold',
76+
'hover',
77+
'select',
78+
'region',
79+
'title',
80+
'layout',
81+
'legends',
82+
'tooltip',
83+
'player',
84+
'dataZoom',
85+
'scrollBar',
86+
'brush',
87+
'scales',
88+
'customMark',
89+
'theme',
90+
'background',
91+
'stackInverse',
92+
'stackSort',
93+
'media',
94+
'autoBandSize',
95+
'direction',
96+
'markLine',
97+
'markArea',
98+
'markPoint',
99+
'padding',
100+
'percent',
101+
'name',
102+
'id',
103+
'animation',
104+
'stack',
105+
'animationEnter',
106+
'animationUpdate',
107+
'animationExit',
108+
'dataIndex',
109+
'sampling',
110+
'animationState',
111+
'large',
112+
'largeThreshold',
113+
'progressiveStep',
114+
'progressiveThreshold',
115+
'support3d',
116+
'regionIndex',
117+
'regionId',
118+
'totalLabel',
119+
'animationAppear',
120+
'animationDisappear',
121+
'animationNormal',
122+
'xField',
123+
'yField',
124+
'label',
125+
'bar',
126+
'barBackground',
127+
'barWidth',
128+
'barMinWidth',
129+
'barMaxWidth',
130+
'barGapInGroup',
131+
'barMinHeight',
132+
'stackCornerRadius',
133+
'x2Field',
134+
'y2Field',
135+
'zField',
136+
'sortDataByAxis',
137+
'dataId',
138+
'dataKey',
139+
'seriesField',
140+
'stackOffsetSilhouette',
141+
'invalidType',
142+
'extensionMark',
143+
'interactions',
144+
'activePoint',
145+
'samplingFactor'
146+
];
63147
const vchartSpecAtom = new VChartSpec({ spec: baseSpec }, {});
64148
export function QARag() {
65149
const vchartInstance = React.useRef<any>(null);
@@ -288,6 +372,9 @@ export function QARag() {
288372
onOk={handleDownFeedback}
289373
confirmLoading={confirmLoading}
290374
onCancel={() => setFeedbackVisible(false)}
375+
style={{
376+
width: 650
377+
}}
291378
>
292379
<Form
293380
{...{
@@ -300,20 +387,26 @@ export function QARag() {
300387
}}
301388
form={form}
302389
labelCol={{
303-
style: { flexBasis: 150 }
390+
style: { flexBasis: 220 }
304391
}}
305392
wrapperCol={{
306-
style: { flexBasis: 'calc(100% - 160px)' }
393+
style: { flexBasis: 'calc(100% - 230px)' }
307394
}}
308395
>
309-
<FormItem label="Type" required field="wrongType" rules={[{ required: true }]}>
310-
<Select options={['DSL', 'VChart Render', 'Not sure']} />
396+
<FormItem label="哪里错了" required field="wrongType" rules={[{ required: true }]}>
397+
<Select
398+
options={[
399+
{ label: 'Only DSL', value: 'DSL' },
400+
{ label: 'Only VChart Render', value: 'VChart' },
401+
{ label: 'Not sure/Both', value: 'Not sure' }
402+
]}
403+
/>
311404
</FormItem>
312-
<FormItem label="TopKeyPath" field="topKeyAnswer" rules={[{ required: true }]}>
313-
<Input placeholder="" />
405+
<FormItem label="正确答案对应的topKey是什么" field="topKeyAnswer" rules={[{ required: true }]}>
406+
<Select options={topKeys} showSearch />
314407
</FormItem>
315-
<FormItem label="Answer DSL" field="keyPathAnswer">
316-
<Input placeholder="" />
408+
<FormItem label="正确的DSL是啥" field="keyPathAnswer">
409+
<TextArea placeholder={`{"label": {"visible": true}}`} />
317410
</FormItem>
318411
</Form>
319412
</Modal>
@@ -359,28 +452,26 @@ export function QARag() {
359452
<div className="recall-content">
360453
<div className="one-content">
361454
<div>QA Recall:</div>
362-
{qaResult && qaResult.length
363-
? qaResult.map((item, index) => (
364-
<Card key={index} className="qa-card">
365-
<div className="qa-div">
366-
<span className="title">Score:</span>
367-
<span>{item.scores.toFixed(2)}</span>
368-
</div>
369-
<div className="qa-div">
370-
<div className="title">Question:</div>
371-
<span>{item.question}</span>
372-
</div>
373-
<div className="qa-div">
374-
<div className="title">Explanation:</div>
375-
<span>{item.explanation}</span>
376-
</div>
377-
<div className="qa-div">
378-
<div className="title">Answer:</div>
379-
<span>{`${item.answer}`}</span>
380-
</div>
381-
</Card>
382-
))
383-
: null}
455+
{qaResult.map((item, index) => (
456+
<Card key={index} className="qa-card">
457+
<div className="qa-div">
458+
<span className="title">Score:</span>
459+
<span>{item.scores.toFixed(2)}</span>
460+
</div>
461+
<div className="qa-div">
462+
<div className="title">Question:</div>
463+
<span>{item.question}</span>
464+
</div>
465+
<div className="qa-div">
466+
<div className="title">Explanation:</div>
467+
<span>{item.explanation}</span>
468+
</div>
469+
<div className="qa-div">
470+
<div className="title">Answer:</div>
471+
<span>{JSON.stringify(item.answer)}</span>
472+
</div>
473+
</Card>
474+
))}
384475
</div>
385476

386477
<div className="one-content">
@@ -399,7 +490,7 @@ export function QARag() {
399490
{ragOption.type === 'qa' ? (
400491
<div className="qa-div">
401492
<div className="title">Answer:</div>
402-
<span>{`${item.answer}`}</span>
493+
<span>{JSON.stringify(item.answer）}</span>
403494
</div>
404495
) : null}
405496
<div className="qa-div">

0 commit comments

Comments
 (0)