App.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /*
  2. * Copyright 2018-2022 Elyra Authors
  3. *
  4. * Licensed under the Apache License, Version 2.0 (the "License");
  5. * you may not use this file except in compliance with the License.
  6. * You may obtain a copy of the License at
  7. *
  8. * http://www.apache.org/licenses/LICENSE-2.0
  9. *
  10. * Unless required by applicable law or agreed to in writing, software
  11. * distributed under the License is distributed on an "AS IS" BASIS,
  12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. * See the License for the specific language governing permissions and
  14. * limitations under the License.
  15. */
  16. import { useState } from "react";
  17. import { PipelineEditor, ThemeProvider } from "@elyra/pipeline-editor";
  18. import { createNode } from "./node-utils";
  19. import imagePath from "./node.svg";
  20. import theme from "./theme";
  21. const node = createNode({
  22. op: "execute-node",
  23. description: "A simple node",
  24. label: "Node",
  25. image: imagePath,
  26. properties: [
  27. {
  28. id: "label",
  29. type: "string",
  30. label: "Label",
  31. description: "The label that shows up on the node.",
  32. default: "",
  33. required: true,
  34. },
  35. {
  36. id: "enum",
  37. type: "string",
  38. enum: ["one", "two"],
  39. label: "Choose",
  40. description: "Choose one or the other.",
  41. default: "one",
  42. },
  43. {
  44. id: "yes-or-no",
  45. type: "boolean",
  46. label: "Yes or no?",
  47. description: "Something should happen when this node is run.",
  48. default: false,
  49. },
  50. {
  51. id: "array",
  52. type: "string[]",
  53. label: "Things",
  54. description: "Add some things okay.",
  55. default: [],
  56. },
  57. ],
  58. });
  59. function App() {
  60. const [pipeline, setPipeline] = useState();
  61. return (
  62. <ThemeProvider theme={theme}>
  63. <PipelineEditor
  64. pipeline={pipeline}
  65. palette={{
  66. version: "3.0",
  67. categories: [{ node_types: [node] }],
  68. }}
  69. onChange={setPipeline}
  70. />
  71. </ThemeProvider>
  72. );
  73. }
  74. export default App;