Edit button added, LOC removed.

src/CodeSnippetDisplay.tsx

@@ -198,18 +198,18 @@ export class CodeSnippetDisplay extends React.Component<
  };
 
  // Pick color for side of snippet box based on number of code lines
- private codeLines = (codeSnippet: ICodeSnippet): string => {
- let i;
- let counter = 0;
- for (i = 0; i < codeSnippet.code[0].length; i++) {
- if (codeSnippet.code[0][i] === '\n') {
- counter++;
- }
- }
- counter += 1;
- console.log(counter);
- return 'LOC\t\t' + counter;
- };
+ // private codeLines = (codeSnippet: ICodeSnippet): string => {
+ //  let i;
+ //  let counter = 0;
+ //  for (i = 0; i < codeSnippet.code[0].length; i++) {
+ //  if (codeSnippet.code[0][i] === '\n') {
+ //  counter++;
+ //  }
+ //  }
+ //  counter += 1;
+ //  console.log(counter);
+ //  return 'LOC\t\t' + counter;
+ // };
 
  //Change bookmark field and color onclick
  private bookmarkSnippetClick = (
@@ -380,10 +380,6 @@ export class CodeSnippetDisplay extends React.Component<
  }}
  >
  {this.boldNameOnSearch(this.state.filterValue, displayName)}
- <br />
- <div className="lines-of-code" id={id}>
- {this.codeLines(codeSnippet)}
- </div>
  </span>
  <div className={ACTION_BUTTONS_WRAPPER_CLASS}>
  {actionButtons.map((btn: IExpandableActionButton) => {

src/PreviewSnippet.tsx

@@ -56,6 +56,8 @@ export class Preview<T> extends Widget {
  content.addWidget(header);
  const body = renderer.createBody(options.body || '');
  content.addWidget(body);
+ const editButton = renderer.createEditButton(this);
+ content.addWidget(editButton);
 
  if (Preview.tracker.size > 0) {
  const previous = Preview.tracker.currentWidget;
@@ -330,11 +332,16 @@ export namespace Preview {
  * @returns A widget for the body.
  */
  createBody(body: Body<any>): Widget;
+ createEditButton(): Widget;
  }
 
  export class Renderer {
  /**
  * Create the header of the dialog.
+ *
+ * @param title - The title of the snippet.
+ *
+ * @returns A widget for the header of the preview.
  */
  createHeader(title: string): Widget {
  const header = ReactWidget.create(<>{title}</>);
@@ -343,6 +350,7 @@ export namespace Preview {
  // Styling.styleNode(header.node);
  return header;
  }
+
  /**
  * Create the body of the dialog.
  *
@@ -363,6 +371,7 @@ export namespace Preview {
  // order to trigger a render of the DOM nodes from the React element.
  MessageLoop.sendMessage(body, Widget.Msg.UpdateRequest);
  }
+
  // const iconNode = new Widget({ node: document.createElement('div') });
  // iconNode.title.icon = checkIcon;
  // body.
@@ -384,6 +393,36 @@ export namespace Preview {
  // iconWidget.addClass('jp-confirm-icon');
  // return iconWidget
  // }
+
+ /**
+ * Create the edit button in the dialog.
+ *
+ * @returns A widget for the edit button.
+ */
+ createEditButton(prev: any): Widget {
+ const editButton: Widget = new Widget({
+ node: document.createElement('span')
+ });
+ editButton.addClass('jp-Preview-button');
+ editButton.node.onmouseover = (): void => {
+ editButton.addClass('jp-Preview-button-hover');
+ };
+ editButton.node.onmouseout = (): void => {
+ editButton.removeClass('jp-Preview-button-hover');
+ };
+ editButton.node.onclick = (): void => {
+ document
+ .getElementsByClassName('drag-hover')
+ [prev._id].classList.remove('drag-hover-clicked');
+ document
+ .getElementsByClassName('elyra-codeSnippet-item')
+ [prev._id].classList.remove('elyra-codeSnippet-item-clicked');
+ event.stopPropagation();
+ event.preventDefault();
+ prev.reject();
+ };
+ return editButton;
+ }
  }
  /**
  * The default renderer instance.

style/index.css

@@ -176,7 +176,7 @@
  top: 31px;
  left: 5px;
  width: 100%;
- height: 710px;
+ height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
@@ -267,6 +267,21 @@
  display: block;
 }
 
+.jp-Preview-button {
+ width: 51px;
+ height: 51px;
+ background-image: url(./icon/Jupyter_pencileditbutton_inactive.svg);
+ float: right;
+ margin-top: -80px;
+ margin-right: 9px;
+ cursor: pointer;
+}
+
+.jp-Preview-button-hover {
+ background-image: url(./icon/jupyter_pencileditbutton_hover.svg);
+ cursor: pointer;
+}
+
 .triangle {
  width: 0;
  height: 0;