[js][tc] disable layout button when toolchain is invalid

conda/js/src/components/toolchain/ToolchainEditor.jsx

@@ -33,6 +33,7 @@ import { getRandomBrightColor, generateNewKey, copyObj } from '@helpers';
 import { getValidToolchainObj as getValidObj } from '@helpers/beat';
 import type { BeatObject } from '@helpers/beat';
 import { fetchLayout, genModuleApiFuncs } from '@helpers/api';
+import Validate, { VALIDATORS } from '@helpers/schema';
 
 import * as Actions from '@store/actions.js';
 import * as Selectors from '@store/selectors.js';
@@ -1037,7 +1038,8 @@ export class ToolchainEditor extends React.PureComponent<Props, State> {
 								<Button
 									size='sm'
 									onClick={this.autoLayout}
-									title={'This will save the toolchain to your BEAT prefix.'}
+									title={'This will use Graphviz to generate a more visually understandable layout for your toolchain.'}
+									disabled={!!Validate(VALIDATORS['toolchain'], this.props.data)}
 								>
 									Layout
 								</Button>

conda/js/src/components/toolchain/ToolchainEditor.spec.jsx

@@ -1060,5 +1060,41 @@ describe('<ToolchainEditor />', function() {
 			const data = wrapper.props().data;
 			expect(data.contents.blocks.find(b => b.name == 'training_alg')).to.have.property('synchronized_channel', '');
 		});
+
+		it('Disables the layout button when the toolchain is invalid', async () => {
+			const conToDel = { from: 'training_data.species', to: 'training_alg.species', channel: 'training_data' };
+			const conToDel2 = { from: 'training_data.measurements', to: 'training_alg.measurements', channel: 'training_data' };
+			const tc = getValidObj(getIrisTc());
+			wrapper = mount(
+				<C
+					data={tc}
+					sets={sets}
+					protocols={protocols}
+					toolchains={state.toolchain}
+					databases={state.database}
+					normalAlgorithms={normalAlgorithms}
+					analyzerAlgorithms={analyzerAlgorithms}
+					saveFunc={saveFunc}
+					updateFunc={updateFunc}
+				/>
+			);
+
+			// change testing_alg.lda_machine to testing_alg.lda
+			expect(wrapper.exists('#training_data-species-training_alg-species')).to.equal(true);
+			expect(wrapper.exists('#training_data-measurements-training_alg-measurements')).to.equal(true);
+			expect(wrapper.find('Button[title="This will use Graphviz to generate a more visually understandable layout for your toolchain."]'))
+			.to.have.prop('disabled', false);
+			wrapper.instance().handleConnectionContextMenu({}, { clicked: 'delete', connection: conToDel });
+			wrapper.update();
+			wrapper.instance().handleConnectionContextMenu({}, { clicked: 'delete', connection: conToDel2 });
+			wrapper.update();
+			expect(wrapper.exists('#training_data-species-training_alg-species')).to.equal(false);
+			expect(wrapper.exists('#training_data-measurements-training_alg-measurements')).to.equal(false);
+
+			const data = wrapper.props().data;
+			expect(data.contents.blocks.find(b => b.name == 'training_alg')).to.have.property('synchronized_channel', '');
+			expect(wrapper.find('Button[title="This will use Graphviz to generate a more visually understandable layout for your toolchain."]'))
+			.to.have.prop('disabled', true);
+		});
 	});
 });