fix: support reconfigure button

2020-10-07 06:22:56 -07:00 · 2020-10-07 06:22:56 -07:00 · 2b4c8ddb93
--- a/src/react/components/common/tagInput/tableTagConfig.scss
+++ b/src/react/components/common/tagInput/tableTagConfig.scss
@ -78,7 +78,7 @@
                }
                .column_header {
                    min-width: 130px;
-                    background-color: $lighter-4;
+                    background-color: $lighter-3;
                    border: 2px solid grey;
                    text-align: center;
                    padding: .125rem .25rem;
@ -86,14 +86,14 @@
                }
                .row_header {
                    min-width: 130px;
-                    background-color: $lighter-2;
+                    background-color: $lighter-3;
                    border: 2px solid grey;
                    text-align: center;
                    padding: .125rem .5rem;
                }
                .empty_header {
                    border: 2px solid grey;
-                    background-color: $lighter-1;
+                    background-color: $lighter-3;
                }
                .table-cell {
                    text-align: center;
--- a/src/react/components/common/tagInput/tableTagConfig.tsx
+++ b/src/react/components/common/tagInput/tableTagConfig.tsx
@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';

 import { Customizer, ICustomizations, ChoiceGroup, IChoiceGroupOption, PrimaryButton, DetailsList, IColumn, TextField, Dropdown, SelectionMode, DetailsListLayoutMode, FontIcon, CheckboxVisibility, IContextualMenuItem, CommandBar, Selection, Separator } from "@fluentui/react";
 import { getPrimaryGreyTheme, getPrimaryGreenTheme, getRightPaneDefaultButtonTheme, getGreenWithWhiteBackgroundTheme, getPrimaryBlueTheme, getDefaultTheme } from '../../../../common/themes';
-import { FieldFormat, FieldType, IApplicationState, TagInputMode } from '../../../../models/applicationState';
+import { FieldFormat, FieldType, IApplicationState, ITableTag, TagInputMode } from '../../../../models/applicationState';
 import { filterFormat } from "../../../../common/utils";
 import { toast } from "react-toastify";
 import "./tableTagConfig.scss";
@ -33,6 +33,8 @@ interface ITableTagConfigProps {
    setTagInputMode: (addTableMode: TagInputMode) => void;
    addTableTag: (table: any) => void;
    splitPaneWidth: number;
+    tableTag?: ITableTag;
+    reconfigureTableConfirm?: () => void;
 }


@ -41,6 +43,7 @@ interface ITableTagConfigState {
    columns: any[],
    name: string,
    format: string,
+    headerTypeAndFormat: string;
 }
 interface ITableConfigItem {
    name: string,
@ -110,12 +113,22 @@ const typeOptions = () => {

 export default function TableTagConfig(props: ITableTagConfigProps) {
    const { setTagInputMode = null, addTableTag = null, splitPaneWidth = null } = props;
-    const table: ITableTagConfigState = {
-        name: "",
-        format: "fixed",
-        rows: [{ name: "", type: FieldType.String, format: FieldFormat.NotSpecified }],
-        columns: [{ name: "", type: FieldType.String, format: FieldFormat.NotSpecified }],
-    };
+    let table: ITableTagConfigState;
+    if (props.tableTag) {
+        table = { name: props.tableTag.name + " ",
+            format: "fixed",
+            rows: props.tableTag.rowKeys.map((row) => {return { name: row.fieldKey, type: row.fieldType, format: row.fieldFormat }}),
+            columns: props.tableTag.columnKeys.map((col) => {return { name: col.fieldKey, type: col.fieldType, format: col.fieldFormat }}),
+            headerTypeAndFormat: "columns",
+        };
+    } else {
+        table = { name: "",
+            format: "fixed",
+            rows: [{ name: "", type: FieldType.String, format: FieldFormat.NotSpecified }],
+            columns: [{ name: "", type: FieldType.String, format: FieldFormat.NotSpecified }],
+            headerTypeAndFormat: "columns",
+        };
+    }
    const tags = useSelector((state: IApplicationState) => {
        return state.currentProject.tags
    });
@ -128,6 +141,7 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
    const [headersFormatAndType, setHeadersFormatAndType] = useState<string>("columns");
    const [selectedColumn, setSelectedColumn] = useState(undefined);
    const [selectedRow, setSelectedRow] = useState(undefined);
+    const [headerTypeAndFormat, setHeaderTypeAndFormat] = useState<string>(table.headerTypeAndFormat);

    function selectColumnType(idx: number, type: string) {
        setColumns(columns.map((col, currIdx) => idx === currIdx ? { ...col, type, format: FieldFormat.NotSpecified } : col
@ -588,7 +602,7 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
    return (
        <Customizer {...dark}>
            <div className="config-view_container" style={{width: splitPaneWidth}}>
-                <h4 className="mt-2">Configure table tag</h4>
+                <h4 className="mt-2">{props.tableTag ? "Reconfigure table tag" : "Configure table tag"}</h4>
                <h5 className="mt-3 ">Name:</h5>
                <TextField
                    className="table-name_input ml-12px"
@ -597,28 +611,32 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
                    value={name}
                    errorMessage={name ? notUniqueNames.tags ? strings.tags.regionTableTags.configureTag.errors.notUniqueTagName : "" : strings.tags.regionTableTags.configureTag.errors.assignTagName}
                />
-                <h5 className="mt-4">Format:</h5>
-                <ChoiceGroup
-                    className="ml-12px"
-                    onChange={(event, option) => {
-                        setFormat(option.key)
-                        if (option.key === "rowDynamic") {
-                            setHeadersFormatAndType("columns");
+                {!props.tableTag && 
+                    <>
+                        <h5 className="mt-4">Format:</h5>
+                        <ChoiceGroup
+                            className="ml-12px"
+                            onChange={(event, option) => {
+                                setFormat(option.key)
+                                if (option.key === "rowDynamic") {
+                                    setHeadersFormatAndType("columns");
+                                }
+                            }}
+                            defaultSelectedKey="fixed"
+                            options={tableFormatOptions}
+                            theme={getRightPaneDefaultButtonTheme()}
+                        />
+                        {format === "fixed" && <>
+                            <h5 className="mt-4" >Configure type and format for:</h5>
+                            <ChoiceGroup
+                                className="ml-12px type-format"
+                                defaultSelectedKey={"columns"}
+                                options={headersFormatAndTypeOptions}
+                                onChange={(e, option) => setHeadersFormatAndType(option.key)}
+                                required={false} />
+                        </>
                        }
-                    }}
-                    defaultSelectedKey="fixed"
-                    options={tableFormatOptions}
-                    theme={getRightPaneDefaultButtonTheme()}
-                />
-                {format === "fixed" && <>
-                    <h5 className="mt-4" >Configure type and format for:</h5>
-                    <ChoiceGroup
-                        className="ml-12px type-format"
-                        defaultSelectedKey={"columns"}
-                        options={headersFormatAndTypeOptions}
-                        onChange={(e, option) => setHeadersFormatAndType(option.key)}
-                        required={false} />
-                </>
+                    </>
                }
                <div className="columns_container">
                    <h5 className="mt-3">Column headers:</h5>
@ -688,7 +706,7 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
                    </div>
                }
                {
-                    tableChanged &&
+                    (tableChanged || props.tableTag) &&
                    <div className="preview_container">
                        <h5 className="mt-3 ">Preview:</h5>
                        <div className="table_container">
@ -709,8 +727,13 @@ export default function TableTagConfig(props: ITableTagConfigProps) {
                    <PrimaryButton
                        className="save"
                        theme={getPrimaryGreenTheme()}
-                        onClick={() =>
-                            validateInputAndSave()
+                        onClick={() => {
+                            if (props.tableTag) {
+                                props.reconfigureTableConfirm();
+                            } else {
+                                validateInputAndSave()
+                            }
+                        }
                        }>Save</PrimaryButton>
                </div>
            </div>
--- a/src/react/components/common/tagInput/tableTagLabeling.scss
+++ b/src/react/components/common/tagInput/tableTagLabeling.scss
@ -18,7 +18,7 @@
            .column_header {
                min-width: 130px;
                max-width: 200px;
-                background-color: $lighter-4;
+                background-color: $lighter-3;
                border: 2px solid grey;
                text-align: center;
                padding: .125rem .25rem;
@ -27,20 +27,29 @@
                min-width: 130px;
                max-width: 200px;
                border: 2px solid grey;
-                background-color: $lighter-2;
+                background-color: $lighter-3;
                text-align: center;
                padding: .125rem .5rem;
            }
            .empty_header {
                border: 2px solid grey;
-                background-color: $lighter-1;
+                background-color: $lighter-3;

            }
            .table-cell {
                text-align: center;
                background-color: $darker-3;
                color: rgba(255, 255, 255, 0.75);
+                &:hover {
+                    background-color: $lighter-1;
+                }
+                &:active {
+                    background-color: $lighter-2;
+
+                }
            }
+                
+
        }
    }
    .buttons-container {
--- a/src/react/components/common/tagInput/tableTagLabeling.tsx
+++ b/src/react/components/common/tagInput/tableTagLabeling.tsx
@ -61,7 +61,11 @@ export default class TableTagLabeling extends React.Component<ITableTagLabelingP
                <div className="table-labeling_container" style={{width: this.props.splitPaneWidth}}>
                    <h4 className="mt-2  ml-4">{strings.tags.regionTableTags.tableLabeling.title}</h4>
                    <div className="labeling-guideline">
-                        {strings.tags.regionTableTags.tableLabeling.description}
+                        To start labeling your table:
+                        <ol>
+                            <li>Select the words on the document you want to label</li>
+                            <li>Click the table cell you want to label selected words to</li>
+                        </ol>
                    </div>
                    <div className="table-view-container">
                        <table className="viewed-table">
@ -82,8 +86,7 @@ export default class TableTagLabeling extends React.Component<ITableTagLabelingP
                        <DefaultButton
                            className="button-reconfigure"
                            theme={getPrimaryGreenTheme()}
-                            onClick={() => { }}
-                            disabled={true}
+                            onClick={() => { this.props.setTagInputMode(TagInputMode.ConfigureTable)}}
                        >{strings.tags.regionTableTags.tableLabeling.buttons.reconfigureTable}
                        </DefaultButton>
                    </div>
@ -112,7 +115,7 @@ export default class TableTagLabeling extends React.Component<ITableTagLabelingP
                        tableRow.push(<th key={j} className={"empty_header"}/>);
                    } else {
                        tableRow.push(
-                        <td onClick={() => this.handleCellClick(i-1, j-1)} key={j}>
+                        <td className={"table-cell"} onClick={() => this.handleCellClick(i-1, j-1)} key={j}>
                            {this.props.selectedTableTagBody[i-1][j-1]?.map((tableRegion) => tableRegion.value).join(" ")}
                        </td>);
                    }
--- a/src/react/components/common/tagInput/tagInput.tsx
+++ b/src/react/components/common/tagInput/tagInput.tsx
@ -84,8 +84,9 @@ export interface ITagInputProps {

    setTagInputMode?: (tagInputMode: TagInputMode) => void;
    tagInputMode: TagInputMode;
-    selectedTableTagToLabel: ITag;
+    selectedTableTagToLabel: ITableTag;
    handleLabelTable: (tagInputMode: TagInputMode, selectedTableTagToLabel) => void;
+    reconfigureTableConfirm: () => void;
    handleTableCellClick: (iTableCellIndex, jTableCellIndex) => void;
    selectedTableTagBody: ITableRegion[][][];
    splitPaneWidth: number;
@ -167,6 +168,8 @@ export class TagInput extends React.Component<ITagInputProps, ITagInputState> {
                                setTagInputMode={this.props.setTagInputMode}
                                addTableTag={this.addTableTag}
                                splitPaneWidth={this.props.splitPaneWidth}
+                                tableTag={this.props.selectedTableTagToLabel}
+                                reconfigureTableConfirm={this.props.reconfigureTableConfirm}
                            />
                        </div>
                    </div>
--- a/src/react/components/pages/editorPage/editorPage.tsx
+++ b/src/react/components/pages/editorPage/editorPage.tsx
@ -35,11 +35,12 @@ import { throttle } from "../../../../common/utils";
 import { constants } from "../../../../common/constants";
 import PreventLeaving from "../../common/preventLeaving/preventLeaving";
 import { Spinner, SpinnerSize } from "@fluentui/react/lib/Spinner";
-import { getPrimaryGreenTheme, getPrimaryRedTheme } from "../../../../common/themes";
+import { getPrimaryBlueTheme, getPrimaryGreenTheme, getPrimaryRedTheme } from "../../../../common/themes";
 import { toast } from "react-toastify";
 import { PredictService } from "../../../../services/predictService";
 import { AssetService } from "../../../../services/assetService";
 import clone from "rfdc";
+import { Tag } from "reactstrap";

 /**
 * Properties for Editor Page
@ -100,6 +101,7 @@ export interface IEditorPageState {
    selectedTableTagToLabel: ITableTag;
    selectedTableTagBody: ITableRegion[][][];
    rightSplitPaneWidth?: number;
+    reconfigureTableConfirm?: boolean;
 }

 function mapStateToProps(state: IApplicationState) {
@ -150,6 +152,8 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
    private renameCanceled: () => void;
    private deleteTagConfirm: React.RefObject<Confirm> = React.createRef();
    private deleteDocumentConfirm: React.RefObject<Confirm> = React.createRef();
+    private reconfigTableConfirm: React.RefObject<Confirm> = React.createRef();
+
    private isUnmount: boolean = false;

    constructor(props) {
@ -332,6 +336,7 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                                    handleTableCellClick={this.handleTableCellClick}
                                    selectedTableTagBody={this.state.selectedTableTagBody}
                                    splitPaneWidth={this.state.rightSplitPaneWidth}
+                                    reconfigureTableConfirm={this.reconfigureTableConfirm}
                                />
                                <Confirm
                                    title={strings.editorPage.tags.rename.title}
@ -360,6 +365,15 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
                                        onConfirm={this.onAssetDeleted}
                                    />
                                }
+                                
+                                    <Confirm
+                                        title={"Are you sure you want to reconfigure this tag?"}
+                                        ref={this.reconfigTableConfirm}
+                                        message={"Any changes will be applied to all assets"}
+                                        confirmButtonTheme={getPrimaryBlueTheme()}
+                                        onConfirm={()=> {this.setState({tagInputMode: TagInputMode.LabelTable}, () => this.resizeCanvas()); this.resizeCanvas(); }}
+                                    />
+                                
                            </div>
                        </SplitPane>
                    </div>
@ -787,6 +801,12 @@ export default class EditorPage extends React.Component<IEditorPageProps, IEdito
        });
    }

+    private reconfigureTableConfirm = () => {
+        this.setState({reconfigureTableConfirm: true})
+        this.reconfigTableConfirm.current.open();
+
+    }
+
    private loadProjectAssets = async (): Promise<void> => {
        if (this.loadingProjectAssets) {
            return;
--- a/tslint.json
+++ b/tslint.json
@ -13,7 +13,7 @@
        "no-string-literal": false,
        "no-bitwise": false,
        "function-constructor": false,
-        "linebreak-style": [true, "CRLF"]
+        "linebreak-style": [true, "LF"]
    },
    "rulesDirectory": []
 }